feat: add thorough verification process and enhance agent output modal

- Introduced a new markdown file outlining a mandatory 3-pass verification process for code completion, focusing on correctness, edge cases, and maintainability.
- Updated the AgentInfoPanel to display a todo list for non-backlog features, ensuring users can see the agent's current tasks.
- Enhanced the AgentOutputModal to support a summary view, extracting and displaying summary content from raw log output.
- Improved the log parser to extract summaries from various formats, enhancing the overall user experience and information accessibility.

apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useMemo } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -6,12 +6,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { Loader2, List, FileText, GitBranch } from 'lucide-react';
+import { Loader2, List, FileText, GitBranch, ClipboardList } from 'lucide-react';
 import { getElectronAPI } from '@/lib/electron';
 import { LogViewer } from '@/components/ui/log-viewer';
 import { GitDiffPanel } from '@/components/ui/git-diff-panel';
 import { TaskProgressPanel } from '@/components/ui/task-progress-panel';
+import { Markdown } from '@/components/ui/markdown';
 import { useAppStore } from '@/store/app-store';
+import { extractSummary } from '@/lib/log-parser';
 import type { AutoModeEvent } from '@/types/electron';
 
 interface AgentOutputModalProps {
@@ -27,7 +29,7 @@ interface AgentOutputModalProps {
   projectPath?: string;
 }
 
-type ViewMode = 'parsed' | 'raw' | 'changes';
+type ViewMode = 'summary' | 'parsed' | 'raw' | 'changes';
 
 export function AgentOutputModal({
   open,
@@ -40,8 +42,14 @@ export function AgentOutputModal({
 }: AgentOutputModalProps) {
   const [output, setOutput] = useState<string>('');
   const [isLoading, setIsLoading] = useState(true);
-  const [viewMode, setViewMode] = useState<ViewMode>('parsed');
+  const [viewMode, setViewMode] = useState<ViewMode | null>(null);
   const [projectPath, setProjectPath] = useState<string>('');
+
+  // Extract summary from output
+  const summary = useMemo(() => extractSummary(output), [output]);
+
+  // Determine the effective view mode - default to summary if available, otherwise parsed
+  const effectiveViewMode = viewMode ?? (summary ? 'summary' : 'parsed');
   const scrollRef = useRef<HTMLDivElement>(null);
   const autoScrollRef = useRef(true);
   const projectPathRef = useRef<string>('');
@@ -299,8 +307,8 @@ export function AgentOutputModal({
         className="w-[60vw] max-w-[60vw] max-h-[80vh] flex flex-col"
         data-testid="agent-output-modal"
       >
-        <DialogHeader className="flex-shrink-0">
-          <div className="flex items-center justify-between">
+        <DialogHeader className="shrink-0">
+          <div className="flex items-center justify-between pr-8">
             <DialogTitle className="flex items-center gap-2">
               {featureStatus !== 'verified' && featureStatus !== 'waiting_approval' && (
                 <Loader2 className="w-5 h-5 text-primary animate-spin" />
@@ -308,10 +316,24 @@ export function AgentOutputModal({
               Agent Output
             </DialogTitle>
             <div className="flex items-center gap-1 bg-muted rounded-lg p-1">
+              {summary && (
+                <button
+                  onClick={() => setViewMode('summary')}
+                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                    effectiveViewMode === 'summary'
+                      ? 'bg-primary/20 text-primary shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                  }`}
+                  data-testid="view-mode-summary"
+                >
+                  <ClipboardList className="w-3.5 h-3.5" />
+                  Summary
+                </button>
+              )}
               <button
                 onClick={() => setViewMode('parsed')}
                 className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
-                  viewMode === 'parsed'
+                  effectiveViewMode === 'parsed'
                     ? 'bg-primary/20 text-primary shadow-sm'
                     : 'text-muted-foreground hover:text-foreground hover:bg-accent'
                 }`}
@@ -323,7 +345,7 @@ export function AgentOutputModal({
               <button
                 onClick={() => setViewMode('changes')}
                 className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
-                  viewMode === 'changes'
+                  effectiveViewMode === 'changes'
                     ? 'bg-primary/20 text-primary shadow-sm'
                     : 'text-muted-foreground hover:text-foreground hover:bg-accent'
                 }`}
@@ -335,7 +357,7 @@ export function AgentOutputModal({
               <button
                 onClick={() => setViewMode('raw')}
                 className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
-                  viewMode === 'raw'
+                  effectiveViewMode === 'raw'
                     ? 'bg-primary/20 text-primary shadow-sm'
                     : 'text-muted-foreground hover:text-foreground hover:bg-accent'
                 }`}
@@ -361,7 +383,7 @@ export function AgentOutputModal({
           className="flex-shrink-0 mx-1"
         />
 
-        {viewMode === 'changes' ? (
+        {effectiveViewMode === 'changes' ? (
           <div className="flex-1 min-h-[400px] max-h-[60vh] overflow-y-auto scrollbar-visible">
             {projectPath ? (
               <GitDiffPanel
@@ -378,6 +400,10 @@ export function AgentOutputModal({
               </div>
             )}
           </div>
+        ) : effectiveViewMode === 'summary' && summary ? (
+          <div className="flex-1 overflow-y-auto bg-zinc-950 rounded-lg p-4 min-h-[400px] max-h-[60vh] scrollbar-visible">
+            <Markdown>{summary}</Markdown>
+          </div>
         ) : (
           <>
             <div
@@ -394,7 +420,7 @@ export function AgentOutputModal({
                 <div className="flex items-center justify-center h-full text-muted-foreground">
                   No output yet. The agent will stream output here as it works.
                 </div>
-              ) : viewMode === 'parsed' ? (
+              ) : effectiveViewMode === 'parsed' ? (
                 <LogViewer output={output} />
               ) : (
                 <div className="whitespace-pre-wrap break-words text-zinc-300">{output}</div>