Completed connection UI without subblock logic

app/w/components/workflow-block/components/connection-block/connection-block.tsx

@@ -0,0 +1,33 @@
+import { useBlockConnections } from '@/app/w/hooks/use-block-connections'
+import { Card } from '@/components/ui/card'
+
+interface ConnectionBlockProps {
+  blockId: string
+}
+
+export function ConnectionBlock({ blockId }: ConnectionBlockProps) {
+  const { incomingConnections, hasIncomingConnections } =
+    useBlockConnections(blockId)
+
+  if (!hasIncomingConnections) return null
+
+  return (
+    <div className="absolute -left-[180px] top-0 space-y-2 flex flex-col items-end w-[160px]">
+      {incomingConnections.map((connection) => (
+        <Card
+          key={connection.id}
+          className="group flex items-center rounded-lg border bg-card p-2 shadow-sm transition-colors hover:bg-accent/50 cursor-grab w-fit"
+        >
+          <div className="text-sm">
+            <span className="font-medium leading-none">
+              {connection.name.replace(' ', '').toLowerCase()}
+            </span>
+            <span className="text-muted-foreground">
+              .{connection.outputType}
+            </span>
+          </div>
+        </Card>
+      ))}
+    </div>
+  )
+}

app/w/components/workflow-block/workflow-block.tsx

@@ -4,6 +4,7 @@ import { SubBlock } from './components/sub-block/sub-block'
 import { Handle, Position } from 'reactflow'
 import { cn } from '@/lib/utils'
 import { ActionBar } from './components/action-bar/action-bar'
+import { ConnectionBlock } from './components/connection-block/connection-block'
 
 interface WorkflowBlockProps {
   id: string
@@ -52,6 +53,7 @@ export function WorkflowBlock({
   return (
     <Card className="w-[320px] shadow-md select-none group relative [&:active]:cursor-grabbing cursor-grab">
       {selected && <ActionBar blockId={id} />}
+      <ConnectionBlock blockId={id} />
 
       <Handle
         type="target"

app/w/hooks/use-block-connections.ts

@@ -0,0 +1,36 @@
+import { useWorkflowStore } from '@/stores/workflow/workflow-store'
+import { shallow } from 'zustand/shallow'
+
+export interface ConnectedBlock {
+  id: string
+  type: string
+  outputType: string
+  name: string
+}
+
+export function useBlockConnections(blockId: string) {
+  const { edges, blocks } = useWorkflowStore(
+    (state) => ({
+      edges: state.edges,
+      blocks: state.blocks
+    }),
+    shallow
+  )
+
+  const incomingConnections = edges
+    .filter(edge => edge.target === blockId)
+    .map(edge => {
+      const sourceBlock = blocks[edge.source]
+      return {
+        id: sourceBlock.id,
+        type: sourceBlock.type,
+        outputType: sourceBlock.outputType,
+        name: sourceBlock.name,
+      }
+    })
+
+  return {
+    incomingConnections,
+    hasIncomingConnections: incomingConnections.length > 0
+  }
+}