diff --git a/apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx b/apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx
index 5d410761..b36dea20 100644
--- a/apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx
+++ b/apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx
@@ -128,116 +128,130 @@ export function AgentInfoPanel({
   // Agent Info Panel for non-backlog cards
   if (showAgentInfo && feature.status !== 'backlog' && agentInfo) {
     return (
-      <div className="mb-3 space-y-2 overflow-hidden">
-        {/* Model & Phase */}
-        <div className="flex items-center gap-2 text-[11px] flex-wrap">
-          <div className="flex items-center gap-1 text-[var(--status-info)]">
-            <Cpu className="w-3 h-3" />
-            <span className="font-medium">{formatModelName(feature.model ?? DEFAULT_MODEL)}</span>
-          </div>
-          {agentInfo.currentPhase && (
-            <div
-              className={cn(
-                'px-1.5 py-0.5 rounded-md text-[10px] font-medium',
-                agentInfo.currentPhase === 'planning' &&
-                  'bg-[var(--status-info-bg)] text-[var(--status-info)]',
-                agentInfo.currentPhase === 'action' &&
-                  'bg-[var(--status-warning-bg)] text-[var(--status-warning)]',
-                agentInfo.currentPhase === 'verification' &&
-                  'bg-[var(--status-success-bg)] text-[var(--status-success)]'
-              )}
-            >
-              {agentInfo.currentPhase}
+      <>
+        <div className="mb-3 space-y-2 overflow-hidden">
+          {/* Model & Phase */}
+          <div className="flex items-center gap-2 text-[11px] flex-wrap">
+            <div className="flex items-center gap-1 text-[var(--status-info)]">
+              <Cpu className="w-3 h-3" />
+              <span className="font-medium">{formatModelName(feature.model ?? DEFAULT_MODEL)}</span>
             </div>
-          )}
-        </div>
-
-        {/* Task List Progress */}
-        {agentInfo.todos.length > 0 && (
-          <div className="space-y-1">
-            <div className="flex items-center gap-1 text-[10px] text-muted-foreground/70">
-              <ListTodo className="w-3 h-3" />
-              <span>
-                {agentInfo.todos.filter((t) => t.status === 'completed').length}/
-                {agentInfo.todos.length} tasks
-              </span>
-            </div>
-            <div className="space-y-0.5 max-h-16 overflow-y-auto">
-              {agentInfo.todos.slice(0, 3).map((todo, idx) => (
-                <div key={idx} className="flex items-center gap-1.5 text-[10px]">
-                  {todo.status === 'completed' ? (
-                    <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)] shrink-0" />
-                  ) : todo.status === 'in_progress' ? (
-                    <Loader2 className="w-2.5 h-2.5 text-[var(--status-warning)] animate-spin shrink-0" />
-                  ) : (
-                    <Circle className="w-2.5 h-2.5 text-muted-foreground/50 shrink-0" />
-                  )}
-                  <span
-                    className={cn(
-                      'break-words hyphens-auto line-clamp-2 leading-relaxed',
-                      todo.status === 'completed' && 'text-muted-foreground/60 line-through',
-                      todo.status === 'in_progress' && 'text-[var(--status-warning)]',
-                      todo.status === 'pending' && 'text-muted-foreground/80'
-                    )}
-                  >
-                    {todo.content}
-                  </span>
-                </div>
-              ))}
-              {agentInfo.todos.length > 3 && (
-                <p className="text-[10px] text-muted-foreground/60 pl-4">
-                  +{agentInfo.todos.length - 3} more
-                </p>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Summary for waiting_approval and verified */}
-        {(feature.status === 'waiting_approval' || feature.status === 'verified') && (
-          <>
-            {(feature.summary || summary || agentInfo.summary) && (
-              <div className="space-y-1.5 pt-2 border-t border-border/30 overflow-hidden">
-                <div className="flex items-center justify-between gap-2">
-                  <div className="flex items-center gap-1 text-[10px] text-[var(--status-success)] min-w-0">
-                    <Sparkles className="w-3 h-3 shrink-0" />
-                    <span className="truncate font-medium">Summary</span>
-                  </div>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setIsSummaryDialogOpen(true);
-                    }}
-                    onPointerDown={(e) => e.stopPropagation()}
-                    className="p-0.5 rounded-md hover:bg-muted/80 transition-colors text-muted-foreground/60 hover:text-muted-foreground shrink-0"
-                    title="View full summary"
-                    data-testid={`expand-summary-${feature.id}`}
-                  >
-                    <Expand className="w-3 h-3" />
-                  </button>
-                </div>
-                <p className="text-[10px] text-muted-foreground/70 line-clamp-3 break-words hyphens-auto leading-relaxed overflow-hidden">
-                  {feature.summary || summary || agentInfo.summary}
-                </p>
+            {agentInfo.currentPhase && (
+              <div
+                className={cn(
+                  'px-1.5 py-0.5 rounded-md text-[10px] font-medium',
+                  agentInfo.currentPhase === 'planning' &&
+                    'bg-[var(--status-info-bg)] text-[var(--status-info)]',
+                  agentInfo.currentPhase === 'action' &&
+                    'bg-[var(--status-warning-bg)] text-[var(--status-warning)]',
+                  agentInfo.currentPhase === 'verification' &&
+                    'bg-[var(--status-success-bg)] text-[var(--status-success)]'
+                )}
+              >
+                {agentInfo.currentPhase}
               </div>
             )}
-            {!feature.summary && !summary && !agentInfo.summary && agentInfo.toolCallCount > 0 && (
-              <div className="flex items-center gap-2 text-[10px] text-muted-foreground/60 pt-2 border-t border-border/30">
-                <span className="flex items-center gap-1">
-                  <Wrench className="w-2.5 h-2.5" />
-                  {agentInfo.toolCallCount} tool calls
+          </div>
+
+          {/* Task List Progress */}
+          {agentInfo.todos.length > 0 && (
+            <div className="space-y-1">
+              <div className="flex items-center gap-1 text-[10px] text-muted-foreground/70">
+                <ListTodo className="w-3 h-3" />
+                <span>
+                  {agentInfo.todos.filter((t) => t.status === 'completed').length}/
+                  {agentInfo.todos.length} tasks
                 </span>
-                {agentInfo.todos.length > 0 && (
-                  <span className="flex items-center gap-1">
-                    <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)]" />
-                    {agentInfo.todos.filter((t) => t.status === 'completed').length} tasks done
-                  </span>
+              </div>
+              <div className="space-y-0.5 max-h-16 overflow-y-auto">
+                {agentInfo.todos.slice(0, 3).map((todo, idx) => (
+                  <div key={idx} className="flex items-center gap-1.5 text-[10px]">
+                    {todo.status === 'completed' ? (
+                      <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)] shrink-0" />
+                    ) : todo.status === 'in_progress' ? (
+                      <Loader2 className="w-2.5 h-2.5 text-[var(--status-warning)] animate-spin shrink-0" />
+                    ) : (
+                      <Circle className="w-2.5 h-2.5 text-muted-foreground/50 shrink-0" />
+                    )}
+                    <span
+                      className={cn(
+                        'break-words hyphens-auto line-clamp-2 leading-relaxed',
+                        todo.status === 'completed' && 'text-muted-foreground/60 line-through',
+                        todo.status === 'in_progress' && 'text-[var(--status-warning)]',
+                        todo.status === 'pending' && 'text-muted-foreground/80'
+                      )}
+                    >
+                      {todo.content}
+                    </span>
+                  </div>
+                ))}
+                {agentInfo.todos.length > 3 && (
+                  <p className="text-[10px] text-muted-foreground/60 pl-4">
+                    +{agentInfo.todos.length - 3} more
+                  </p>
                 )}
               </div>
-            )}
-          </>
-        )}
-      </div>
+            </div>
+          )}
+
+          {/* Summary for waiting_approval and verified */}
+          {(feature.status === 'waiting_approval' || feature.status === 'verified') && (
+            <>
+              {(feature.summary || summary || agentInfo.summary) && (
+                <div className="space-y-1.5 pt-2 border-t border-border/30 overflow-hidden">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-1 text-[10px] text-[var(--status-success)] min-w-0">
+                      <Sparkles className="w-3 h-3 shrink-0" />
+                      <span className="truncate font-medium">Summary</span>
+                    </div>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setIsSummaryDialogOpen(true);
+                      }}
+                      onPointerDown={(e) => e.stopPropagation()}
+                      onMouseDown={(e) => e.stopPropagation()}
+                      className="p-0.5 rounded-md hover:bg-muted/80 transition-colors text-muted-foreground/60 hover:text-muted-foreground shrink-0"
+                      title="View full summary"
+                      data-testid={`expand-summary-${feature.id}`}
+                    >
+                      <Expand className="w-3 h-3" />
+                    </button>
+                  </div>
+                  <p className="text-[10px] text-muted-foreground/70 line-clamp-3 break-words hyphens-auto leading-relaxed overflow-hidden">
+                    {feature.summary || summary || agentInfo.summary}
+                  </p>
+                </div>
+              )}
+              {!feature.summary &&
+                !summary &&
+                !agentInfo.summary &&
+                agentInfo.toolCallCount > 0 && (
+                  <div className="flex items-center gap-2 text-[10px] text-muted-foreground/60 pt-2 border-t border-border/30">
+                    <span className="flex items-center gap-1">
+                      <Wrench className="w-2.5 h-2.5" />
+                      {agentInfo.toolCallCount} tool calls
+                    </span>
+                    {agentInfo.todos.length > 0 && (
+                      <span className="flex items-center gap-1">
+                        <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)]" />
+                        {agentInfo.todos.filter((t) => t.status === 'completed').length} tasks done
+                      </span>
+                    )}
+                  </div>
+                )}
+            </>
+          )}
+        </div>
+        {/* SummaryDialog must be rendered alongside the expand button */}
+        <SummaryDialog
+          feature={feature}
+          agentInfo={agentInfo}
+          summary={summary}
+          isOpen={isSummaryDialogOpen}
+          onOpenChange={setIsSummaryDialogOpen}
+        />
+      </>
     );
   }