From 5a5450f19e217860e086c7e003e2e8a31863a1eb Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Fri, 31 Jan 2025 14:41:20 -0800
Subject: [PATCH] Organized the console better and added the icon from the
 block

---
 .../console-entry/console-entry.tsx           | 58 ++++++++++++++-----
 app/w/components/console/console.tsx          |  2 +-
 app/w/hooks/use-workflow-execution.ts         | 12 ----
 3 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/app/w/components/console/components/console-entry/console-entry.tsx b/app/w/components/console/components/console-entry/console-entry.tsx
index 610d13588a..d6112747ee 100644
--- a/app/w/components/console/components/console-entry/console-entry.tsx
+++ b/app/w/components/console/components/console-entry/console-entry.tsx
@@ -9,12 +9,14 @@ import {
 } from 'lucide-react'
 import { ConsoleEntry as ConsoleEntryType } from '@/stores/console/types'
 import { JSONView } from '../json-view/json-view'
+import { getBlock } from '@/blocks'
 
 interface ConsoleEntryProps {
   entry: ConsoleEntryType
+  consoleWidth: number
 }
 
-export function ConsoleEntry({ entry }: ConsoleEntryProps) {
+export function ConsoleEntry({ entry, consoleWidth }: ConsoleEntryProps) {
   const [isExpanded, setIsExpanded] = useState(false)
 
   const timeAgo = useMemo(
@@ -25,29 +27,53 @@ export function ConsoleEntry({ entry }: ConsoleEntryProps) {
     [entry.startedAt]
   )
 
+  const blockConfig = useMemo(() => {
+    if (!entry.blockName) return null
+    const blockType = entry.blockName.split(' ')[0].toLowerCase()
+    return getBlock(blockType)
+  }, [entry.blockName])
+
+  const BlockIcon = blockConfig?.toolbar.icon
+
   const statusIcon = entry.error ? (
     <AlertCircle className="h-4 w-4 text-destructive" />
   ) : (
-    <CheckCircle2 className="h-4 w-4 text-success" />
+    <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
   )
 
   return (
     <div className="border-b border-border hover:bg-accent/50 transition-colors">
       <div className="p-4 space-y-4">
-        {entry.blockName && (
-          <div className="flex items-center gap-2 text-sm">
-            {statusIcon}
-            <span className="text-muted-foreground">{entry.blockName}</span>
-          </div>
-        )}
-        <div className="grid grid-cols-2 gap-4 text-sm text-muted-foreground">
-          <div className="flex items-center gap-2">
-            <Calendar className="h-4 w-4" />
-            <span>{format(new Date(entry.startedAt), 'HH:mm:ss')}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <Clock className="h-4 w-4" />
-            <span>Duration: {entry.durationMs}ms</span>
+        <div
+          className={`${
+            consoleWidth >= 400
+              ? 'flex items-center justify-between'
+              : 'grid gap-4 grid-cols-1'
+          }`}
+        >
+          {entry.blockName && (
+            <div className="flex items-center gap-2 text-sm">
+              {BlockIcon ? (
+                <BlockIcon className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <Terminal className="h-4 w-4 text-muted-foreground" />
+              )}
+              <span className="text-muted-foreground">{entry.blockName}</span>
+            </div>
+          )}
+          <div
+            className={`${
+              consoleWidth >= 400 ? 'flex gap-4' : 'grid grid-cols-2 gap-4'
+            } text-sm text-muted-foreground`}
+          >
+            <div className="flex items-center gap-2">
+              <Calendar className="h-4 w-4" />
+              <span>{format(new Date(entry.startedAt), 'HH:mm:ss')}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Clock className="h-4 w-4" />
+              <span>Duration: {entry.durationMs}ms</span>
+            </div>
           </div>
         </div>
 
diff --git a/app/w/components/console/console.tsx b/app/w/components/console/console.tsx
index a92b1992ad..b5551c6c3e 100644
--- a/app/w/components/console/console.tsx
+++ b/app/w/components/console/console.tsx
@@ -99,7 +99,7 @@ export function Console() {
           </div>
         ) : (
           filteredEntries.map((entry) => (
-            <ConsoleEntry key={entry.id} entry={entry} />
+            <ConsoleEntry key={entry.id} entry={entry} consoleWidth={width} />
           ))
         )}
       </ScrollArea>
diff --git a/app/w/hooks/use-workflow-execution.ts b/app/w/hooks/use-workflow-execution.ts
index 075d2f6638..3468ac23ec 100644
--- a/app/w/hooks/use-workflow-execution.ts
+++ b/app/w/hooks/use-workflow-execution.ts
@@ -50,18 +50,6 @@ export function useWorkflowExecution() {
         })
       }
 
-      // Add final execution result to console
-      addConsole({
-        output: result.output,
-        error: result.error,
-        durationMs: result.metadata?.duration ?? -1,
-        startedAt: result.metadata?.startTime || new Date().toISOString(),
-        endedAt: result.metadata?.endTime || new Date().toISOString(),
-        workflowId: activeWorkflowId,
-        timestamp: result.metadata?.startTime || new Date().toISOString(),
-        blockName: 'Workflow Result'
-      })
-
       if (result.logs) {
         console.group('Detailed Block Logs')
         result.logs.forEach((log) => {