@hellcoder/companion 0.104.0 → 0.104.1-preview.20260618071210.8af1867

package/dist/assets/{Playground-C81-16ZL.js → Playground-D8ylR37H.js}

@@ -1,4 +1,4 @@
-import{r as u,j as e,u as j,n as me,b as xe,P as f,C as pe,A as J,M as v,T as w,G as M,L as Y,D as P,S as L,c as B,d as U,e as Q,f as X,h as ue,k as he,l as ge,U as be,m as fe,o as se,p as te,a as je,q as ve,v as _,w as we}from"./index-BJ2PBRfv.js";const Ne=new Set(["pulling_image","running_init_script","building_image"]);function A({steps:t,error:c}){const[n,i]=u.useState({}),[r,x]=u.useState(new Set),l=u.useRef(new Map),h=u.useCallback(o=>m=>{m?l.current.set(o,m):l.current.delete(o)},[]);return u.useEffect(()=>{for(const o of t)o.detail&&Ne.has(o.step)&&(i(m=>{const a=m[o.step]||[];return a.length===0||a[a.length-1]!==o.detail?{...m,[o.step]:[...a,o.detail]}:m}),x(m=>{if(m.has(o.step))return m;const a=new Set(m);return a.add(o.step),a}))},[t]),u.useEffect(()=>{var o;for(const m of l.current.values())(o=m.scrollTo)==null||o.call(m,{top:m.scrollHeight})},[n]),t.length===0?null:e.jsxs("div",{className:"w-full max-w-md mx-auto mt-4 mb-2",children:[e.jsx("div",{className:"space-y-1.5",children:t.map(o=>{const m=n[o.step],a=m&&m.length>0,y=r.has(o.step);return e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2.5 py-1",children:[e.jsxs("div",{className:"w-4 h-4 flex items-center justify-center shrink-0",children:[o.status==="in_progress"&&e.jsx("span",{className:"w-3.5 h-3.5 border-2 border-cc-primary/30 border-t-cc-primary rounded-full animate-spin"}),o.status==="done"&&e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-3.5 h-3.5 text-cc-success",children:e.jsx("path",{d:"M13.25 4.75L6 12 2.75 8.75",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),o.status==="error"&&e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-3.5 h-3.5 text-cc-error",children:e.jsx("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})]}),e.jsx("span",{className:`text-sm flex-1 ${o.status==="in_progress"?"text-cc-fg font-medium":o.status==="done"?"text-cc-muted":"text-cc-error"}`,children:o.label}),a&&e.jsx("button",{onClick:()=>x(N=>{const p=new Set(N);return p.has(o.step)?p.delete(o.step):p.add(o.step),p}),className:"text-[10px] text-cc-muted hover:text-cc-fg transition-colors cursor-pointer",children:y?"Hide logs":"Show logs"})]}),a&&y&&e.jsx("pre",{ref:h(o.step),className:"ml-[26px] mt-1 mb-1 px-3 py-2 text-[10px] font-mono-code bg-black/20 border border-cc-border rounded-md text-cc-muted max-h-[150px] overflow-auto whitespace-pre-wrap",children:m.slice(-30).join(`
+import{r as u,j as e,u as v,n as me,b as xe,P as j,C as pe,A as J,M as f,T as w,G as M,L as Y,D as P,S as L,c as U,d as B,e as Q,f as X,h as ue,k as he,l as ge,U as be,m as fe,o as se,p as te,a as je,q as ve,v as _,w as we}from"./index-DVj8r0rF.js";const Ne=new Set(["pulling_image","running_init_script","building_image"]);function A({steps:t,error:c}){const[n,i]=u.useState({}),[r,x]=u.useState(new Set),l=u.useRef(new Map),h=u.useCallback(o=>m=>{m?l.current.set(o,m):l.current.delete(o)},[]);return u.useEffect(()=>{for(const o of t)o.detail&&Ne.has(o.step)&&(i(m=>{const a=m[o.step]||[];return a.length===0||a[a.length-1]!==o.detail?{...m,[o.step]:[...a,o.detail]}:m}),x(m=>{if(m.has(o.step))return m;const a=new Set(m);return a.add(o.step),a}))},[t]),u.useEffect(()=>{var o;for(const m of l.current.values())(o=m.scrollTo)==null||o.call(m,{top:m.scrollHeight})},[n]),t.length===0?null:e.jsxs("div",{className:"w-full max-w-md mx-auto mt-4 mb-2",children:[e.jsx("div",{className:"space-y-1.5",children:t.map(o=>{const m=n[o.step],a=m&&m.length>0,y=r.has(o.step);return e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2.5 py-1",children:[e.jsxs("div",{className:"w-4 h-4 flex items-center justify-center shrink-0",children:[o.status==="in_progress"&&e.jsx("span",{className:"w-3.5 h-3.5 border-2 border-cc-primary/30 border-t-cc-primary rounded-full animate-spin"}),o.status==="done"&&e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-3.5 h-3.5 text-cc-success",children:e.jsx("path",{d:"M13.25 4.75L6 12 2.75 8.75",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),o.status==="error"&&e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-3.5 h-3.5 text-cc-error",children:e.jsx("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})]}),e.jsx("span",{className:`text-sm flex-1 ${o.status==="in_progress"?"text-cc-fg font-medium":o.status==="done"?"text-cc-muted":"text-cc-error"}`,children:o.label}),a&&e.jsx("button",{onClick:()=>x(N=>{const p=new Set(N);return p.has(o.step)?p.delete(o.step):p.add(o.step),p}),className:"text-[10px] text-cc-muted hover:text-cc-fg transition-colors cursor-pointer",children:y?"Hide logs":"Show logs"})]}),a&&y&&e.jsx("pre",{ref:h(o.step),className:"ml-[26px] mt-1 mb-1 px-3 py-2 text-[10px] font-mono-code bg-black/20 border border-cc-border rounded-md text-cc-muted max-h-[150px] overflow-auto whitespace-pre-wrap",children:m.slice(-30).join(`
 `)})]},o.step)})}),c&&e.jsx("div",{className:"mt-2.5 px-3 py-2 rounded-lg bg-cc-error/5 border border-cc-error/20",children:e.jsx("p",{className:"text-xs text-cc-error whitespace-pre-wrap",children:c})})]})}const b="playground-session";function g(t){return{request_id:`perm-${Math.random().toString(36).slice(2,8)}`,tool_use_id:`tu-${Math.random().toString(36).slice(2,8)}`,timestamp:Date.now(),...t}}const ne=g({tool_name:"Bash",input:{command:"git log --oneline -20 && npm run build",description:"View recent commits and build the project"},permission_suggestions:[{type:"addRules",rules:[{toolName:"Bash",ruleContent:"git log --oneline -20 && npm run build"}],behavior:"allow",destination:"session"},{type:"addRules",rules:[{toolName:"Bash",ruleContent:"git log --oneline -20 && npm run build"}],behavior:"allow",destination:"projectSettings"}]}),ye=g({tool_name:"Edit",input:{file_path:"/Users/stan/Dev/project/src/utils/format.ts",old_string:`export function formatDate(d: Date) {
   return d.toISOString();
 }`,new_string:`export function formatDate(d: Date, locale = "en-US") {
@@ -52,7 +52,7 @@ src/auth/session.ts`},{type:"tool_use",id:"tu-2",name:"Read",input:{file_path:"s
     return res.status(401).json({ error: "Unauthorized" });
   }
   next();
-}`},{type:"text",text:"Now I understand the current structure. Let me create the JWT utility."}],timestamp:Date.now()-45e3},Be={id:"msg-5",role:"assistant",content:"",contentBlocks:[{type:"thinking",thinking:`Let me think about the best approach here. The user wants to migrate from session cookies to JWT. I need to:
+}`},{type:"text",text:"Now I understand the current structure. Let me create the JWT utility."}],timestamp:Date.now()-45e3},Ue={id:"msg-5",role:"assistant",content:"",contentBlocks:[{type:"thinking",thinking:`Let me think about the best approach here. The user wants to migrate from session cookies to JWT. I need to:
 1. Create a JWT sign/verify utility
 2. Update the middleware to read Authorization header
 3. Change the login endpoint to return a token
@@ -60,15 +60,15 @@ src/auth/session.ts`},{type:"tool_use",id:"tu-2",name:"Read",input:{file_path:"s
 
 I should use jsonwebtoken package for signing and jose for verification in edge environments. But since this is a Node.js server, jsonwebtoken is fine.
 
-The token should contain: userId, role, iat, exp. Expiry should be configurable. I'll also add a refresh token mechanism.`},{type:"text",text:"I've analyzed the codebase and have a clear plan. Let me start implementing."}],timestamp:Date.now()-4e4},Ue={id:"msg-streaming",role:"assistant",content:"Scanning auth files and drafting migration steps...",isStreaming:!0,timestamp:Date.now()-35e3},Oe={id:"msg-streaming-thinking",role:"assistant",content:"Let me analyze the codebase to understand the authentication architecture. I should look at the middleware, session store, and token validation...",isStreaming:!0,streamingPhase:"thinking",timestamp:Date.now()-34e3},Ge={id:"msg-6",role:"system",content:"Context compacted successfully",timestamp:Date.now()-3e4},oe={id:"msg-7",role:"assistant",content:"",contentBlocks:[{type:"text",text:"Let me try running the tests."},{type:"tool_use",id:"tu-3",name:"Bash",input:{command:"npm test -- --grep auth"}},{type:"tool_result",tool_use_id:"tu-3",content:`FAIL src/auth/__tests__/middleware.test.ts
+The token should contain: userId, role, iat, exp. Expiry should be configurable. I'll also add a refresh token mechanism.`},{type:"text",text:"I've analyzed the codebase and have a clear plan. Let me start implementing."}],timestamp:Date.now()-4e4},Be={id:"msg-streaming",role:"assistant",content:"Scanning auth files and drafting migration steps...",isStreaming:!0,timestamp:Date.now()-35e3},Oe={id:"msg-streaming-thinking",role:"assistant",content:"Let me analyze the codebase to understand the authentication architecture. I should look at the middleware, session store, and token validation...",isStreaming:!0,streamingPhase:"thinking",timestamp:Date.now()-34e3},Ge={id:"msg-streaming-empty",role:"assistant",content:"",isStreaming:!0,timestamp:Date.now()-33e3},We={id:"msg-meta-interrupted",role:"system",content:"Response interrupted — the backend disconnected before finishing. Trying to reconnect…",meta:!0,metaCode:"interrupted_mid_stream",timestamp:Date.now()-3e4},Ve={id:"msg-6",role:"system",content:"Context compacted successfully",timestamp:Date.now()-3e4},oe={id:"msg-7",role:"assistant",content:"",contentBlocks:[{type:"text",text:"Let me try running the tests."},{type:"tool_use",id:"tu-3",name:"Bash",input:{command:"npm test -- --grep auth"}},{type:"tool_result",tool_use_id:"tu-3",content:`FAIL src/auth/__tests__/middleware.test.ts
   ● Auth Middleware › should reject expired tokens
     Expected: 401
     Received: 500
 
-    TypeError: Cannot read property 'verify' of undefined`,is_error:!0},{type:"text",text:"There's a test failure. Let me fix the issue."}],timestamp:Date.now()-2e4},le=[{id:"1",subject:"Create JWT utility module",description:"",status:"completed"},{id:"2",subject:"Update auth middleware",description:"",status:"completed",activeForm:"Updating auth middleware"},{id:"3",subject:"Migrate login endpoint",description:"",status:"in_progress",activeForm:"Refactoring login to return JWT"},{id:"4",subject:"Add refresh token support",description:"",status:"pending"},{id:"5",subject:"Update all auth tests",description:"",status:"pending",blockedBy:["3"]},{id:"6",subject:"Run full test suite and fix failures",description:"",status:"pending",blockedBy:["5"]}],We=[{id:"tg-1",name:"Read",input:{file_path:"src/auth/middleware.ts"}},{id:"tg-2",name:"Read",input:{file_path:"src/auth/login.ts"}},{id:"tg-3",name:"Read",input:{file_path:"src/auth/session.ts"}},{id:"tg-4",name:"Read",input:{file_path:"src/auth/types.ts"}}],Ve=[{id:"sa-1",name:"Grep",input:{pattern:"useAuth",path:"src/"}},{id:"sa-2",name:"Grep",input:{pattern:"session.userId",path:"src/"}}],ze=[{toolUseId:"ta-1",toolName:"Bash",preview:"bun run test",startedAt:Date.now()-7200,completedAt:Date.now()-400,elapsedSeconds:6.8,isError:!1},{toolUseId:"ta-2",toolName:"Read",preview:"src/ws.ts",startedAt:Date.now()-500,completedAt:Date.now()-400,elapsedSeconds:.1,isError:!1},{toolUseId:"ta-3",toolName:"Edit",preview:"src/ws.ts",startedAt:Date.now()-400,completedAt:Date.now()-100,elapsedSeconds:1.4,isError:!1}],Fe=[{toolUseId:"ta-4",toolName:"Bash",preview:"npm run build",startedAt:Date.now()-5e3,completedAt:Date.now()-1e3,elapsedSeconds:4,isError:!0},{toolUseId:"ta-5",toolName:"Read",preview:"package.json",startedAt:Date.now()-900,completedAt:Date.now()-800,elapsedSeconds:.1,isError:!1}],He=[{toolUseId:"ta-6",toolName:"Bash",preview:"bun run test",startedAt:Date.now()-3e3,elapsedSeconds:3,isError:!1},{toolUseId:"ta-7",toolName:"Grep",preview:"TODO",startedAt:Date.now()-1e3,completedAt:Date.now()-500,elapsedSeconds:.5,isError:!1}],$e={number:162,title:"feat: add dark mode toggle to application settings",url:"https://github.com/example/project/pull/162",state:"OPEN",isDraft:!1,reviewDecision:"CHANGES_REQUESTED",additions:91,deletions:88,changedFiles:24,checks:[{name:"CI / Build",status:"COMPLETED",conclusion:"SUCCESS"},{name:"CI / Test",status:"COMPLETED",conclusion:"FAILURE"},{name:"CI / Lint",status:"COMPLETED",conclusion:"SUCCESS"}],checksSummary:{total:3,success:2,failure:1,pending:0},reviewThreads:{total:4,resolved:2,unresolved:2}},qe={number:158,title:"fix: prevent mobile keyboard layout shift and iOS zoom",url:"https://github.com/example/project/pull/158",state:"OPEN",isDraft:!1,reviewDecision:"APPROVED",additions:42,deletions:12,changedFiles:3,checks:[{name:"CI / Build",status:"COMPLETED",conclusion:"SUCCESS"},{name:"CI / Test",status:"COMPLETED",conclusion:"SUCCESS"}],checksSummary:{total:2,success:2,failure:0,pending:0},reviewThreads:{total:1,resolved:1,unresolved:0}},Ke={number:165,title:"refactor: migrate auth module to JWT tokens with refresh support",url:"https://github.com/example/project/pull/165",state:"OPEN",isDraft:!0,reviewDecision:null,additions:340,deletions:156,changedFiles:18,checks:[{name:"CI / Build",status:"IN_PROGRESS",conclusion:null},{name:"CI / Test",status:"QUEUED",conclusion:null}],checksSummary:{total:2,success:0,failure:0,pending:2},reviewThreads:{total:0,resolved:0,unresolved:0}},Je={number:155,title:"feat(cli): add service install/uninstall and separate dev/prod ports",url:"https://github.com/example/project/pull/155",state:"MERGED",isDraft:!1,reviewDecision:"APPROVED",additions:287,deletions:63,changedFiles:11,checks:[{name:"CI / Build",status:"COMPLETED",conclusion:"SUCCESS"},{name:"CI / Test",status:"COMPLETED",conclusion:"SUCCESS"},{name:"CI / Lint",status:"COMPLETED",conclusion:"SUCCESS"}],checksSummary:{total:3,success:3,failure:0,pending:0},reviewThreads:{total:3,resolved:3,unresolved:0}},Ye=[{name:"filesystem",status:"connected",config:{type:"stdio",command:"npx",args:["-y","@anthropic/mcp-fs"]},scope:"project",tools:[{name:"read_file",annotations:{readOnly:!0}},{name:"write_file",annotations:{destructive:!0}},{name:"list_directory",annotations:{readOnly:!0}}]},{name:"github",status:"connected",config:{type:"stdio",command:"npx",args:["-y","@anthropic/mcp-github"]},scope:"user",tools:[{name:"create_issue"},{name:"list_prs",annotations:{readOnly:!0}},{name:"create_pr"}]},{name:"postgres",status:"failed",error:"Connection refused: ECONNREFUSED 127.0.0.1:5432",config:{type:"stdio",command:"npx",args:["-y","@anthropic/mcp-postgres"]},scope:"project",tools:[]},{name:"web-search",status:"disabled",config:{type:"sse",url:"http://localhost:8080/sse"},scope:"user",tools:[{name:"search",annotations:{readOnly:!0,openWorld:!0}}]},{name:"docker",status:"connecting",config:{type:"stdio",command:"docker-mcp-server"},scope:"project",tools:[]}],T={identifier:"THE-147",title:"Associer un ticket Linear a une session dans le panneau lateral droit",priorityLabel:"High",stateName:"In Progress",teamName:"Thevibecompany"},I={identifier:"ENG-256",title:"Fix authentication flow for SSO users",priorityLabel:"Urgent",stateName:"Done",teamName:"Engineering"},Qe=[{id:"c1",body:"Started working on the sidebar integration",createdAt:new Date(Date.now()-36e5).toISOString(),userName:"Alice"},{id:"c2",body:"Added the search component, LGTM",createdAt:new Date(Date.now()-18e5).toISOString(),userName:"Bob"},{id:"c3",body:"Testing the polling flow now",createdAt:new Date(Date.now()-3e5).toISOString(),userName:"Alice"}];function os(){const[t,c]=u.useState(()=>document.documentElement.classList.contains("dark"));return u.useEffect(()=>{document.documentElement.classList.toggle("dark",t)},[t]),u.useEffect(()=>{const n=j.getState(),i=j.getState(),r=b,x=i.sessions.get(r),l=i.messages.get(r),h=i.pendingPermissions.get(r),o=i.connectionStatus.get(r),m=i.cliConnected.get(r),a=i.sessionStatus.get(r),y=i.streaming.get(r),N=i.streamingStartedAt.get(r),p=i.streamingOutputTokens.get(r),D={session_id:r,backend_type:"claude",model:"claude-sonnet-4-5",cwd:"/Users/stan/Dev/project",tools:["Bash","Read","Edit","Write","Glob","Grep","WebSearch"],permissionMode:"default",claude_code_version:"1.0.0",mcp_servers:[],agents:[],slash_commands:["explain","review","fix"],skills:["doc-coauthoring","frontend-design"],total_cost_usd:.1847,num_turns:14,context_used_percent:62,is_compacting:!1,git_branch:"feat/jwt-auth",is_worktree:!1,is_containerized:!0,repo_root:"/Users/stan/Dev/project",git_ahead:3,git_behind:0,total_lines_added:142,total_lines_removed:38};n.addSession(D),n.setConnectionStatus(r,"connected"),n.setCliConnected(r,!0),n.setSessionStatus(r,"running");const ee="I'm updating tests and then I'll run the full suite.";return n.setMessages(r,[ae,ie,ce,oe,{id:"stream-draft",role:"assistant",content:ee,timestamp:Date.now(),isStreaming:!0}]),n.setStreaming(r,ee),n.setStreamingStats(r,{startedAt:Date.now()-12e3,outputTokens:1200}),n.addPermission(r,ne),n.addPermission(r,re),()=>{j.setState(k=>{const G=new Map(k.sessions),W=new Map(k.messages),V=new Map(k.pendingPermissions),z=new Map(k.connectionStatus),F=new Map(k.cliConnected),H=new Map(k.sessionStatus),$=new Map(k.streaming),q=new Map(k.streamingStartedAt),K=new Map(k.streamingOutputTokens);return x?G.set(r,x):G.delete(r),l?W.set(r,l):W.delete(r),h?V.set(r,h):V.delete(r),o?z.set(r,o):z.delete(r),typeof m=="boolean"?F.set(r,m):F.delete(r),a?H.set(r,a):H.delete(r),typeof y=="string"?$.set(r,y):$.delete(r),typeof N=="number"?q.set(r,N):q.delete(r),typeof p=="number"?K.set(r,p):K.delete(r),{sessions:G,messages:W,pendingPermissions:V,connectionStatus:z,cliConnected:F,sessionStatus:H,streaming:$,streamingStartedAt:q,streamingOutputTokens:K}})}},[]),e.jsxs("div",{className:"fixed inset-0 bg-cc-bg text-cc-fg font-sans-ui overflow-y-auto",children:[e.jsx("header",{className:"sticky top-0 z-50 bg-cc-sidebar border-b border-cc-border",children:e.jsxs("div",{className:"max-w-5xl mx-auto px-6 py-4 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-lg font-semibold text-cc-fg tracking-tight",children:"Component Playground"}),e.jsx("p",{className:"text-xs text-cc-muted mt-0.5",children:"Visual catalog of all UI components"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("button",{onClick:()=>{const n=j.getState().currentSessionId;n?me(n):xe()},className:"px-3 py-1.5 text-xs font-medium rounded-lg bg-cc-hover hover:bg-cc-active text-cc-fg border border-cc-border transition-colors cursor-pointer",children:"Back to App"}),e.jsx("button",{onClick:()=>c(!t),className:"px-3 py-1.5 text-xs font-medium rounded-lg bg-cc-primary/10 hover:bg-cc-primary/20 text-cc-primary border border-cc-primary/20 transition-colors cursor-pointer",children:t?"Light Mode":"Dark Mode"})]})]})}),e.jsxs("div",{className:"max-w-5xl mx-auto px-6 py-8 space-y-12",children:[e.jsx(d,{title:"Permission Banners",description:"Tool approval requests shown above the composer",children:e.jsxs("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card divide-y divide-cc-border",children:[e.jsx(f,{permission:ne,sessionId:b}),e.jsx(f,{permission:ye,sessionId:b}),e.jsx(f,{permission:ke,sessionId:b}),e.jsx(f,{permission:_e,sessionId:b}),e.jsx(f,{permission:Se,sessionId:b}),e.jsx(f,{permission:Ce,sessionId:b}),e.jsx(f,{permission:Ee,sessionId:b}),e.jsx(f,{permission:re,sessionId:b}),e.jsx(f,{permission:De,sessionId:b})]})}),e.jsx(d,{title:"Real Chat Stack",description:"Integrated ChatView using real MessageFeed + PermissionBanner + Composer components",children:e.jsx("div",{"data-testid":"playground-real-chat-stack",className:"max-w-3xl border border-cc-border rounded-xl overflow-hidden bg-cc-card h-[620px]",children:e.jsx(pe,{sessionId:b})})}),e.jsx(d,{title:"ExitPlanMode",description:"Plan approval request — previously rendered as raw JSON, now shows formatted markdown",children:e.jsx("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(f,{permission:Ae,sessionId:b})})}),e.jsx(d,{title:"AskUserQuestion",description:"Interactive questions with selectable options",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Single question",children:e.jsx(f,{permission:Me,sessionId:b})}),e.jsx(s,{label:"Multi-question",children:e.jsx(f,{permission:Pe,sessionId:b})})]})}),e.jsx(d,{title:"AI Validation",description:"AI-powered permission validation badges and recommendations",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Permission with AI recommendation (uncertain)",children:e.jsx(f,{permission:Re,sessionId:b})}),e.jsx(s,{label:"Permission with AI recommendation (safe)",children:e.jsx(f,{permission:Te,sessionId:b})}),e.jsx(s,{label:"Permission with AI recommendation (dangerous)",children:e.jsx(f,{permission:Ie,sessionId:b})}),e.jsx(s,{label:"Per-session toggle (disabled)",children:e.jsx(de,{enabled:!1})}),e.jsx(s,{label:"Per-session toggle (enabled)",children:e.jsx(de,{enabled:!0})}),e.jsx(s,{label:"Auto-resolved badge (with dismiss)",children:e.jsx("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(J,{entry:{request:g({tool_name:"Read",input:{file_path:"/src/index.ts"}}),behavior:"allow",reason:"Read is a read-only tool",timestamp:Date.now()},onDismiss:()=>alert("Dismissed!")})})}),e.jsx(s,{label:"Auto-resolved badge (denied, with dismiss)",children:e.jsx("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(J,{entry:{request:g({tool_name:"Bash",input:{command:"rm -rf /"}}),behavior:"deny",reason:"Recursive delete of root directory",timestamp:Date.now()},onDismiss:()=>alert("Dismissed!")})})}),e.jsx(s,{label:"Auto-resolved badge (no dismiss)",children:e.jsx("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(J,{entry:{request:g({tool_name:"Grep",input:{pattern:"TODO",path:"/src"}}),behavior:"allow",reason:"Grep is a read-only tool",timestamp:Date.now()}})})})]})}),e.jsx(d,{title:"Messages",description:"Chat message bubbles for all roles",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"User message",children:e.jsx(v,{message:ae})}),e.jsx(s,{label:"User message with image",children:e.jsx(v,{message:Le})}),e.jsx(s,{label:"Assistant message (markdown)",children:e.jsx(v,{message:ie})}),e.jsx(s,{label:"Assistant message (with tool calls)",children:e.jsx(v,{message:ce})}),e.jsx(s,{label:"Assistant message (streaming)",children:e.jsx(v,{message:Ue})}),e.jsx(s,{label:"Assistant message (streaming thinking phase)",children:e.jsx(v,{message:Oe})}),e.jsx(s,{label:"Assistant message (thinking block)",children:e.jsx(v,{message:Be})}),e.jsx(s,{label:"Tool result with error",children:e.jsx(v,{message:oe})}),e.jsx(s,{label:"System message",children:e.jsx(v,{message:Ge})})]})}),e.jsx(d,{title:"Tool Blocks",description:"Expandable tool call visualization",children:e.jsxs("div",{className:"space-y-2 max-w-3xl",children:[e.jsx(w,{name:"Bash",input:{command:"git status && npm run lint",description:"Check git status and lint"},toolUseId:"tb-1"}),e.jsx(w,{name:"Read",input:{file_path:"/Users/stan/Dev/project/src/index.ts",offset:10,limit:50},toolUseId:"tb-2"}),e.jsx(w,{name:"Edit",input:{file_path:"src/utils.ts",old_string:"const x = 1;",new_string:"const x = 2;",replace_all:!0},toolUseId:"tb-3"}),e.jsx(w,{name:"Edit",input:{file_path:"/Users/stan/Dev/project/src/store.ts",changes:[{path:"/Users/stan/Dev/project/src/store.ts",kind:"update"},{path:"/Users/stan/Dev/project/src/ws.ts",kind:"update"}]},toolUseId:"tb-3b"}),e.jsx(w,{name:"Write",input:{file_path:"src/new-file.ts",content:`export const hello = "world";
+    TypeError: Cannot read property 'verify' of undefined`,is_error:!0},{type:"text",text:"There's a test failure. Let me fix the issue."}],timestamp:Date.now()-2e4},le=[{id:"1",subject:"Create JWT utility module",description:"",status:"completed"},{id:"2",subject:"Update auth middleware",description:"",status:"completed",activeForm:"Updating auth middleware"},{id:"3",subject:"Migrate login endpoint",description:"",status:"in_progress",activeForm:"Refactoring login to return JWT"},{id:"4",subject:"Add refresh token support",description:"",status:"pending"},{id:"5",subject:"Update all auth tests",description:"",status:"pending",blockedBy:["3"]},{id:"6",subject:"Run full test suite and fix failures",description:"",status:"pending",blockedBy:["5"]}],ze=[{id:"tg-1",name:"Read",input:{file_path:"src/auth/middleware.ts"}},{id:"tg-2",name:"Read",input:{file_path:"src/auth/login.ts"}},{id:"tg-3",name:"Read",input:{file_path:"src/auth/session.ts"}},{id:"tg-4",name:"Read",input:{file_path:"src/auth/types.ts"}}],Fe=[{id:"sa-1",name:"Grep",input:{pattern:"useAuth",path:"src/"}},{id:"sa-2",name:"Grep",input:{pattern:"session.userId",path:"src/"}}],He=[{toolUseId:"ta-1",toolName:"Bash",preview:"bun run test",startedAt:Date.now()-7200,completedAt:Date.now()-400,elapsedSeconds:6.8,isError:!1},{toolUseId:"ta-2",toolName:"Read",preview:"src/ws.ts",startedAt:Date.now()-500,completedAt:Date.now()-400,elapsedSeconds:.1,isError:!1},{toolUseId:"ta-3",toolName:"Edit",preview:"src/ws.ts",startedAt:Date.now()-400,completedAt:Date.now()-100,elapsedSeconds:1.4,isError:!1}],$e=[{toolUseId:"ta-4",toolName:"Bash",preview:"npm run build",startedAt:Date.now()-5e3,completedAt:Date.now()-1e3,elapsedSeconds:4,isError:!0},{toolUseId:"ta-5",toolName:"Read",preview:"package.json",startedAt:Date.now()-900,completedAt:Date.now()-800,elapsedSeconds:.1,isError:!1}],qe=[{toolUseId:"ta-6",toolName:"Bash",preview:"bun run test",startedAt:Date.now()-3e3,elapsedSeconds:3,isError:!1},{toolUseId:"ta-7",toolName:"Grep",preview:"TODO",startedAt:Date.now()-1e3,completedAt:Date.now()-500,elapsedSeconds:.5,isError:!1}],Ke={number:162,title:"feat: add dark mode toggle to application settings",url:"https://github.com/example/project/pull/162",state:"OPEN",isDraft:!1,reviewDecision:"CHANGES_REQUESTED",additions:91,deletions:88,changedFiles:24,checks:[{name:"CI / Build",status:"COMPLETED",conclusion:"SUCCESS"},{name:"CI / Test",status:"COMPLETED",conclusion:"FAILURE"},{name:"CI / Lint",status:"COMPLETED",conclusion:"SUCCESS"}],checksSummary:{total:3,success:2,failure:1,pending:0},reviewThreads:{total:4,resolved:2,unresolved:2}},Je={number:158,title:"fix: prevent mobile keyboard layout shift and iOS zoom",url:"https://github.com/example/project/pull/158",state:"OPEN",isDraft:!1,reviewDecision:"APPROVED",additions:42,deletions:12,changedFiles:3,checks:[{name:"CI / Build",status:"COMPLETED",conclusion:"SUCCESS"},{name:"CI / Test",status:"COMPLETED",conclusion:"SUCCESS"}],checksSummary:{total:2,success:2,failure:0,pending:0},reviewThreads:{total:1,resolved:1,unresolved:0}},Ye={number:165,title:"refactor: migrate auth module to JWT tokens with refresh support",url:"https://github.com/example/project/pull/165",state:"OPEN",isDraft:!0,reviewDecision:null,additions:340,deletions:156,changedFiles:18,checks:[{name:"CI / Build",status:"IN_PROGRESS",conclusion:null},{name:"CI / Test",status:"QUEUED",conclusion:null}],checksSummary:{total:2,success:0,failure:0,pending:2},reviewThreads:{total:0,resolved:0,unresolved:0}},Qe={number:155,title:"feat(cli): add service install/uninstall and separate dev/prod ports",url:"https://github.com/example/project/pull/155",state:"MERGED",isDraft:!1,reviewDecision:"APPROVED",additions:287,deletions:63,changedFiles:11,checks:[{name:"CI / Build",status:"COMPLETED",conclusion:"SUCCESS"},{name:"CI / Test",status:"COMPLETED",conclusion:"SUCCESS"},{name:"CI / Lint",status:"COMPLETED",conclusion:"SUCCESS"}],checksSummary:{total:3,success:3,failure:0,pending:0},reviewThreads:{total:3,resolved:3,unresolved:0}},Xe=[{name:"filesystem",status:"connected",config:{type:"stdio",command:"npx",args:["-y","@anthropic/mcp-fs"]},scope:"project",tools:[{name:"read_file",annotations:{readOnly:!0}},{name:"write_file",annotations:{destructive:!0}},{name:"list_directory",annotations:{readOnly:!0}}]},{name:"github",status:"connected",config:{type:"stdio",command:"npx",args:["-y","@anthropic/mcp-github"]},scope:"user",tools:[{name:"create_issue"},{name:"list_prs",annotations:{readOnly:!0}},{name:"create_pr"}]},{name:"postgres",status:"failed",error:"Connection refused: ECONNREFUSED 127.0.0.1:5432",config:{type:"stdio",command:"npx",args:["-y","@anthropic/mcp-postgres"]},scope:"project",tools:[]},{name:"web-search",status:"disabled",config:{type:"sse",url:"http://localhost:8080/sse"},scope:"user",tools:[{name:"search",annotations:{readOnly:!0,openWorld:!0}}]},{name:"docker",status:"connecting",config:{type:"stdio",command:"docker-mcp-server"},scope:"project",tools:[]}],T={identifier:"THE-147",title:"Associer un ticket Linear a une session dans le panneau lateral droit",priorityLabel:"High",stateName:"In Progress",teamName:"Thevibecompany"},I={identifier:"ENG-256",title:"Fix authentication flow for SSO users",priorityLabel:"Urgent",stateName:"Done",teamName:"Engineering"},Ze=[{id:"c1",body:"Started working on the sidebar integration",createdAt:new Date(Date.now()-36e5).toISOString(),userName:"Alice"},{id:"c2",body:"Added the search component, LGTM",createdAt:new Date(Date.now()-18e5).toISOString(),userName:"Bob"},{id:"c3",body:"Testing the polling flow now",createdAt:new Date(Date.now()-3e5).toISOString(),userName:"Alice"}];function ds(){const[t,c]=u.useState(()=>document.documentElement.classList.contains("dark"));return u.useEffect(()=>{document.documentElement.classList.toggle("dark",t)},[t]),u.useEffect(()=>{const n=v.getState(),i=v.getState(),r=b,x=i.sessions.get(r),l=i.messages.get(r),h=i.pendingPermissions.get(r),o=i.connectionStatus.get(r),m=i.cliConnected.get(r),a=i.sessionStatus.get(r),y=i.streaming.get(r),N=i.streamingStartedAt.get(r),p=i.streamingOutputTokens.get(r),D={session_id:r,backend_type:"claude",model:"claude-sonnet-4-5",cwd:"/Users/stan/Dev/project",tools:["Bash","Read","Edit","Write","Glob","Grep","WebSearch"],permissionMode:"default",claude_code_version:"1.0.0",mcp_servers:[],agents:[],slash_commands:["explain","review","fix"],skills:["doc-coauthoring","frontend-design"],total_cost_usd:.1847,num_turns:14,context_used_percent:62,is_compacting:!1,git_branch:"feat/jwt-auth",is_worktree:!1,is_containerized:!0,repo_root:"/Users/stan/Dev/project",git_ahead:3,git_behind:0,total_lines_added:142,total_lines_removed:38};n.addSession(D),n.setConnectionStatus(r,"connected"),n.setCliConnected(r,!0),n.setSessionStatus(r,"running");const ee="I'm updating tests and then I'll run the full suite.";return n.setMessages(r,[ae,ie,ce,oe,{id:"stream-draft",role:"assistant",content:ee,timestamp:Date.now(),isStreaming:!0}]),n.setStreaming(r,ee),n.setStreamingStats(r,{startedAt:Date.now()-12e3,outputTokens:1200}),n.addPermission(r,ne),n.addPermission(r,re),()=>{v.setState(k=>{const G=new Map(k.sessions),W=new Map(k.messages),V=new Map(k.pendingPermissions),z=new Map(k.connectionStatus),F=new Map(k.cliConnected),H=new Map(k.sessionStatus),$=new Map(k.streaming),q=new Map(k.streamingStartedAt),K=new Map(k.streamingOutputTokens);return x?G.set(r,x):G.delete(r),l?W.set(r,l):W.delete(r),h?V.set(r,h):V.delete(r),o?z.set(r,o):z.delete(r),typeof m=="boolean"?F.set(r,m):F.delete(r),a?H.set(r,a):H.delete(r),typeof y=="string"?$.set(r,y):$.delete(r),typeof N=="number"?q.set(r,N):q.delete(r),typeof p=="number"?K.set(r,p):K.delete(r),{sessions:G,messages:W,pendingPermissions:V,connectionStatus:z,cliConnected:F,sessionStatus:H,streaming:$,streamingStartedAt:q,streamingOutputTokens:K}})}},[]),e.jsxs("div",{className:"fixed inset-0 bg-cc-bg text-cc-fg font-sans-ui overflow-y-auto",children:[e.jsx("header",{className:"sticky top-0 z-50 bg-cc-sidebar border-b border-cc-border",children:e.jsxs("div",{className:"max-w-5xl mx-auto px-6 py-4 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-lg font-semibold text-cc-fg tracking-tight",children:"Component Playground"}),e.jsx("p",{className:"text-xs text-cc-muted mt-0.5",children:"Visual catalog of all UI components"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("button",{onClick:()=>{const n=v.getState().currentSessionId;n?me(n):xe()},className:"px-3 py-1.5 text-xs font-medium rounded-lg bg-cc-hover hover:bg-cc-active text-cc-fg border border-cc-border transition-colors cursor-pointer",children:"Back to App"}),e.jsx("button",{onClick:()=>c(!t),className:"px-3 py-1.5 text-xs font-medium rounded-lg bg-cc-primary/10 hover:bg-cc-primary/20 text-cc-primary border border-cc-primary/20 transition-colors cursor-pointer",children:t?"Light Mode":"Dark Mode"})]})]})}),e.jsxs("div",{className:"max-w-5xl mx-auto px-6 py-8 space-y-12",children:[e.jsx(d,{title:"Permission Banners",description:"Tool approval requests shown above the composer",children:e.jsxs("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card divide-y divide-cc-border",children:[e.jsx(j,{permission:ne,sessionId:b}),e.jsx(j,{permission:ye,sessionId:b}),e.jsx(j,{permission:ke,sessionId:b}),e.jsx(j,{permission:_e,sessionId:b}),e.jsx(j,{permission:Se,sessionId:b}),e.jsx(j,{permission:Ce,sessionId:b}),e.jsx(j,{permission:Ee,sessionId:b}),e.jsx(j,{permission:re,sessionId:b}),e.jsx(j,{permission:De,sessionId:b})]})}),e.jsx(d,{title:"Real Chat Stack",description:"Integrated ChatView using real MessageFeed + PermissionBanner + Composer components",children:e.jsx("div",{"data-testid":"playground-real-chat-stack",className:"max-w-3xl border border-cc-border rounded-xl overflow-hidden bg-cc-card h-[620px]",children:e.jsx(pe,{sessionId:b})})}),e.jsx(d,{title:"ExitPlanMode",description:"Plan approval request — previously rendered as raw JSON, now shows formatted markdown",children:e.jsx("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(j,{permission:Ae,sessionId:b})})}),e.jsx(d,{title:"AskUserQuestion",description:"Interactive questions with selectable options",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Single question",children:e.jsx(j,{permission:Me,sessionId:b})}),e.jsx(s,{label:"Multi-question",children:e.jsx(j,{permission:Pe,sessionId:b})})]})}),e.jsx(d,{title:"AI Validation",description:"AI-powered permission validation badges and recommendations",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Permission with AI recommendation (uncertain)",children:e.jsx(j,{permission:Re,sessionId:b})}),e.jsx(s,{label:"Permission with AI recommendation (safe)",children:e.jsx(j,{permission:Te,sessionId:b})}),e.jsx(s,{label:"Permission with AI recommendation (dangerous)",children:e.jsx(j,{permission:Ie,sessionId:b})}),e.jsx(s,{label:"Per-session toggle (disabled)",children:e.jsx(de,{enabled:!1})}),e.jsx(s,{label:"Per-session toggle (enabled)",children:e.jsx(de,{enabled:!0})}),e.jsx(s,{label:"Auto-resolved badge (with dismiss)",children:e.jsx("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(J,{entry:{request:g({tool_name:"Read",input:{file_path:"/src/index.ts"}}),behavior:"allow",reason:"Read is a read-only tool",timestamp:Date.now()},onDismiss:()=>alert("Dismissed!")})})}),e.jsx(s,{label:"Auto-resolved badge (denied, with dismiss)",children:e.jsx("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(J,{entry:{request:g({tool_name:"Bash",input:{command:"rm -rf /"}}),behavior:"deny",reason:"Recursive delete of root directory",timestamp:Date.now()},onDismiss:()=>alert("Dismissed!")})})}),e.jsx(s,{label:"Auto-resolved badge (no dismiss)",children:e.jsx("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(J,{entry:{request:g({tool_name:"Grep",input:{pattern:"TODO",path:"/src"}}),behavior:"allow",reason:"Grep is a read-only tool",timestamp:Date.now()}})})})]})}),e.jsx(d,{title:"Messages",description:"Chat message bubbles for all roles",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"User message",children:e.jsx(f,{message:ae})}),e.jsx(s,{label:"User message with image",children:e.jsx(f,{message:Le})}),e.jsx(s,{label:"Assistant message (markdown)",children:e.jsx(f,{message:ie})}),e.jsx(s,{label:"Assistant message (with tool calls)",children:e.jsx(f,{message:ce})}),e.jsx(s,{label:"Assistant message (streaming)",children:e.jsx(f,{message:Be})}),e.jsx(s,{label:"Assistant message (streaming thinking phase)",children:e.jsx(f,{message:Oe})}),e.jsx(s,{label:"Assistant message (empty streaming draft — lone sparkle)",children:e.jsx(f,{message:Ge})}),e.jsx(s,{label:"Assistant message (thinking block)",children:e.jsx(f,{message:Ue})}),e.jsx(s,{label:"Tool result with error",children:e.jsx(f,{message:oe})}),e.jsx(s,{label:"Meta notice (interruption / synthetic no-op)",children:e.jsx(f,{message:We})}),e.jsx(s,{label:"System message",children:e.jsx(f,{message:Ve})})]})}),e.jsx(d,{title:"Tool Blocks",description:"Expandable tool call visualization",children:e.jsxs("div",{className:"space-y-2 max-w-3xl",children:[e.jsx(w,{name:"Bash",input:{command:"git status && npm run lint",description:"Check git status and lint"},toolUseId:"tb-1"}),e.jsx(w,{name:"Read",input:{file_path:"/Users/stan/Dev/project/src/index.ts",offset:10,limit:50},toolUseId:"tb-2"}),e.jsx(w,{name:"Edit",input:{file_path:"src/utils.ts",old_string:"const x = 1;",new_string:"const x = 2;",replace_all:!0},toolUseId:"tb-3"}),e.jsx(w,{name:"Edit",input:{file_path:"/Users/stan/Dev/project/src/store.ts",changes:[{path:"/Users/stan/Dev/project/src/store.ts",kind:"update"},{path:"/Users/stan/Dev/project/src/ws.ts",kind:"update"}]},toolUseId:"tb-3b"}),e.jsx(w,{name:"Write",input:{file_path:"src/new-file.ts",content:`export const hello = "world";
 `},toolUseId:"tb-4"}),e.jsx(w,{name:"Glob",input:{pattern:"**/*.tsx",path:"/Users/stan/Dev/project/src"},toolUseId:"tb-5"}),e.jsx(w,{name:"Grep",input:{pattern:"useEffect",path:"src/",glob:"*.tsx",output_mode:"content",context:3,head_limit:20},toolUseId:"tb-6"}),e.jsx(w,{name:"WebSearch",input:{query:"React 19 new features",allowed_domains:["react.dev","github.com"]},toolUseId:"tb-7"}),e.jsx(w,{name:"WebFetch",input:{url:"https://react.dev/blog/2024/12/05/react-19",prompt:"Summarize the key changes in React 19"},toolUseId:"tb-8"}),e.jsx(w,{name:"Task",input:{description:"Search for auth patterns",subagent_type:"Explore",prompt:"Find all files related to authentication and authorization in the codebase. Look for middleware, guards, and token handling."},toolUseId:"tb-9"}),e.jsx(w,{name:"TodoWrite",input:{todos:[{content:"Create JWT utility module",status:"completed",activeForm:"Creating JWT module"},{content:"Update auth middleware",status:"in_progress",activeForm:"Updating middleware"},{content:"Migrate login endpoint",status:"pending",activeForm:"Migrating login"},{content:"Run full test suite",status:"pending",activeForm:"Running tests"}]},toolUseId:"tb-10"}),e.jsx(w,{name:"NotebookEdit",input:{notebook_path:"/Users/stan/Dev/project/analysis.ipynb",cell_type:"code",edit_mode:"replace",cell_number:3,new_source:`import pandas as pd
 df = pd.read_csv('data.csv')
-df.describe()`},toolUseId:"tb-11"}),e.jsx(w,{name:"SendMessage",input:{type:"message",recipient:"researcher",content:"Please investigate the auth module structure and report back.",summary:"Requesting auth module investigation"},toolUseId:"tb-12"})]})}),e.jsx(d,{title:"Tool Progress",description:"Real-time progress indicator shown while tools are running",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Single tool running",children:e.jsxs("div",{className:"flex items-center gap-1.5 text-[11px] text-cc-muted font-mono-code pl-9",children:[e.jsx("span",{className:"inline-block w-1.5 h-1.5 rounded-full bg-cc-primary animate-pulse"}),e.jsx("span",{children:"Terminal"}),e.jsx("span",{className:"text-cc-muted/60",children:"8s"})]})}),e.jsx(s,{label:"Multiple tools running",children:e.jsxs("div",{className:"flex items-center gap-1.5 text-[11px] text-cc-muted font-mono-code pl-9",children:[e.jsx("span",{className:"inline-block w-1.5 h-1.5 rounded-full bg-cc-primary animate-pulse"}),e.jsx("span",{children:"Search Content"}),e.jsx("span",{className:"text-cc-muted/60",children:"3s"}),e.jsx("span",{className:"text-cc-muted/40",children:"·"}),e.jsx("span",{children:"Find Files"}),e.jsx("span",{className:"text-cc-muted/60",children:"2s"})]})})]})}),e.jsx(d,{title:"Compacting Context",description:"Spinner shown in the message feed when Claude Code is compacting context",children:e.jsx("div",{className:"space-y-4 max-w-3xl",children:e.jsx(s,{label:"Compacting indicator",children:e.jsxs("div",{className:"flex items-center gap-1.5 text-[11px] text-cc-warning font-mono-code pl-9",children:[e.jsxs("svg",{className:"w-3 h-3 animate-spin shrink-0",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"8",cy:"8",r:"6",opacity:"0.25"}),e.jsx("path",{d:"M8 2a6 6 0 0 1 6 6",strokeLinecap:"round"})]}),e.jsx("span",{children:"Compacting context..."})]})})})}),e.jsx(d,{title:"Tool Use Summary",description:"System message summarizing batch tool execution",children:e.jsx("div",{className:"space-y-4 max-w-3xl",children:e.jsx(s,{label:"Summary as system message",children:e.jsx(v,{message:{id:"summary-1",role:"system",content:"Read 4 files, searched 12 matches across 3 directories",timestamp:Date.now()}})})})}),e.jsx(d,{title:"Interesting Events",description:"Event summaries that are worth surfacing in the chat feed",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Context compacted",children:e.jsx(v,{message:{id:"event-compact",role:"system",content:"Context compacted (auto, pre-tokens: 182344).",timestamp:Date.now()}})}),e.jsx(s,{label:"Background task completed",children:e.jsx(v,{message:{id:"event-task",role:"system",content:"Task completed: a1b2c3d. Build finished successfully.",timestamp:Date.now()}})}),e.jsx(s,{label:"Files persisted",children:e.jsx(v,{message:{id:"event-files",role:"system",content:"Persisted 3 file(s).",timestamp:Date.now()}})}),e.jsx(s,{label:"Hook outcome",children:e.jsx(v,{message:{id:"event-hook",role:"system",content:"Hook success: lint (post_tool_use) (exit 0).",timestamp:Date.now()}})})]})}),e.jsx(d,{title:"Tasks",description:"Task list states: pending, in progress, completed, blocked",children:e.jsxs("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsxs("div",{className:"px-4 py-3 border-b border-cc-border space-y-2.5",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-[11px] text-cc-muted uppercase tracking-wider",children:"Cost"}),e.jsx("span",{className:"text-[13px] font-medium text-cc-fg tabular-nums",children:"$0.1847"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-[11px] text-cc-muted uppercase tracking-wider",children:"Context"}),e.jsx("span",{className:"text-[11px] text-cc-muted tabular-nums",children:"62%"})]}),e.jsx("div",{className:"w-full h-1.5 rounded-full bg-cc-hover overflow-hidden",children:e.jsx("div",{className:"h-full rounded-full bg-cc-warning transition-all duration-500",style:{width:"62%"}})})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-[11px] text-cc-muted uppercase tracking-wider",children:"Turns"}),e.jsx("span",{className:"text-[13px] font-medium text-cc-fg tabular-nums",children:"14"})]})]}),e.jsxs("div",{className:"px-4 py-2.5 border-b border-cc-border flex items-center justify-between",children:[e.jsx("span",{className:"text-[12px] font-semibold text-cc-fg",children:"Tasks"}),e.jsxs("span",{className:"text-[11px] text-cc-muted tabular-nums",children:["2/",le.length]})]}),e.jsx("div",{className:"px-3 py-2 space-y-0.5",children:le.map(n=>e.jsx(as,{task:n},n.id))})]})}),e.jsx(d,{title:"GitHub PR Status",description:"PR health shown in the TaskPanel — checks, reviews, unresolved comments",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Open PR — failing checks + changes requested",children:e.jsx("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(M,{pr:$e})})}),e.jsx(s,{label:"Open PR — all checks passed + approved",children:e.jsx("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(M,{pr:qe})})}),e.jsx(s,{label:"Draft PR — pending checks",children:e.jsx("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(M,{pr:Ke})})}),e.jsx(s,{label:"Merged PR",children:e.jsx("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(M,{pr:Je})})})]})}),e.jsx(d,{title:"Linear Issue (TaskPanel)",description:"Linear issue linked to a session — displayed in TaskPanel with status, comments, and actions",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Active issue — In Progress with comments",children:e.jsxs("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsxs("div",{className:"px-4 py-3 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(Y,{className:"w-3.5 h-3.5 text-cc-muted shrink-0"}),e.jsx("span",{className:"text-[12px] font-semibold text-cc-fg font-mono-code",children:T.identifier}),e.jsx("span",{className:"text-[9px] font-medium px-1.5 rounded-full leading-[16px] text-blue-400 bg-blue-400/10",children:T.stateName}),e.jsx("button",{className:"ml-auto flex items-center justify-center w-5 h-5 rounded text-cc-muted hover:text-cc-fg hover:bg-cc-hover transition-colors cursor-pointer",title:"Unlink",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3 h-3",children:e.jsx("path",{d:"M4 4l8 8M12 4l-8 8"})})})]}),e.jsx("p",{className:"text-[11px] text-cc-muted truncate",children:T.title}),e.jsxs("div",{className:"flex items-center gap-2 text-[10px] text-cc-muted",children:[e.jsx("span",{children:T.priorityLabel}),e.jsx("span",{children:"·"}),e.jsx("span",{children:T.teamName}),e.jsx("span",{children:"·"}),e.jsx("span",{children:"@ Alice"})]}),e.jsxs("div",{className:"flex flex-wrap gap-1",children:[e.jsx("span",{className:"text-[9px] px-1.5 py-0.5 rounded-full",style:{backgroundColor:"#bb87fc20",color:"#bb87fc"},children:"feature"}),e.jsx("span",{className:"text-[9px] px-1.5 py-0.5 rounded-full",style:{backgroundColor:"#f2994a20",color:"#f2994a"},children:"frontend"})]})]}),e.jsxs("div",{className:"px-4 py-2 border-t border-cc-border space-y-1.5 max-h-36 overflow-y-auto",children:[e.jsx("span",{className:"text-[10px] text-cc-muted uppercase tracking-wider",children:"Comments"}),Qe.map(n=>e.jsxs("div",{className:"text-[11px]",children:[e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("span",{className:"font-medium text-cc-fg",children:n.userName}),e.jsx("span",{className:"text-[9px] text-cc-muted",children:"just now"})]}),e.jsx("p",{className:"text-cc-muted line-clamp-2",children:n.body})]},n.id))]}),e.jsxs("div",{className:"px-4 py-2 border-t border-cc-border flex items-center gap-1.5",children:[e.jsx("input",{type:"text",placeholder:"Add a comment...",className:"flex-1 text-[11px] bg-transparent border border-cc-border rounded-md px-2 py-1.5 text-cc-fg placeholder:text-cc-muted focus:outline-none focus:border-cc-primary/50"}),e.jsx("button",{className:"flex items-center justify-center w-6 h-6 rounded text-cc-primary cursor-pointer",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M1.724 1.053a.5.5 0 0 0-.714.545l1.403 4.85a.5.5 0 0 0 .397.354l5.19.736-5.19.737a.5.5 0 0 0-.397.353L1.01 13.48a.5.5 0 0 0 .714.545l13-6.5a.5.5 0 0 0 0-.894l-13-6.5z"})})})]})]})}),e.jsx(s,{label:"Completed issue — Done warning banner",children:e.jsxs("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsxs("div",{className:"px-4 py-3 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(Y,{className:"w-3.5 h-3.5 text-cc-muted shrink-0"}),e.jsx("span",{className:"text-[12px] font-semibold text-cc-fg font-mono-code",children:I.identifier}),e.jsx("span",{className:"text-[9px] font-medium px-1.5 rounded-full leading-[16px] text-cc-success bg-cc-success/10",children:I.stateName})]}),e.jsx("p",{className:"text-[11px] text-cc-muted truncate",children:I.title}),e.jsxs("div",{className:"flex items-center gap-2 text-[10px] text-cc-muted",children:[e.jsx("span",{children:I.priorityLabel}),e.jsx("span",{children:"·"}),e.jsx("span",{children:I.teamName})]})]}),e.jsxs("div",{className:"px-4 py-2 bg-cc-success/10 border-t border-cc-success/20 flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx("p",{className:"text-[11px] text-cc-success font-medium",children:"Issue completed"}),e.jsx("p",{className:"text-[10px] text-cc-success/80",children:"Ticket moved to done."})]}),e.jsxs("div",{className:"flex items-center gap-1.5 shrink-0",children:[e.jsx("button",{className:"text-[10px] text-cc-muted hover:text-cc-fg px-1.5 py-0.5 rounded cursor-pointer",children:"Dismiss"}),e.jsx("button",{className:"text-[10px] text-cc-success font-medium px-2 py-0.5 rounded bg-cc-success/20 hover:bg-cc-success/30 cursor-pointer",children:"Close session"})]})]})]})}),e.jsx(s,{label:"No linked issue — Link button",children:e.jsx("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx("div",{className:"shrink-0 px-4 py-3 border-b border-cc-border",children:e.jsxs("button",{className:"flex items-center gap-1.5 text-[11px] text-cc-muted hover:text-cc-fg transition-colors cursor-pointer",children:[e.jsx(Y,{className:"w-3.5 h-3.5"}),"Link Linear issue"]})})})})]})}),e.jsx(d,{title:"MCP Servers",description:"MCP server status display with toggle, reconnect, and tool listing",children:e.jsx("div",{className:"space-y-4",children:e.jsx(s,{label:"All server states (connected, failed, disabled, connecting)",children:e.jsxs("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsxs("div",{className:"shrink-0 px-4 py-2.5 border-b border-cc-border flex items-center justify-between",children:[e.jsxs("span",{className:"text-[12px] font-semibold text-cc-fg flex items-center gap-1.5",children:[e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5 text-cc-muted",children:e.jsx("path",{d:"M1.5 3A1.5 1.5 0 013 1.5h10A1.5 1.5 0 0114.5 3v1A1.5 1.5 0 0113 5.5H3A1.5 1.5 0 011.5 4V3zm0 5A1.5 1.5 0 013 6.5h10A1.5 1.5 0 0114.5 8v1A1.5 1.5 0 0113 10.5H3A1.5 1.5 0 011.5 9V8zm0 5A1.5 1.5 0 013 11.5h10a1.5 1.5 0 011.5 1.5v1a1.5 1.5 0 01-1.5 1.5H3A1.5 1.5 0 011.5 14v-1z"})}),"MCP Servers"]}),e.jsx("span",{className:"text-[11px] text-cc-muted",children:e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5",children:[e.jsx("path",{d:"M2.5 8a5.5 5.5 0 019.78-3.5M13.5 8a5.5 5.5 0 01-9.78 3.5",strokeLinecap:"round"}),e.jsx("path",{d:"M12.5 2v3h-3M3.5 14v-3h3",strokeLinecap:"round",strokeLinejoin:"round"})]})})]}),e.jsx("div",{className:"px-3 py-2 space-y-1.5",children:Ye.map(n=>e.jsx(rs,{server:n},n.name))})]})})})}),e.jsx(d,{title:"Panel Config View",description:"Inline configuration for the right sidebar — toggle sections on/off and reorder them",children:e.jsx("div",{className:"space-y-4",children:e.jsx(s,{label:"Config mode with mixed enabled/disabled sections",children:e.jsxs("div",{className:"w-[320px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsxs("div",{className:"shrink-0 flex items-center justify-between px-4 py-3 border-b border-cc-border",children:[e.jsx("span",{className:"text-sm font-semibold text-cc-fg tracking-tight",children:"Panel Settings"}),e.jsx("button",{className:"flex items-center justify-center w-6 h-6 rounded-lg text-cc-muted hover:text-cc-fg hover:bg-cc-hover transition-colors cursor-pointer",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M4 4l8 8M12 4l-8 8"})})})]}),e.jsx("div",{className:"px-3 py-3 space-y-1",children:[{id:"git-branch",label:"Git Branch",desc:"Current branch, ahead/behind, and line changes",enabled:!0},{id:"usage-limits",label:"Usage Limits",desc:"API usage and rate limit meters",enabled:!0},{id:"github-pr",label:"GitHub PR",desc:"Pull request status, CI checks, and reviews",enabled:!1},{id:"linear-issue",label:"Linear Issue",desc:"Linked Linear ticket and comments",enabled:!0},{id:"mcp-servers",label:"MCP Servers",desc:"Model Context Protocol server connections",enabled:!1},{id:"tasks",label:"Tasks",desc:"Agent task list and progress",enabled:!0}].map((n,i,r)=>e.jsxs("div",{className:`flex items-center gap-2 px-2.5 py-2 rounded-lg border border-cc-border transition-opacity ${n.enabled?"bg-cc-bg":"bg-cc-hover/50 opacity-60"}`,children:[e.jsxs("div",{className:"flex flex-col gap-0.5 shrink-0",children:[e.jsx("button",{disabled:i===0,className:"w-5 h-4 flex items-center justify-center text-cc-muted hover:text-cc-fg disabled:opacity-20 disabled:cursor-not-allowed cursor-pointer transition-colors",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3 h-3",children:e.jsx("path",{d:"M8 4l4 4H4l4-4z"})})}),e.jsx("button",{disabled:i===r.length-1,className:"w-5 h-4 flex items-center justify-center text-cc-muted hover:text-cc-fg disabled:opacity-20 disabled:cursor-not-allowed cursor-pointer transition-colors",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3 h-3",children:e.jsx("path",{d:"M8 12l4-4H4l4 4z"})})})]}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("span",{className:"text-[12px] font-medium text-cc-fg block",children:n.label}),e.jsx("span",{className:"text-[10px] text-cc-muted block truncate",children:n.desc})]}),e.jsx("button",{className:`shrink-0 w-8 h-[18px] rounded-full transition-colors cursor-pointer relative ${n.enabled?"bg-cc-primary":"bg-cc-hover"}`,role:"switch","aria-checked":n.enabled,children:e.jsx("span",{className:`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow transition-transform ${n.enabled?"translate-x-[16px]":"translate-x-[2px]"}`})})]},n.id))}),e.jsxs("div",{className:"shrink-0 border-t border-cc-border px-3 py-2.5 flex items-center justify-between",children:[e.jsx("button",{className:"text-[11px] text-cc-muted hover:text-cc-fg transition-colors cursor-pointer",children:"Reset to defaults"}),e.jsx("button",{className:"text-[11px] font-medium text-cc-primary hover:text-cc-primary-hover transition-colors cursor-pointer",children:"Done"})]})]})})})}),e.jsx(d,{title:"Codex Session Details",description:"Rate limits and token details for Codex (OpenAI) sessions — streamed via session_update",children:e.jsx("div",{className:"space-y-4",children:e.jsx(s,{label:"Rate limits with token breakdown",children:e.jsx(ts,{})})})}),e.jsx(d,{title:"Update Banner",description:"Notification banner for available updates",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Service mode (auto-update)",children:e.jsx(O,{updateInfo:{currentVersion:"0.22.1",latestVersion:"0.23.0",updateAvailable:!0,isServiceMode:!0,updateInProgress:!1,lastChecked:Date.now(),channel:"stable"}})}),e.jsx(s,{label:"Foreground mode (manual)",children:e.jsx(O,{updateInfo:{currentVersion:"0.22.1",latestVersion:"0.23.0",updateAvailable:!0,isServiceMode:!1,updateInProgress:!1,lastChecked:Date.now(),channel:"stable"}})}),e.jsx(s,{label:"Update in progress",children:e.jsx(O,{updateInfo:{currentVersion:"0.22.1",latestVersion:"0.23.0",updateAvailable:!0,isServiceMode:!0,updateInProgress:!0,lastChecked:Date.now(),channel:"stable"}})}),e.jsx(s,{label:"Prerelease channel update",children:e.jsx(O,{updateInfo:{currentVersion:"0.22.1",latestVersion:"0.23.0-preview.20260228120000.abc1234",updateAvailable:!0,isServiceMode:!0,updateInProgress:!1,lastChecked:Date.now(),channel:"prerelease"}})})]})}),e.jsx(d,{title:"Status Indicators",description:"Connection and session status banners",children:e.jsxs("div",{className:"space-y-3 max-w-3xl",children:[e.jsx(s,{label:"CLI Disconnected",children:e.jsxs("div",{className:"px-4 py-2 bg-cc-warning/10 border border-cc-warning/20 rounded-lg text-center flex items-center justify-center gap-3",children:[e.jsx("span",{className:"text-xs text-cc-warning font-medium",children:"CLI disconnected"}),e.jsx("span",{className:"text-xs font-medium px-3 py-1.5 rounded-md bg-cc-warning/20 text-cc-warning cursor-pointer",children:"Reconnect"})]})}),e.jsx(s,{label:"CLI Reconnecting",children:e.jsxs("div",{className:"px-4 py-2 bg-cc-warning/10 border border-cc-warning/20 rounded-lg text-center flex items-center justify-center gap-3",children:[e.jsx("span",{className:"w-3 h-3 rounded-full border-2 border-cc-warning/30 border-t-cc-warning animate-spin"}),e.jsx("span",{className:"text-xs text-cc-warning font-medium",children:"Reconnecting…"})]})}),e.jsx(s,{label:"Reconnection Error",children:e.jsxs("div",{className:"px-4 py-2 bg-cc-warning/10 border border-cc-warning/20 rounded-lg text-center flex items-center justify-center gap-3",children:[e.jsx("span",{className:"text-xs text-cc-error font-medium",children:"Reconnection failed"}),e.jsx("span",{className:"text-xs font-medium px-3 py-1.5 rounded-md bg-cc-error/15 text-cc-error cursor-pointer",children:"Retry"})]})}),e.jsx(s,{label:"WS Disconnected",children:e.jsx("div",{className:"px-4 py-2 bg-cc-warning/10 border border-cc-warning/20 rounded-lg text-center",children:e.jsx("span",{className:"text-xs text-cc-warning font-medium",children:"Reconnecting to session..."})})}),e.jsx(s,{label:"Connected",children:e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 bg-cc-card border border-cc-border rounded-lg",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-cc-success"}),e.jsx("span",{className:"text-xs text-cc-fg font-medium",children:"Connected"}),e.jsx("span",{className:"text-[11px] text-cc-muted ml-auto",children:"claude-opus-4-6"})]})}),e.jsx(s,{label:"Running / Thinking",children:e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 bg-cc-card border border-cc-border rounded-lg",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-cc-primary animate-[pulse-dot_1.5s_ease-in-out_infinite]"}),e.jsx("span",{className:"text-xs text-cc-fg font-medium",children:"Thinking"})]})}),e.jsx(s,{label:"Compacting",children:e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 bg-cc-card border border-cc-border rounded-lg",children:[e.jsx("svg",{className:"w-3.5 h-3.5 text-cc-muted animate-spin",viewBox:"0 0 16 16",fill:"none",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5",strokeDasharray:"28",strokeDashoffset:"8",strokeLinecap:"round"})}),e.jsx("span",{className:"text-xs text-cc-muted font-medium",children:"Compacting context..."})]})})]})}),e.jsx(d,{title:"Composer",description:"Message input bar with mode toggle, image upload, saved prompts (@), and send/stop buttons",children:e.jsxs("div",{className:"max-w-3xl",children:[e.jsx(s,{label:"Connected — code mode",children:e.jsx("div",{className:"border-t border-cc-border bg-cc-card px-4 py-3",children:e.jsx("div",{className:"relative bg-cc-input-bg/95 border border-cc-border rounded-[14px] shadow-[0_10px_30px_rgba(0,0,0,0.10)] overflow-visible",children:e.jsxs("div",{className:"flex items-end gap-2 px-2.5 py-2",children:[e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border border-cc-border text-[12px] font-semibold text-cc-muted",children:[e.jsxs("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:[e.jsx("path",{d:"M2.5 4l4 4-4 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),e.jsx("path",{d:"M8.5 4l4 4-4 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})]}),e.jsx("span",{children:"code"})]}),e.jsx("textarea",{readOnly:!0,value:"Can you refactor the auth module to use JWT?",rows:1,className:"flex-1 min-w-0 px-2 py-1.5 text-sm bg-transparent resize-none text-cc-fg font-sans-ui",style:{minHeight:"36px"}}),e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5",children:[e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-lg border border-cc-border text-cc-muted",children:e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-4 h-4",children:[e.jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2"}),e.jsx("circle",{cx:"5.5",cy:"5.5",r:"1",fill:"currentColor",stroke:"none"}),e.jsx("path",{d:"M2 11l3-3 2 2 3-4 4 5",strokeLinecap:"round",strokeLinejoin:"round"})]})}),e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-full bg-cc-primary text-white shadow-[0_6px_20px_rgba(0,0,0,0.18)]",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M3 2l11 6-11 6V9.5l7-1.5-7-1.5V2z"})})})]})]})})})}),e.jsx("div",{className:"mt-4"}),e.jsx(s,{label:"@ prompt insertion",children:e.jsx("div",{className:"border-t border-cc-border bg-cc-card px-4 py-3",children:e.jsxs("div",{className:"relative bg-cc-input-bg/95 border border-cc-border rounded-[14px] shadow-[0_10px_30px_rgba(0,0,0,0.10)] overflow-visible",children:[e.jsx("div",{className:"absolute left-2 right-2 bottom-full mb-1 max-h-[180px] overflow-y-auto bg-cc-card border border-cc-border rounded-[10px] shadow-lg z-20 py-1",children:e.jsxs("div",{className:"px-3 py-2 flex items-center gap-2.5 bg-cc-hover",children:[e.jsx("span",{className:"flex items-center justify-center w-6 h-6 rounded-md bg-cc-hover text-cc-muted shrink-0",children:"@"}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("div",{className:"text-[13px] font-medium text-cc-fg truncate",children:"@review-pr"}),e.jsx("div",{className:"text-[11px] text-cc-muted truncate",children:"Review this PR and list risks, regressions, and missing tests."})]}),e.jsx("span",{className:"text-[10px] text-cc-muted shrink-0",children:"project"})]})}),e.jsxs("div",{className:"flex items-end gap-2 px-2.5 py-2",children:[e.jsx("textarea",{readOnly:!0,value:"@rev",rows:1,className:"flex-1 min-w-0 px-2 py-1.5 text-sm bg-transparent resize-none text-cc-fg font-sans-ui",style:{minHeight:"36px"}}),e.jsx("div",{className:"mb-0.5 flex items-center gap-1.5",children:e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-lg border border-cc-border text-cc-muted",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-4 h-4",children:e.jsx("path",{d:"M4 2.75h8A1.25 1.25 0 0113.25 4v9.25L8 10.5l-5.25 2.75V4A1.25 1.25 0 014 2.75z"})})})})]})]})})}),e.jsx("div",{className:"mt-4"}),e.jsx(s,{label:"Plan mode active",children:e.jsx("div",{className:"border-t border-cc-border bg-cc-card px-4 py-3",children:e.jsx("div",{className:"relative bg-cc-input-bg/95 border border-cc-primary/40 rounded-[14px] shadow-[0_10px_30px_rgba(0,0,0,0.10)] overflow-visible",children:e.jsxs("div",{className:"flex items-end gap-2 px-2.5 py-2",children:[e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border border-cc-primary/40 text-[12px] font-semibold text-cc-primary bg-cc-primary/8",children:[e.jsxs("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:[e.jsx("rect",{x:"3",y:"3",width:"3.5",height:"10",rx:"0.75"}),e.jsx("rect",{x:"9.5",y:"3",width:"3.5",height:"10",rx:"0.75"})]}),e.jsx("span",{children:"plan"})]}),e.jsx("textarea",{readOnly:!0,value:"",placeholder:"Type a message... (/ + @)",rows:1,className:"flex-1 min-w-0 px-2 py-1.5 text-sm bg-transparent resize-none text-cc-fg font-sans-ui placeholder:text-cc-muted",style:{minHeight:"36px"}}),e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5",children:[e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-lg border border-cc-border text-cc-muted",children:e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-4 h-4",children:[e.jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2"}),e.jsx("circle",{cx:"5.5",cy:"5.5",r:"1",fill:"currentColor",stroke:"none"}),e.jsx("path",{d:"M2 11l3-3 2 2 3-4 4 5",strokeLinecap:"round",strokeLinejoin:"round"})]})}),e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-full bg-cc-hover text-cc-muted",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M3 2l11 6-11 6V9.5l7-1.5-7-1.5V2z"})})})]})]})})})}),e.jsx("div",{className:"mt-4"}),e.jsx(s,{label:"Running — stop button visible",children:e.jsx("div",{className:"border-t border-cc-border bg-cc-card px-4 py-3",children:e.jsx("div",{className:"relative bg-cc-input-bg/95 border border-cc-border rounded-[14px] shadow-[0_10px_30px_rgba(0,0,0,0.10)] overflow-visible",children:e.jsxs("div",{className:"flex items-end gap-2 px-2.5 py-2",children:[e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border border-cc-border text-[12px] font-semibold text-cc-muted",children:[e.jsxs("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:[e.jsx("path",{d:"M2.5 4l4 4-4 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),e.jsx("path",{d:"M8.5 4l4 4-4 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})]}),e.jsx("span",{children:"code"})]}),e.jsx("textarea",{readOnly:!0,value:"",placeholder:"Type a message... (/ for commands)",rows:1,className:"flex-1 min-w-0 px-2 py-1.5 text-sm bg-transparent resize-none text-cc-fg font-sans-ui placeholder:text-cc-muted",style:{minHeight:"36px"}}),e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5",children:[e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-lg border border-cc-border text-cc-muted",children:e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-4 h-4",children:[e.jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2"}),e.jsx("circle",{cx:"5.5",cy:"5.5",r:"1",fill:"currentColor",stroke:"none"}),e.jsx("path",{d:"M2 11l3-3 2 2 3-4 4 5",strokeLinecap:"round",strokeLinejoin:"round"})]})}),e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-lg bg-cc-error/10 text-cc-error",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("rect",{x:"3",y:"3",width:"10",height:"10",rx:"1"})})})]})]})})})})]})}),e.jsx(d,{title:"Prompt Suggestions",description:"Suggestion chips from the CLI for predicted next user prompts",children:e.jsxs("div",{className:"max-w-3xl space-y-4",children:[e.jsx(s,{label:"Suggestion chips (idle state)",children:e.jsx("div",{className:"flex flex-wrap gap-2 p-3",children:["Fix the failing test","Add error handling","Refactor to use async/await"].map(n=>e.jsx("button",{type:"button",className:"px-3 py-1.5 text-sm rounded-full border border-cc-border bg-cc-card text-cc-fg hover:bg-cc-hover transition-colors",onClick:()=>alert(`Selected: ${n}`),children:n},n))})}),e.jsx(s,{label:"Suggestion chips (after completion)",children:e.jsx("div",{className:"flex flex-wrap gap-2 p-3",children:["Run the test suite","Deploy to staging","Update the README"].map(n=>e.jsx("button",{type:"button",className:"px-3 py-1.5 text-sm rounded-full border border-cc-primary/30 bg-cc-primary/5 text-cc-primary hover:bg-cc-primary/10 transition-colors",onClick:()=>alert(`Selected: ${n}`),children:n},n))})})]})}),e.jsx(d,{title:"Streaming Indicator",description:"Live typing animation shown while the assistant is generating",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Streaming with cursor",children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-6 h-6 rounded-full bg-cc-primary/10 flex items-center justify-center shrink-0 mt-0.5",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-3.5 h-3.5 text-cc-primary",children:e.jsx("path",{d:"M8 1v14M1 8h14",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}),e.jsx("div",{className:"flex-1 min-w-0",children:e.jsxs("pre",{className:"font-serif-assistant text-[15px] text-cc-fg whitespace-pre-wrap break-words leading-relaxed",children:["I'll start by creating the JWT utility module with sign and verify helpers. Let me first check what dependencies are already installed...",e.jsx("span",{className:"inline-block w-0.5 h-4 bg-cc-primary ml-0.5 align-middle animate-[pulse-dot_0.8s_ease-in-out_infinite]"})]})})]})}),e.jsx(s,{label:"Generation stats bar — active (streaming)",children:e.jsxs("div",{className:"flex items-center gap-2 text-[11px] text-cc-muted font-mono-code pl-10 stats-glow py-1",children:[e.jsx("span",{className:"inline-block w-2 h-2 rounded-full bg-cc-primary animate-[typing-breathe_1.5s_ease-in-out_infinite]"}),e.jsx("span",{className:"text-cc-fg/70",children:"Generating"}),e.jsx("span",{className:"text-cc-muted/30",children:"|"}),e.jsx("span",{className:"tabular-nums",children:"12s"}),e.jsx("span",{className:"text-cc-muted/30",children:"|"}),e.jsx("span",{className:"tabular-nums",children:"1.2k tokens"})]})}),e.jsx(s,{label:"Generation stats bar — quiet (working silently, e.g. long tool call)",children:e.jsxs("div",{className:"flex items-center gap-2 text-[11px] text-cc-muted font-mono-code pl-10 stats-glow py-1",children:[e.jsx("span",{className:"inline-block w-2 h-2 rounded-full bg-cc-primary animate-[typing-breathe_1.5s_ease-in-out_infinite]"}),e.jsx("span",{className:"text-cc-fg/70",children:"Still working…"}),e.jsx("span",{className:"text-cc-muted/30",children:"|"}),e.jsx("span",{className:"tabular-nums",children:"no update for 23s"})]})}),e.jsx(s,{label:"Generation stats bar — stalled (may be stuck)",children:e.jsxs("div",{className:"flex items-center gap-2 text-[11px] text-cc-warning font-mono-code pl-10 stats-glow py-1",children:[e.jsx("span",{className:"inline-block w-2 h-2 rounded-full bg-cc-warning animate-[typing-breathe_1.5s_ease-in-out_infinite]"}),e.jsx("span",{children:"No activity for 1m 5s — the agent may be stuck"})]})})]})}),e.jsx(d,{title:"Tool Message Groups",description:"Consecutive same-tool calls collapsed into a single expandable row",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Multi-item group (4 Reads)",children:e.jsx(Z,{toolName:"Read",items:We})}),e.jsx(s,{label:"Single-item group",children:e.jsx(Z,{toolName:"Glob",items:[{id:"sg-1",name:"Glob",input:{pattern:"src/auth/**/*.ts"}}]})})]})}),e.jsx(d,{title:"Subagent Groups",description:"Nested messages from Task tool subagents shown in a collapsible indent",children:e.jsx("div",{className:"space-y-4 max-w-3xl",children:e.jsx(s,{label:"Subagent with nested tool calls",children:e.jsx(ss,{description:"Search codebase for auth patterns",agentType:"Explore",status:"completed",senderThreadId:"thr_main",receiverThreadIds:["thr_sub_1","thr_sub_2"],receiverCount:2,items:Ve})})})}),e.jsx(d,{title:"Activity Tray",description:"Floating pill + expandable panel showing background agents and tasks — appears bottom-right of the chat area",children:e.jsx("div",{className:"space-y-4 max-w-3xl",children:e.jsx(s,{label:"With running agents + tasks (interactive)",children:e.jsx(is,{})})})}),e.jsx(d,{title:"Diff Viewer",description:"Unified diff rendering with word-level highlighting — used in ToolBlock, PermissionBanner, and DiffPanel",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Edit diff (compact mode)",children:e.jsx(P,{oldText:`export function formatDate(d: Date) {
+df.describe()`},toolUseId:"tb-11"}),e.jsx(w,{name:"SendMessage",input:{type:"message",recipient:"researcher",content:"Please investigate the auth module structure and report back.",summary:"Requesting auth module investigation"},toolUseId:"tb-12"})]})}),e.jsx(d,{title:"Tool Progress",description:"Real-time progress indicator shown while tools are running",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Single tool running",children:e.jsxs("div",{className:"flex items-center gap-1.5 text-[11px] text-cc-muted font-mono-code pl-9",children:[e.jsx("span",{className:"inline-block w-1.5 h-1.5 rounded-full bg-cc-primary animate-pulse"}),e.jsx("span",{children:"Terminal"}),e.jsx("span",{className:"text-cc-muted/60",children:"8s"})]})}),e.jsx(s,{label:"Multiple tools running",children:e.jsxs("div",{className:"flex items-center gap-1.5 text-[11px] text-cc-muted font-mono-code pl-9",children:[e.jsx("span",{className:"inline-block w-1.5 h-1.5 rounded-full bg-cc-primary animate-pulse"}),e.jsx("span",{children:"Search Content"}),e.jsx("span",{className:"text-cc-muted/60",children:"3s"}),e.jsx("span",{className:"text-cc-muted/40",children:"·"}),e.jsx("span",{children:"Find Files"}),e.jsx("span",{className:"text-cc-muted/60",children:"2s"})]})})]})}),e.jsx(d,{title:"Compacting Context",description:"Spinner shown in the message feed when Claude Code is compacting context",children:e.jsx("div",{className:"space-y-4 max-w-3xl",children:e.jsx(s,{label:"Compacting indicator",children:e.jsxs("div",{className:"flex items-center gap-1.5 text-[11px] text-cc-warning font-mono-code pl-9",children:[e.jsxs("svg",{className:"w-3 h-3 animate-spin shrink-0",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"8",cy:"8",r:"6",opacity:"0.25"}),e.jsx("path",{d:"M8 2a6 6 0 0 1 6 6",strokeLinecap:"round"})]}),e.jsx("span",{children:"Compacting context..."})]})})})}),e.jsx(d,{title:"Tool Use Summary",description:"System message summarizing batch tool execution",children:e.jsx("div",{className:"space-y-4 max-w-3xl",children:e.jsx(s,{label:"Summary as system message",children:e.jsx(f,{message:{id:"summary-1",role:"system",content:"Read 4 files, searched 12 matches across 3 directories",timestamp:Date.now()}})})})}),e.jsx(d,{title:"Interesting Events",description:"Event summaries that are worth surfacing in the chat feed",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Context compacted",children:e.jsx(f,{message:{id:"event-compact",role:"system",content:"Context compacted (auto, pre-tokens: 182344).",timestamp:Date.now()}})}),e.jsx(s,{label:"Background task completed",children:e.jsx(f,{message:{id:"event-task",role:"system",content:"Task completed: a1b2c3d. Build finished successfully.",timestamp:Date.now()}})}),e.jsx(s,{label:"Files persisted",children:e.jsx(f,{message:{id:"event-files",role:"system",content:"Persisted 3 file(s).",timestamp:Date.now()}})}),e.jsx(s,{label:"Hook outcome",children:e.jsx(f,{message:{id:"event-hook",role:"system",content:"Hook success: lint (post_tool_use) (exit 0).",timestamp:Date.now()}})})]})}),e.jsx(d,{title:"Tasks",description:"Task list states: pending, in progress, completed, blocked",children:e.jsxs("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsxs("div",{className:"px-4 py-3 border-b border-cc-border space-y-2.5",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-[11px] text-cc-muted uppercase tracking-wider",children:"Cost"}),e.jsx("span",{className:"text-[13px] font-medium text-cc-fg tabular-nums",children:"$0.1847"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-[11px] text-cc-muted uppercase tracking-wider",children:"Context"}),e.jsx("span",{className:"text-[11px] text-cc-muted tabular-nums",children:"62%"})]}),e.jsx("div",{className:"w-full h-1.5 rounded-full bg-cc-hover overflow-hidden",children:e.jsx("div",{className:"h-full rounded-full bg-cc-warning transition-all duration-500",style:{width:"62%"}})})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-[11px] text-cc-muted uppercase tracking-wider",children:"Turns"}),e.jsx("span",{className:"text-[13px] font-medium text-cc-fg tabular-nums",children:"14"})]})]}),e.jsxs("div",{className:"px-4 py-2.5 border-b border-cc-border flex items-center justify-between",children:[e.jsx("span",{className:"text-[12px] font-semibold text-cc-fg",children:"Tasks"}),e.jsxs("span",{className:"text-[11px] text-cc-muted tabular-nums",children:["2/",le.length]})]}),e.jsx("div",{className:"px-3 py-2 space-y-0.5",children:le.map(n=>e.jsx(cs,{task:n},n.id))})]})}),e.jsx(d,{title:"GitHub PR Status",description:"PR health shown in the TaskPanel — checks, reviews, unresolved comments",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Open PR — failing checks + changes requested",children:e.jsx("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(M,{pr:Ke})})}),e.jsx(s,{label:"Open PR — all checks passed + approved",children:e.jsx("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(M,{pr:Je})})}),e.jsx(s,{label:"Draft PR — pending checks",children:e.jsx("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(M,{pr:Ye})})}),e.jsx(s,{label:"Merged PR",children:e.jsx("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx(M,{pr:Qe})})})]})}),e.jsx(d,{title:"Linear Issue (TaskPanel)",description:"Linear issue linked to a session — displayed in TaskPanel with status, comments, and actions",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Active issue — In Progress with comments",children:e.jsxs("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsxs("div",{className:"px-4 py-3 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(Y,{className:"w-3.5 h-3.5 text-cc-muted shrink-0"}),e.jsx("span",{className:"text-[12px] font-semibold text-cc-fg font-mono-code",children:T.identifier}),e.jsx("span",{className:"text-[9px] font-medium px-1.5 rounded-full leading-[16px] text-blue-400 bg-blue-400/10",children:T.stateName}),e.jsx("button",{className:"ml-auto flex items-center justify-center w-5 h-5 rounded text-cc-muted hover:text-cc-fg hover:bg-cc-hover transition-colors cursor-pointer",title:"Unlink",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3 h-3",children:e.jsx("path",{d:"M4 4l8 8M12 4l-8 8"})})})]}),e.jsx("p",{className:"text-[11px] text-cc-muted truncate",children:T.title}),e.jsxs("div",{className:"flex items-center gap-2 text-[10px] text-cc-muted",children:[e.jsx("span",{children:T.priorityLabel}),e.jsx("span",{children:"·"}),e.jsx("span",{children:T.teamName}),e.jsx("span",{children:"·"}),e.jsx("span",{children:"@ Alice"})]}),e.jsxs("div",{className:"flex flex-wrap gap-1",children:[e.jsx("span",{className:"text-[9px] px-1.5 py-0.5 rounded-full",style:{backgroundColor:"#bb87fc20",color:"#bb87fc"},children:"feature"}),e.jsx("span",{className:"text-[9px] px-1.5 py-0.5 rounded-full",style:{backgroundColor:"#f2994a20",color:"#f2994a"},children:"frontend"})]})]}),e.jsxs("div",{className:"px-4 py-2 border-t border-cc-border space-y-1.5 max-h-36 overflow-y-auto",children:[e.jsx("span",{className:"text-[10px] text-cc-muted uppercase tracking-wider",children:"Comments"}),Ze.map(n=>e.jsxs("div",{className:"text-[11px]",children:[e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("span",{className:"font-medium text-cc-fg",children:n.userName}),e.jsx("span",{className:"text-[9px] text-cc-muted",children:"just now"})]}),e.jsx("p",{className:"text-cc-muted line-clamp-2",children:n.body})]},n.id))]}),e.jsxs("div",{className:"px-4 py-2 border-t border-cc-border flex items-center gap-1.5",children:[e.jsx("input",{type:"text",placeholder:"Add a comment...",className:"flex-1 text-[11px] bg-transparent border border-cc-border rounded-md px-2 py-1.5 text-cc-fg placeholder:text-cc-muted focus:outline-none focus:border-cc-primary/50"}),e.jsx("button",{className:"flex items-center justify-center w-6 h-6 rounded text-cc-primary cursor-pointer",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M1.724 1.053a.5.5 0 0 0-.714.545l1.403 4.85a.5.5 0 0 0 .397.354l5.19.736-5.19.737a.5.5 0 0 0-.397.353L1.01 13.48a.5.5 0 0 0 .714.545l13-6.5a.5.5 0 0 0 0-.894l-13-6.5z"})})})]})]})}),e.jsx(s,{label:"Completed issue — Done warning banner",children:e.jsxs("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsxs("div",{className:"px-4 py-3 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(Y,{className:"w-3.5 h-3.5 text-cc-muted shrink-0"}),e.jsx("span",{className:"text-[12px] font-semibold text-cc-fg font-mono-code",children:I.identifier}),e.jsx("span",{className:"text-[9px] font-medium px-1.5 rounded-full leading-[16px] text-cc-success bg-cc-success/10",children:I.stateName})]}),e.jsx("p",{className:"text-[11px] text-cc-muted truncate",children:I.title}),e.jsxs("div",{className:"flex items-center gap-2 text-[10px] text-cc-muted",children:[e.jsx("span",{children:I.priorityLabel}),e.jsx("span",{children:"·"}),e.jsx("span",{children:I.teamName})]})]}),e.jsxs("div",{className:"px-4 py-2 bg-cc-success/10 border-t border-cc-success/20 flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx("p",{className:"text-[11px] text-cc-success font-medium",children:"Issue completed"}),e.jsx("p",{className:"text-[10px] text-cc-success/80",children:"Ticket moved to done."})]}),e.jsxs("div",{className:"flex items-center gap-1.5 shrink-0",children:[e.jsx("button",{className:"text-[10px] text-cc-muted hover:text-cc-fg px-1.5 py-0.5 rounded cursor-pointer",children:"Dismiss"}),e.jsx("button",{className:"text-[10px] text-cc-success font-medium px-2 py-0.5 rounded bg-cc-success/20 hover:bg-cc-success/30 cursor-pointer",children:"Close session"})]})]})]})}),e.jsx(s,{label:"No linked issue — Link button",children:e.jsx("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:e.jsx("div",{className:"shrink-0 px-4 py-3 border-b border-cc-border",children:e.jsxs("button",{className:"flex items-center gap-1.5 text-[11px] text-cc-muted hover:text-cc-fg transition-colors cursor-pointer",children:[e.jsx(Y,{className:"w-3.5 h-3.5"}),"Link Linear issue"]})})})})]})}),e.jsx(d,{title:"MCP Servers",description:"MCP server status display with toggle, reconnect, and tool listing",children:e.jsx("div",{className:"space-y-4",children:e.jsx(s,{label:"All server states (connected, failed, disabled, connecting)",children:e.jsxs("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsxs("div",{className:"shrink-0 px-4 py-2.5 border-b border-cc-border flex items-center justify-between",children:[e.jsxs("span",{className:"text-[12px] font-semibold text-cc-fg flex items-center gap-1.5",children:[e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5 text-cc-muted",children:e.jsx("path",{d:"M1.5 3A1.5 1.5 0 013 1.5h10A1.5 1.5 0 0114.5 3v1A1.5 1.5 0 0113 5.5H3A1.5 1.5 0 011.5 4V3zm0 5A1.5 1.5 0 013 6.5h10A1.5 1.5 0 0114.5 8v1A1.5 1.5 0 0113 10.5H3A1.5 1.5 0 011.5 9V8zm0 5A1.5 1.5 0 013 11.5h10a1.5 1.5 0 011.5 1.5v1a1.5 1.5 0 01-1.5 1.5H3A1.5 1.5 0 011.5 14v-1z"})}),"MCP Servers"]}),e.jsx("span",{className:"text-[11px] text-cc-muted",children:e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5",children:[e.jsx("path",{d:"M2.5 8a5.5 5.5 0 019.78-3.5M13.5 8a5.5 5.5 0 01-9.78 3.5",strokeLinecap:"round"}),e.jsx("path",{d:"M12.5 2v3h-3M3.5 14v-3h3",strokeLinecap:"round",strokeLinejoin:"round"})]})})]}),e.jsx("div",{className:"px-3 py-2 space-y-1.5",children:Xe.map(n=>e.jsx(is,{server:n},n.name))})]})})})}),e.jsx(d,{title:"Panel Config View",description:"Inline configuration for the right sidebar — toggle sections on/off and reorder them",children:e.jsx("div",{className:"space-y-4",children:e.jsx(s,{label:"Config mode with mixed enabled/disabled sections",children:e.jsxs("div",{className:"w-[320px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsxs("div",{className:"shrink-0 flex items-center justify-between px-4 py-3 border-b border-cc-border",children:[e.jsx("span",{className:"text-sm font-semibold text-cc-fg tracking-tight",children:"Panel Settings"}),e.jsx("button",{className:"flex items-center justify-center w-6 h-6 rounded-lg text-cc-muted hover:text-cc-fg hover:bg-cc-hover transition-colors cursor-pointer",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M4 4l8 8M12 4l-8 8"})})})]}),e.jsx("div",{className:"px-3 py-3 space-y-1",children:[{id:"git-branch",label:"Git Branch",desc:"Current branch, ahead/behind, and line changes",enabled:!0},{id:"usage-limits",label:"Usage Limits",desc:"API usage and rate limit meters",enabled:!0},{id:"github-pr",label:"GitHub PR",desc:"Pull request status, CI checks, and reviews",enabled:!1},{id:"linear-issue",label:"Linear Issue",desc:"Linked Linear ticket and comments",enabled:!0},{id:"mcp-servers",label:"MCP Servers",desc:"Model Context Protocol server connections",enabled:!1},{id:"tasks",label:"Tasks",desc:"Agent task list and progress",enabled:!0}].map((n,i,r)=>e.jsxs("div",{className:`flex items-center gap-2 px-2.5 py-2 rounded-lg border border-cc-border transition-opacity ${n.enabled?"bg-cc-bg":"bg-cc-hover/50 opacity-60"}`,children:[e.jsxs("div",{className:"flex flex-col gap-0.5 shrink-0",children:[e.jsx("button",{disabled:i===0,className:"w-5 h-4 flex items-center justify-center text-cc-muted hover:text-cc-fg disabled:opacity-20 disabled:cursor-not-allowed cursor-pointer transition-colors",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3 h-3",children:e.jsx("path",{d:"M8 4l4 4H4l4-4z"})})}),e.jsx("button",{disabled:i===r.length-1,className:"w-5 h-4 flex items-center justify-center text-cc-muted hover:text-cc-fg disabled:opacity-20 disabled:cursor-not-allowed cursor-pointer transition-colors",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3 h-3",children:e.jsx("path",{d:"M8 12l4-4H4l4 4z"})})})]}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("span",{className:"text-[12px] font-medium text-cc-fg block",children:n.label}),e.jsx("span",{className:"text-[10px] text-cc-muted block truncate",children:n.desc})]}),e.jsx("button",{className:`shrink-0 w-8 h-[18px] rounded-full transition-colors cursor-pointer relative ${n.enabled?"bg-cc-primary":"bg-cc-hover"}`,role:"switch","aria-checked":n.enabled,children:e.jsx("span",{className:`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow transition-transform ${n.enabled?"translate-x-[16px]":"translate-x-[2px]"}`})})]},n.id))}),e.jsxs("div",{className:"shrink-0 border-t border-cc-border px-3 py-2.5 flex items-center justify-between",children:[e.jsx("button",{className:"text-[11px] text-cc-muted hover:text-cc-fg transition-colors cursor-pointer",children:"Reset to defaults"}),e.jsx("button",{className:"text-[11px] font-medium text-cc-primary hover:text-cc-primary-hover transition-colors cursor-pointer",children:"Done"})]})]})})})}),e.jsx(d,{title:"Codex Session Details",description:"Rate limits and token details for Codex (OpenAI) sessions — streamed via session_update",children:e.jsx("div",{className:"space-y-4",children:e.jsx(s,{label:"Rate limits with token breakdown",children:e.jsx(rs,{})})})}),e.jsx(d,{title:"Update Banner",description:"Notification banner for available updates",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Service mode (auto-update)",children:e.jsx(O,{updateInfo:{currentVersion:"0.22.1",latestVersion:"0.23.0",updateAvailable:!0,isServiceMode:!0,updateInProgress:!1,lastChecked:Date.now(),channel:"stable"}})}),e.jsx(s,{label:"Foreground mode (manual)",children:e.jsx(O,{updateInfo:{currentVersion:"0.22.1",latestVersion:"0.23.0",updateAvailable:!0,isServiceMode:!1,updateInProgress:!1,lastChecked:Date.now(),channel:"stable"}})}),e.jsx(s,{label:"Update in progress",children:e.jsx(O,{updateInfo:{currentVersion:"0.22.1",latestVersion:"0.23.0",updateAvailable:!0,isServiceMode:!0,updateInProgress:!0,lastChecked:Date.now(),channel:"stable"}})}),e.jsx(s,{label:"Prerelease channel update",children:e.jsx(O,{updateInfo:{currentVersion:"0.22.1",latestVersion:"0.23.0-preview.20260228120000.abc1234",updateAvailable:!0,isServiceMode:!0,updateInProgress:!1,lastChecked:Date.now(),channel:"prerelease"}})})]})}),e.jsx(d,{title:"Status Indicators",description:"Connection and session status banners",children:e.jsxs("div",{className:"space-y-3 max-w-3xl",children:[e.jsx(s,{label:"CLI Disconnected",children:e.jsxs("div",{className:"px-4 py-2 bg-cc-warning/10 border border-cc-warning/20 rounded-lg text-center flex items-center justify-center gap-3",children:[e.jsx("span",{className:"text-xs text-cc-warning font-medium",children:"CLI disconnected"}),e.jsx("span",{className:"text-xs font-medium px-3 py-1.5 rounded-md bg-cc-warning/20 text-cc-warning cursor-pointer",children:"Reconnect"})]})}),e.jsx(s,{label:"CLI Reconnecting",children:e.jsxs("div",{className:"px-4 py-2 bg-cc-warning/10 border border-cc-warning/20 rounded-lg text-center flex items-center justify-center gap-3",children:[e.jsx("span",{className:"w-3 h-3 rounded-full border-2 border-cc-warning/30 border-t-cc-warning animate-spin"}),e.jsx("span",{className:"text-xs text-cc-warning font-medium",children:"Reconnecting…"})]})}),e.jsx(s,{label:"Reconnection Error",children:e.jsxs("div",{className:"px-4 py-2 bg-cc-warning/10 border border-cc-warning/20 rounded-lg text-center flex items-center justify-center gap-3",children:[e.jsx("span",{className:"text-xs text-cc-error font-medium",children:"Reconnection failed"}),e.jsx("span",{className:"text-xs font-medium px-3 py-1.5 rounded-md bg-cc-error/15 text-cc-error cursor-pointer",children:"Retry"})]})}),e.jsx(s,{label:"WS Disconnected",children:e.jsx("div",{className:"px-4 py-2 bg-cc-warning/10 border border-cc-warning/20 rounded-lg text-center",children:e.jsx("span",{className:"text-xs text-cc-warning font-medium",children:"Reconnecting to session..."})})}),e.jsx(s,{label:"Connected",children:e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 bg-cc-card border border-cc-border rounded-lg",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-cc-success"}),e.jsx("span",{className:"text-xs text-cc-fg font-medium",children:"Connected"}),e.jsx("span",{className:"text-[11px] text-cc-muted ml-auto",children:"claude-opus-4-6"})]})}),e.jsx(s,{label:"Running / Thinking",children:e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 bg-cc-card border border-cc-border rounded-lg",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-cc-primary animate-[pulse-dot_1.5s_ease-in-out_infinite]"}),e.jsx("span",{className:"text-xs text-cc-fg font-medium",children:"Thinking"})]})}),e.jsx(s,{label:"Compacting",children:e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 bg-cc-card border border-cc-border rounded-lg",children:[e.jsx("svg",{className:"w-3.5 h-3.5 text-cc-muted animate-spin",viewBox:"0 0 16 16",fill:"none",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5",strokeDasharray:"28",strokeDashoffset:"8",strokeLinecap:"round"})}),e.jsx("span",{className:"text-xs text-cc-muted font-medium",children:"Compacting context..."})]})})]})}),e.jsx(d,{title:"Composer",description:"Message input bar with mode toggle, image upload, saved prompts (@), and send/stop buttons",children:e.jsxs("div",{className:"max-w-3xl",children:[e.jsx(s,{label:"Connected — code mode",children:e.jsx("div",{className:"border-t border-cc-border bg-cc-card px-4 py-3",children:e.jsx("div",{className:"relative bg-cc-input-bg/95 border border-cc-border rounded-[14px] shadow-[0_10px_30px_rgba(0,0,0,0.10)] overflow-visible",children:e.jsxs("div",{className:"flex items-end gap-2 px-2.5 py-2",children:[e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border border-cc-border text-[12px] font-semibold text-cc-muted",children:[e.jsxs("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:[e.jsx("path",{d:"M2.5 4l4 4-4 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),e.jsx("path",{d:"M8.5 4l4 4-4 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})]}),e.jsx("span",{children:"code"})]}),e.jsx("textarea",{readOnly:!0,value:"Can you refactor the auth module to use JWT?",rows:1,className:"flex-1 min-w-0 px-2 py-1.5 text-sm bg-transparent resize-none text-cc-fg font-sans-ui",style:{minHeight:"36px"}}),e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5",children:[e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-lg border border-cc-border text-cc-muted",children:e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-4 h-4",children:[e.jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2"}),e.jsx("circle",{cx:"5.5",cy:"5.5",r:"1",fill:"currentColor",stroke:"none"}),e.jsx("path",{d:"M2 11l3-3 2 2 3-4 4 5",strokeLinecap:"round",strokeLinejoin:"round"})]})}),e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-full bg-cc-primary text-white shadow-[0_6px_20px_rgba(0,0,0,0.18)]",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M3 2l11 6-11 6V9.5l7-1.5-7-1.5V2z"})})})]})]})})})}),e.jsx("div",{className:"mt-4"}),e.jsx(s,{label:"@ prompt insertion",children:e.jsx("div",{className:"border-t border-cc-border bg-cc-card px-4 py-3",children:e.jsxs("div",{className:"relative bg-cc-input-bg/95 border border-cc-border rounded-[14px] shadow-[0_10px_30px_rgba(0,0,0,0.10)] overflow-visible",children:[e.jsx("div",{className:"absolute left-2 right-2 bottom-full mb-1 max-h-[180px] overflow-y-auto bg-cc-card border border-cc-border rounded-[10px] shadow-lg z-20 py-1",children:e.jsxs("div",{className:"px-3 py-2 flex items-center gap-2.5 bg-cc-hover",children:[e.jsx("span",{className:"flex items-center justify-center w-6 h-6 rounded-md bg-cc-hover text-cc-muted shrink-0",children:"@"}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("div",{className:"text-[13px] font-medium text-cc-fg truncate",children:"@review-pr"}),e.jsx("div",{className:"text-[11px] text-cc-muted truncate",children:"Review this PR and list risks, regressions, and missing tests."})]}),e.jsx("span",{className:"text-[10px] text-cc-muted shrink-0",children:"project"})]})}),e.jsxs("div",{className:"flex items-end gap-2 px-2.5 py-2",children:[e.jsx("textarea",{readOnly:!0,value:"@rev",rows:1,className:"flex-1 min-w-0 px-2 py-1.5 text-sm bg-transparent resize-none text-cc-fg font-sans-ui",style:{minHeight:"36px"}}),e.jsx("div",{className:"mb-0.5 flex items-center gap-1.5",children:e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-lg border border-cc-border text-cc-muted",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-4 h-4",children:e.jsx("path",{d:"M4 2.75h8A1.25 1.25 0 0113.25 4v9.25L8 10.5l-5.25 2.75V4A1.25 1.25 0 014 2.75z"})})})})]})]})})}),e.jsx("div",{className:"mt-4"}),e.jsx(s,{label:"Plan mode active",children:e.jsx("div",{className:"border-t border-cc-border bg-cc-card px-4 py-3",children:e.jsx("div",{className:"relative bg-cc-input-bg/95 border border-cc-primary/40 rounded-[14px] shadow-[0_10px_30px_rgba(0,0,0,0.10)] overflow-visible",children:e.jsxs("div",{className:"flex items-end gap-2 px-2.5 py-2",children:[e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border border-cc-primary/40 text-[12px] font-semibold text-cc-primary bg-cc-primary/8",children:[e.jsxs("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:[e.jsx("rect",{x:"3",y:"3",width:"3.5",height:"10",rx:"0.75"}),e.jsx("rect",{x:"9.5",y:"3",width:"3.5",height:"10",rx:"0.75"})]}),e.jsx("span",{children:"plan"})]}),e.jsx("textarea",{readOnly:!0,value:"",placeholder:"Type a message... (/ + @)",rows:1,className:"flex-1 min-w-0 px-2 py-1.5 text-sm bg-transparent resize-none text-cc-fg font-sans-ui placeholder:text-cc-muted",style:{minHeight:"36px"}}),e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5",children:[e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-lg border border-cc-border text-cc-muted",children:e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-4 h-4",children:[e.jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2"}),e.jsx("circle",{cx:"5.5",cy:"5.5",r:"1",fill:"currentColor",stroke:"none"}),e.jsx("path",{d:"M2 11l3-3 2 2 3-4 4 5",strokeLinecap:"round",strokeLinejoin:"round"})]})}),e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-full bg-cc-hover text-cc-muted",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M3 2l11 6-11 6V9.5l7-1.5-7-1.5V2z"})})})]})]})})})}),e.jsx("div",{className:"mt-4"}),e.jsx(s,{label:"Running — stop button visible",children:e.jsx("div",{className:"border-t border-cc-border bg-cc-card px-4 py-3",children:e.jsx("div",{className:"relative bg-cc-input-bg/95 border border-cc-border rounded-[14px] shadow-[0_10px_30px_rgba(0,0,0,0.10)] overflow-visible",children:e.jsxs("div",{className:"flex items-end gap-2 px-2.5 py-2",children:[e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border border-cc-border text-[12px] font-semibold text-cc-muted",children:[e.jsxs("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:[e.jsx("path",{d:"M2.5 4l4 4-4 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),e.jsx("path",{d:"M8.5 4l4 4-4 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})]}),e.jsx("span",{children:"code"})]}),e.jsx("textarea",{readOnly:!0,value:"",placeholder:"Type a message... (/ for commands)",rows:1,className:"flex-1 min-w-0 px-2 py-1.5 text-sm bg-transparent resize-none text-cc-fg font-sans-ui placeholder:text-cc-muted",style:{minHeight:"36px"}}),e.jsxs("div",{className:"mb-0.5 flex items-center gap-1.5",children:[e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-lg border border-cc-border text-cc-muted",children:e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-4 h-4",children:[e.jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2"}),e.jsx("circle",{cx:"5.5",cy:"5.5",r:"1",fill:"currentColor",stroke:"none"}),e.jsx("path",{d:"M2 11l3-3 2 2 3-4 4 5",strokeLinecap:"round",strokeLinejoin:"round"})]})}),e.jsx("div",{className:"flex items-center justify-center w-9 h-9 rounded-lg bg-cc-error/10 text-cc-error",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("rect",{x:"3",y:"3",width:"10",height:"10",rx:"1"})})})]})]})})})})]})}),e.jsx(d,{title:"Prompt Suggestions",description:"Suggestion chips from the CLI for predicted next user prompts",children:e.jsxs("div",{className:"max-w-3xl space-y-4",children:[e.jsx(s,{label:"Suggestion chips (idle state)",children:e.jsx("div",{className:"flex flex-wrap gap-2 p-3",children:["Fix the failing test","Add error handling","Refactor to use async/await"].map(n=>e.jsx("button",{type:"button",className:"px-3 py-1.5 text-sm rounded-full border border-cc-border bg-cc-card text-cc-fg hover:bg-cc-hover transition-colors",onClick:()=>alert(`Selected: ${n}`),children:n},n))})}),e.jsx(s,{label:"Suggestion chips (after completion)",children:e.jsx("div",{className:"flex flex-wrap gap-2 p-3",children:["Run the test suite","Deploy to staging","Update the README"].map(n=>e.jsx("button",{type:"button",className:"px-3 py-1.5 text-sm rounded-full border border-cc-primary/30 bg-cc-primary/5 text-cc-primary hover:bg-cc-primary/10 transition-colors",onClick:()=>alert(`Selected: ${n}`),children:n},n))})})]})}),e.jsx(d,{title:"Streaming Indicator",description:"Live typing animation shown while the assistant is generating",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Streaming with cursor",children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-6 h-6 rounded-full bg-cc-primary/10 flex items-center justify-center shrink-0 mt-0.5",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-3.5 h-3.5 text-cc-primary",children:e.jsx("path",{d:"M8 1v14M1 8h14",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}),e.jsx("div",{className:"flex-1 min-w-0",children:e.jsxs("pre",{className:"font-serif-assistant text-[15px] text-cc-fg whitespace-pre-wrap break-words leading-relaxed",children:["I'll start by creating the JWT utility module with sign and verify helpers. Let me first check what dependencies are already installed...",e.jsx("span",{className:"inline-block w-0.5 h-4 bg-cc-primary ml-0.5 align-middle animate-[pulse-dot_0.8s_ease-in-out_infinite]"})]})})]})}),e.jsx(s,{label:"Generation stats bar — active (streaming)",children:e.jsxs("div",{className:"flex items-center gap-2 text-[11px] text-cc-muted font-mono-code pl-10 stats-glow py-1",children:[e.jsx("span",{className:"inline-block w-2 h-2 rounded-full bg-cc-primary animate-[typing-breathe_1.5s_ease-in-out_infinite]"}),e.jsx("span",{className:"text-cc-fg/70",children:"Generating"}),e.jsx("span",{className:"text-cc-muted/30",children:"|"}),e.jsx("span",{className:"tabular-nums",children:"12s"}),e.jsx("span",{className:"text-cc-muted/30",children:"|"}),e.jsx("span",{className:"tabular-nums",children:"1.2k tokens"})]})}),e.jsx(s,{label:"Generation stats bar — quiet (working silently, e.g. long tool call)",children:e.jsxs("div",{className:"flex items-center gap-2 text-[11px] text-cc-muted font-mono-code pl-10 stats-glow py-1",children:[e.jsx("span",{className:"inline-block w-2 h-2 rounded-full bg-cc-primary animate-[typing-breathe_1.5s_ease-in-out_infinite]"}),e.jsx("span",{className:"text-cc-fg/70",children:"Still working…"}),e.jsx("span",{className:"text-cc-muted/30",children:"|"}),e.jsx("span",{className:"tabular-nums",children:"no update for 23s"})]})}),e.jsx(s,{label:"Generation stats bar — stalled (may be stuck)",children:e.jsxs("div",{className:"flex items-center gap-2 text-[11px] text-cc-warning font-mono-code pl-10 stats-glow py-1",children:[e.jsx("span",{className:"inline-block w-2 h-2 rounded-full bg-cc-warning animate-[typing-breathe_1.5s_ease-in-out_infinite]"}),e.jsx("span",{children:"No activity for 1m 5s — the agent may be stuck"})]})})]})}),e.jsx(d,{title:"Tool Message Groups",description:"Consecutive same-tool calls collapsed into a single expandable row",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Multi-item group (4 Reads)",children:e.jsx(Z,{toolName:"Read",items:ze})}),e.jsx(s,{label:"Single-item group",children:e.jsx(Z,{toolName:"Glob",items:[{id:"sg-1",name:"Glob",input:{pattern:"src/auth/**/*.ts"}}]})})]})}),e.jsx(d,{title:"Subagent Groups",description:"Nested messages from Task tool subagents shown in a collapsible indent",children:e.jsx("div",{className:"space-y-4 max-w-3xl",children:e.jsx(s,{label:"Subagent with nested tool calls",children:e.jsx(ns,{description:"Search codebase for auth patterns",agentType:"Explore",status:"completed",senderThreadId:"thr_main",receiverThreadIds:["thr_sub_1","thr_sub_2"],receiverCount:2,items:Fe})})})}),e.jsx(d,{title:"Activity Tray",description:"Floating pill + expandable panel showing background agents and tasks — appears bottom-right of the chat area",children:e.jsx("div",{className:"space-y-4 max-w-3xl",children:e.jsx(s,{label:"With running agents + tasks (interactive)",children:e.jsx(os,{})})})}),e.jsx(d,{title:"Diff Viewer",description:"Unified diff rendering with word-level highlighting — used in ToolBlock, PermissionBanner, and DiffPanel",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Edit diff (compact mode)",children:e.jsx(P,{oldText:`export function formatDate(d: Date) {
   return d.toISOString();
 }`,newText:`export function formatDate(d: Date, locale = "en-US") {
   return d.toLocaleDateString(locale, {
@@ -106,4 +106,4 @@ df.describe()`},toolUseId:"tb-11"}),e.jsx(w,{name:"SendMessage",input:{type:"mes
    next();
  }`,mode:"full"})}),e.jsx(s,{label:"No changes",children:e.jsx(P,{oldText:"same content",newText:"same content"})})]})}),e.jsx(d,{title:"Session Creation Progress",description:"Step-by-step progress indicator shown during session creation (SSE streaming)",children:e.jsxs("div",{className:"space-y-4 max-w-md",children:[e.jsx(s,{label:"In progress (container session)",children:e.jsx(A,{steps:[{step:"resolving_env",label:"Resolving environment...",status:"done"},{step:"pulling_image",label:"Pulling Docker image...",status:"done"},{step:"creating_container",label:"Starting container...",status:"in_progress"},{step:"launching_cli",label:"Launching Claude Code...",status:"in_progress"}]})}),e.jsx(s,{label:"Completed (worktree session)",children:e.jsx(A,{steps:[{step:"resolving_env",label:"Resolving environment...",status:"done"},{step:"fetching_git",label:"Fetching from remote...",status:"done"},{step:"checkout_branch",label:"Checking out feat/auth...",status:"done"},{step:"creating_worktree",label:"Creating worktree...",status:"done"},{step:"launching_cli",label:"Launching Claude Code...",status:"done"}]})}),e.jsx(s,{label:"Error during image pull",children:e.jsx(A,{steps:[{step:"resolving_env",label:"Resolving environment...",status:"done"},{step:"pulling_image",label:"Pulling Docker image...",status:"error"}],error:"Failed to pull docker.io/stangirard/the-companion:latest — connection timed out after 30s"})}),e.jsx(s,{label:"With streaming init script logs",children:e.jsx(A,{steps:[{step:"resolving_env",label:"Resolving environment...",status:"done"},{step:"pulling_image",label:"Image ready",status:"done"},{step:"creating_container",label:"Container running",status:"done"},{step:"running_init_script",label:"Running init script...",status:"in_progress",detail:"Installing dependencies..."}]})}),e.jsx(s,{label:"With streaming image pull logs",children:e.jsx(A,{steps:[{step:"resolving_env",label:"Resolving environment...",status:"done"},{step:"pulling_image",label:"Pulling Docker image...",status:"in_progress",detail:"Downloading layer 3/7 [=====>    ] 45%"}]})}),e.jsx(s,{label:"Error during init script",children:e.jsx(A,{steps:[{step:"resolving_env",label:"Resolving environment...",status:"done"},{step:"pulling_image",label:"Pulling Docker image...",status:"done"},{step:"creating_container",label:"Starting container...",status:"done"},{step:"running_init_script",label:"Running init script...",status:"error"}],error:`npm ERR! code ENOENT
 npm ERR! syscall open
-npm ERR! path /app/package.json`})})]})}),e.jsx(d,{title:"Session Launch Overlay",description:"Full-screen overlay shown during session creation, replacing the inline progress list",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"In progress (container session)",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(L,{steps:[{step:"resolving_env",label:"Environment resolved",status:"done"},{step:"pulling_image",label:"Pulling Docker image...",status:"done"},{step:"creating_container",label:"Starting container...",status:"in_progress"},{step:"launching_cli",label:"Launching Claude Code...",status:"in_progress"}],backend:"claude",onCancel:()=>{}})})}),e.jsx(s,{label:"All steps done (launching)",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(L,{steps:[{step:"resolving_env",label:"Environment resolved",status:"done"},{step:"fetching_git",label:"Fetch complete",status:"done"},{step:"creating_worktree",label:"Worktree created",status:"done"},{step:"launching_cli",label:"CLI launched",status:"done"}],backend:"claude"})})}),e.jsx(s,{label:"Error state",children:e.jsx("div",{className:"relative h-[400px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(L,{steps:[{step:"resolving_env",label:"Environment resolved",status:"done"},{step:"pulling_image",label:"Pulling Docker image...",status:"error"}],error:"Failed to pull docker.io/stangirard/the-companion:latest — connection timed out after 30s",backend:"claude",onCancel:()=>{}})})}),e.jsx(s,{label:"Codex backend",children:e.jsx("div",{className:"relative h-[320px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(L,{steps:[{step:"resolving_env",label:"Environment resolved",status:"done"},{step:"launching_cli",label:"Launching Codex...",status:"in_progress"}],backend:"codex",onCancel:()=>{}})})})]})}),e.jsx(d,{title:"Update Overlay",description:"Full-screen overlay shown when auto-update is in progress, polls server and reloads when ready",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Installing phase",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(B,{phase:"installing"})})}),e.jsx(s,{label:"Restarting phase",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(B,{phase:"restarting"})})}),e.jsx(s,{label:"Waiting for server",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(B,{phase:"waiting"})})}),e.jsx(s,{label:"Update complete",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(B,{phase:"ready"})})})]})}),e.jsx(d,{title:"Docker Update Dialog",description:"Post-update dialog asking whether to also update the sandbox Docker image",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Prompt phase",children:e.jsx(U,{phase:"prompt"})}),e.jsx(s,{label:"Pulling phase",children:e.jsx(U,{phase:"pulling"})}),e.jsx(s,{label:"Done phase",children:e.jsx(U,{phase:"done"})}),e.jsx(s,{label:"Error phase",children:e.jsx(U,{phase:"error"})})]})}),e.jsx(d,{title:"CLAUDE.md Editor",description:"Modal for viewing and editing project CLAUDE.md instructions",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Open editor button (from TopBar)",children:e.jsx(ns,{})}),e.jsx(s,{label:"Terminal quick tabs (from TopBar)",children:e.jsx(es,{})})]})}),e.jsx(d,{title:"Session Items",description:"Sidebar session rows — status dot, backend badge, Docker indicator, archive on hover",children:e.jsx(Ze,{})}),e.jsx(d,{title:"Browser Preview",description:"Browser preview panel — host mode (HTTP proxy) and container mode (noVNC) — loading, error, and active states",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Loading state",children:e.jsxs("div",{className:"h-48 flex flex-col items-center justify-center gap-3 p-4 bg-cc-bg rounded border border-cc-border",children:[e.jsx("div",{className:"w-5 h-5 border-2 border-cc-primary border-t-transparent rounded-full animate-spin"}),e.jsx("div",{className:"text-sm text-cc-muted",children:"Starting browser preview..."})]})}),e.jsx(s,{label:"Error state",children:e.jsx("div",{className:"h-48 flex items-center justify-center p-4 bg-cc-bg rounded border border-cc-border",children:e.jsx("div",{className:"px-4 py-3 rounded-lg bg-cc-error/10 border border-cc-error/30 text-sm text-cc-error max-w-md text-center",children:"Browser preview unavailable."})})}),e.jsx(s,{label:"Host mode (proxy — before navigation)",children:e.jsxs("div",{className:"h-48 flex flex-col bg-cc-bg rounded border border-cc-border overflow-hidden",children:[e.jsxs("div",{className:"shrink-0 px-3 py-2 border-b border-cc-border flex items-center gap-2",children:[e.jsx("button",{type:"button",className:"flex items-center justify-center w-7 h-7 rounded text-cc-muted hover:text-cc-fg hover:bg-cc-hover transition-colors cursor-pointer","aria-label":"Reload browser",title:"Reload",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M13.65 2.35a1 1 0 0 0-1.3 0L11 3.7A5.99 5.99 0 0 0 2 8a1 1 0 1 0 2 0 4 4 0 0 1 6.29-3.29L8.65 6.35a1 1 0 0 0 .7 1.7H13a1 1 0 0 0 1-1V3.4a1 1 0 0 0-.35-.7z M14 8a1 1 0 1 0-2 0 4 4 0 0 1-6.29 3.29l1.64-1.64a1 1 0 0 0-.7-1.7H3.05a1 1 0 0 0-1 1v3.65a1 1 0 0 0 1.7.7L5 11.7A5.99 5.99 0 0 0 14 8z"})})}),e.jsx("input",{type:"text",defaultValue:"http://localhost:3000",className:"flex-1 px-2 py-1 text-xs rounded bg-cc-bg border border-cc-border text-cc-fg placeholder:text-cc-muted focus:outline-none focus:border-cc-primary","aria-label":"Navigate URL",readOnly:!0}),e.jsx("button",{type:"button",className:"px-3 py-1 rounded text-xs font-medium bg-cc-primary text-white hover:bg-cc-primary-hover transition-colors cursor-pointer",children:"Go"})]}),e.jsx("div",{className:"flex-1 flex items-center justify-center text-xs text-cc-muted",children:"Enter a URL and click Go to preview."})]})}),e.jsx(s,{label:"Container mode (noVNC — active)",children:e.jsxs("div",{className:"h-48 flex flex-col bg-cc-bg rounded border border-cc-border overflow-hidden",children:[e.jsxs("div",{className:"shrink-0 px-3 py-2 border-b border-cc-border flex items-center gap-2",children:[e.jsx("button",{type:"button",className:"flex items-center justify-center w-7 h-7 rounded text-cc-muted hover:text-cc-fg hover:bg-cc-hover transition-colors cursor-pointer","aria-label":"Reload browser",title:"Reload",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M13.65 2.35a1 1 0 0 0-1.3 0L11 3.7A5.99 5.99 0 0 0 2 8a1 1 0 1 0 2 0 4 4 0 0 1 6.29-3.29L8.65 6.35a1 1 0 0 0 .7 1.7H13a1 1 0 0 0 1-1V3.4a1 1 0 0 0-.35-.7z M14 8a1 1 0 1 0-2 0 4 4 0 0 1-6.29 3.29l1.64-1.64a1 1 0 0 0-.7-1.7H3.05a1 1 0 0 0-1 1v3.65a1 1 0 0 0 1.7.7L5 11.7A5.99 5.99 0 0 0 14 8z"})})}),e.jsx("input",{type:"text",defaultValue:"http://localhost:3000",className:"flex-1 px-2 py-1 text-xs rounded bg-cc-bg border border-cc-border text-cc-fg placeholder:text-cc-muted focus:outline-none focus:border-cc-primary","aria-label":"Navigate URL",readOnly:!0}),e.jsx("button",{type:"button",className:"px-3 py-1 rounded text-xs font-medium bg-cc-primary text-white hover:bg-cc-primary-hover transition-colors cursor-pointer",children:"Go"})]}),e.jsx("div",{className:"flex-1 flex items-center justify-center text-xs text-cc-muted",children:"noVNC iframe would render here"})]})})]})}),e.jsx(d,{title:"Tool Activity",description:"Live execution bar and post-turn summary strip",children:e.jsxs("div",{className:"space-y-6",children:[e.jsx(s,{label:"ToolExecutionBar — 1 tool running",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(Q,{tools:[{toolName:"Bash",elapsedSeconds:3}]})})}),e.jsx(s,{label:"ToolExecutionBar — 3 tools running",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(Q,{tools:[{toolName:"Bash",elapsedSeconds:7},{toolName:"Read",elapsedSeconds:1},{toolName:"Edit",elapsedSeconds:4}]})})}),e.jsx(s,{label:"ToolExecutionBar — empty (renders nothing)",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded min-h-[24px]",children:e.jsx(Q,{tools:[]})})}),e.jsx(s,{label:"ToolTurnSummary — collapsed (3 tools, no errors)",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(X,{entries:ze})})}),e.jsx(s,{label:"ToolTurnSummary — collapsed (with error)",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(X,{entries:Fe})})}),e.jsx(s,{label:"ToolTurnSummary — collapsed (with running tool)",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(X,{entries:He})})})]})})]})]})}function S(t){return{id:`mock-${Math.random().toString(36).slice(2,8)}`,model:"claude-sonnet-4-20250514",cwd:"/Users/dev/project",gitBranch:"main",isContainerized:!1,gitAhead:0,gitBehind:0,linesAdded:0,linesRemoved:0,isConnected:!1,isReconnecting:!1,status:null,sdkState:null,createdAt:Date.now(),archived:!1,backendType:"claude",repoRoot:"/Users/dev/project",permCount:0,...t}}const Xe={current:null},C={onSelect:()=>{},onStartRename:()=>{},onArchive:t=>t.stopPropagation(),onUnarchive:t=>t.stopPropagation(),onDelete:t=>t.stopPropagation(),onClearRecentlyRenamed:()=>{},editingSessionId:null,editingName:"",setEditingName:()=>{},onConfirmRename:()=>{},onCancelRename:()=>{},editInputRef:Xe};function Ze(){return e.jsxs("div",{className:"space-y-4 max-w-sm",children:[e.jsx(s,{label:"Running — Claude Code",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isConnected:!0,status:"running",backendType:"claude"}),isActive:!1,sessionName:"Refactor auth module",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Running — Codex + Docker",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isConnected:!0,status:"running",backendType:"codex",isContainerized:!0}),isActive:!1,sessionName:"Add payment flow",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Awaiting Input — 2 permissions pending",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isConnected:!0,status:"running",backendType:"claude",permCount:2}),isActive:!1,sessionName:"Fix login bug",permCount:2,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Idle — connected, not running",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isConnected:!0,status:"idle",backendType:"claude"}),isActive:!1,sessionName:"Review PR #42",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Reconnecting — CLI restarting",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isReconnecting:!0}),isActive:!1,sessionName:"Debug auth flow",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Exited — session stopped",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({sdkState:"exited",backendType:"codex"}),isActive:!1,sessionName:"Deploy to staging",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Active (selected session)",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isConnected:!0,status:"running",backendType:"claude",isContainerized:!0}),isActive:!0,sessionName:"Build new dashboard",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Archived session",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({archived:!0,backendType:"claude"}),isActive:!1,isArchived:!0,sessionName:"Old migration script",permCount:0,isRecentlyRenamed:!1,...C})})})]})}function d({title:t,description:c,children:n}){return e.jsxs("section",{children:[e.jsxs("div",{className:"mb-4",children:[e.jsx("h2",{className:"text-base font-semibold text-cc-fg",children:t}),e.jsx("p",{className:"text-xs text-cc-muted mt-0.5",children:c})]}),n]})}function s({label:t,children:c}){return e.jsxs("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsx("div",{className:"px-3 py-1.5 bg-cc-hover/50 border-b border-cc-border",children:e.jsx("span",{className:"text-[10px] text-cc-muted font-mono-code uppercase tracking-wider",children:t})}),e.jsx("div",{className:"p-4",children:c})]})}function es(){var x;const t=[{id:"host",label:"Terminal",cwd:"/Users/demo/project"},{id:"docker",label:"Docker",cwd:"/workspace"}],[c,n]=u.useState("host"),[i,r]=u.useState("bottom");return e.jsxs("div",{className:"rounded-xl border border-cc-border bg-cc-card overflow-hidden",children:[e.jsxs("div",{className:"flex items-center gap-1.5 px-2 py-1.5 border-b border-cc-border bg-cc-sidebar",children:[e.jsx("div",{className:"flex items-center gap-0.5 bg-cc-hover rounded-md p-0.5 mr-1",children:["top","right","bottom","left"].map(l=>{var h;return e.jsxs("button",{onClick:()=>r(l),className:`px-2 py-1 rounded text-[10px] font-medium cursor-pointer ${i===l?"bg-cc-card text-cc-fg":"text-cc-muted"}`,children:[(h=l[0])==null?void 0:h.toUpperCase(),l.slice(1)]},l)})}),t.map(l=>e.jsx("button",{onClick:()=>n(l.id),className:`px-2 py-1 rounded-md text-[11px] font-medium border cursor-pointer ${c===l.id?"text-cc-fg bg-cc-card border-cc-border":"text-cc-muted border-transparent hover:bg-cc-hover"}`,children:l.label},l.id)),e.jsx("span",{className:"text-[11px] font-mono-code text-cc-muted truncate ml-1",children:(x=t.find(l=>l.id===c))==null?void 0:x.cwd})]}),e.jsx("div",{className:"h-32 p-3 bg-cc-bg",children:e.jsxs("div",{className:`h-full min-h-0 rounded-lg border border-cc-border bg-cc-card flex ${i==="left"||i==="right"?"flex-row":"flex-col"}`,children:[(i==="top"||i==="left")&&e.jsx("div",{className:`${i==="left"?"w-2/5 border-r":"h-2/5 border-b"} border-cc-border bg-cc-sidebar/40 flex items-center justify-center text-[10px] text-cc-muted font-mono-code`,children:"Terminal docked"}),e.jsx("div",{className:"flex-1 min-h-0 flex items-center justify-center text-xs text-cc-muted",children:"Session content"}),(i==="right"||i==="bottom")&&e.jsx("div",{className:`${i==="right"?"w-2/5 border-l":"h-2/5 border-t"} border-cc-border bg-cc-sidebar/40 flex items-center justify-center text-[10px] text-cc-muted font-mono-code`,children:"Terminal docked"})]})})]})}function Z({toolName:t,items:c}){const[n,i]=u.useState(!1),r=we(t),x=fe(t),l=c.length;if(l===1){const h=c[0];return e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-6 h-6 rounded-full bg-cc-primary/10 flex items-center justify-center shrink-0 mt-0.5",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3 h-3 text-cc-primary",children:e.jsx("circle",{cx:"8",cy:"8",r:"3"})})}),e.jsx("div",{className:"flex-1 min-w-0",children:e.jsxs("div",{className:"border border-cc-border rounded-[10px] overflow-hidden bg-cc-card",children:[e.jsxs("button",{onClick:()=>i(!n),className:"w-full flex items-center gap-2.5 px-3 py-2 text-left hover:bg-cc-hover transition-colors cursor-pointer",children:[e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:`w-3 h-3 text-cc-muted transition-transform shrink-0 ${n?"rotate-90":""}`,children:e.jsx("path",{d:"M6 4l4 4-4 4"})}),e.jsx(se,{type:r}),e.jsx("span",{className:"text-xs font-medium text-cc-fg",children:x}),e.jsx("span",{className:"text-xs text-cc-muted truncate flex-1 font-mono-code",children:te(h.name,h.input)})]}),n&&e.jsx("div",{className:"px-3 pb-3 pt-0 border-t border-cc-border mt-0",children:e.jsx("pre",{className:"mt-2 text-[11px] text-cc-muted font-mono-code whitespace-pre-wrap leading-relaxed max-h-60 overflow-y-auto",children:JSON.stringify(h.input,null,2)})})]})})]})}return e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-6 h-6 rounded-full bg-cc-primary/10 flex items-center justify-center shrink-0 mt-0.5",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3 h-3 text-cc-primary",children:e.jsx("circle",{cx:"8",cy:"8",r:"3"})})}),e.jsx("div",{className:"flex-1 min-w-0",children:e.jsxs("div",{className:"border border-cc-border rounded-[10px] overflow-hidden bg-cc-card",children:[e.jsxs("button",{onClick:()=>i(!n),className:"w-full flex items-center gap-2.5 px-3 py-2 text-left hover:bg-cc-hover transition-colors cursor-pointer",children:[e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:`w-3 h-3 text-cc-muted transition-transform shrink-0 ${n?"rotate-90":""}`,children:e.jsx("path",{d:"M6 4l4 4-4 4"})}),e.jsx(se,{type:r}),e.jsx("span",{className:"text-xs font-medium text-cc-fg",children:x}),e.jsx("span",{className:"text-[10px] text-cc-muted bg-cc-hover rounded-full px-1.5 py-0.5 tabular-nums font-medium",children:l})]}),n&&e.jsx("div",{className:"border-t border-cc-border px-3 py-1.5",children:c.map((h,o)=>{const m=te(h.name,h.input);return e.jsxs("div",{className:"flex items-center gap-2 py-1 text-xs text-cc-muted font-mono-code truncate",children:[e.jsx("span",{className:"w-1 h-1 rounded-full bg-cc-muted/40 shrink-0"}),e.jsx("span",{className:"truncate",children:m||JSON.stringify(h.input).slice(0,80)})]},h.id||o)})})]})})]})}function ss({description:t,agentType:c,backend:n="codex",status:i,senderThreadId:r,receiverThreadIds:x=[],receiverCount:l,items:h}){var N;const[o,m]=u.useState(!0),a=u.useMemo(()=>{if(!i)return null;const p=i.trim().toLowerCase();return p?p==="completed"?{label:"completed",className:"text-green-600 bg-green-500/15",summary:"completed"}:p==="failed"||p==="error"||p==="errored"?{label:"failed",className:"text-cc-error bg-cc-error/10",summary:"failed"}:p==="pending"||p==="pendinginit"||p==="pending_init"?{label:"pending",className:"text-amber-700 bg-amber-500/15",summary:"pending"}:p==="running"||p==="inprogress"||p==="in_progress"||p==="started"?{label:"running",className:"text-blue-600 bg-blue-500/15",summary:"running"}:{label:i,className:"text-amber-700 bg-amber-500/15",summary:"running"}:null},[i]),y=l!==void 0?l:h.length;return e.jsxs("div",{className:"ml-9 border-l-2 border-cc-primary/20 pl-4",children:[e.jsxs("button",{onClick:()=>m(!o),className:"w-full flex items-center gap-2 py-1.5 text-left cursor-pointer mb-1",children:[e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:`w-3 h-3 text-cc-muted transition-transform shrink-0 ${o?"rotate-90":""}`,children:e.jsx("path",{d:"M6 4l4 4-4 4"})}),e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5 text-cc-primary shrink-0",children:[e.jsx("circle",{cx:"8",cy:"8",r:"5"}),e.jsx("path",{d:"M8 5v3l2 1",strokeLinecap:"round"})]}),e.jsx("span",{className:"text-xs font-medium text-cc-fg truncate",children:t}),c&&e.jsx("span",{className:"text-[10px] text-cc-muted bg-cc-hover rounded-full px-1.5 py-0.5 shrink-0",children:c}),e.jsx("span",{className:"text-[10px] text-cc-muted bg-cc-hover rounded-full px-1.5 py-0.5 shrink-0",children:n==="codex"?"Codex":"Claude"}),a&&e.jsx("span",{className:`text-[10px] rounded-full px-1.5 py-0.5 shrink-0 ${a.className}`,children:a.label}),l!==void 0&&e.jsxs("span",{className:"text-[10px] text-cc-muted bg-cc-hover rounded-full px-1.5 py-0.5 shrink-0",children:[l," agent",l===1?"":"s"]}),e.jsx("span",{className:"text-[10px] text-cc-muted bg-cc-hover rounded-full px-1.5 py-0.5 tabular-nums shrink-0 ml-auto",children:h.length})]}),o&&e.jsxs("div",{className:"space-y-3 pb-2",children:[(a||r||x.length>0)&&e.jsxs("div",{className:"rounded-lg border border-cc-border bg-cc-card px-2.5 py-2 space-y-1.5",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-1.5 text-[10px]",children:[a&&e.jsxs("span",{className:`rounded-full px-1.5 py-0.5 ${a.className}`,children:[y," ",a.summary]}),r&&e.jsxs("span",{className:"rounded-full px-1.5 py-0.5 text-cc-muted bg-cc-hover font-mono-code",children:["sender: ",r]}),x.length>0&&e.jsxs("span",{className:"rounded-full px-1.5 py-0.5 text-cc-muted bg-cc-hover",children:["receivers: ",x.length]})]}),x.length>0&&e.jsx("div",{className:"flex flex-wrap gap-1",children:x.map(p=>e.jsx("span",{className:"text-[10px] rounded-full px-1.5 py-0.5 text-cc-muted bg-cc-hover font-mono-code",children:p},p))})]}),e.jsx(Z,{toolName:((N=h[0])==null?void 0:N.name)||"Grep",items:h})]})]})}const E="codex-playground-demo";function ts(){return u.useEffect(()=>{const t=j.getState(),c=t.sessions.get(E);return t.addSession({session_id:E,backend_type:"codex",model:"o3",cwd:"/Users/demo/project",tools:[],permissionMode:"bypassPermissions",claude_code_version:"0.1.0",mcp_servers:[],agents:[],slash_commands:[],skills:[],total_cost_usd:0,num_turns:8,context_used_percent:45,is_compacting:!1,git_branch:"main",is_worktree:!1,is_containerized:!1,repo_root:"/Users/demo/project",git_ahead:0,git_behind:0,total_lines_added:0,total_lines_removed:0,codex_rate_limits:{primary:{usedPercent:62,windowDurationMins:300,resetsAt:Date.now()+2*36e5},secondary:{usedPercent:18,windowDurationMins:10080,resetsAt:Date.now()+5*864e5}},codex_token_details:{inputTokens:84230,outputTokens:12450,cachedInputTokens:41200,reasoningOutputTokens:8900,modelContextWindow:2e5}}),()=>{j.setState(n=>{const i=new Map(n.sessions);return c?i.set(E,c):i.delete(E),{sessions:i}})}},[]),e.jsxs("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsx(he,{sessionId:E}),e.jsx(ge,{sessionId:E})]})}function O({updateInfo:t}){return u.useEffect(()=>{const c=j.getState().updateInfo,n=j.getState().updateDismissedVersion;return j.getState().setUpdateInfo(t),n&&j.setState({updateDismissedVersion:null}),()=>{j.getState().setUpdateInfo(c),n&&j.setState({updateDismissedVersion:n})}},[t]),e.jsx(be,{})}function ns(){const[t,c]=u.useState(!1),[n,i]=u.useState("/tmp");return u.useEffect(()=>{je.getHome().then(r=>i(r.cwd)).catch(()=>{})},[]),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("button",{onClick:()=>c(!0),className:"flex items-center gap-2 px-3 py-2 rounded-lg bg-cc-hover border border-cc-border hover:bg-cc-active transition-colors cursor-pointer",children:[e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-4 h-4 text-cc-primary",children:e.jsx("path",{d:"M4 1.5a.5.5 0 01.5-.5h7a.5.5 0 01.354.146l2 2A.5.5 0 0114 3.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-13zm1 .5v12h8V4h-1.5a.5.5 0 01-.5-.5V2H5zm6 0v1h1l-1-1zM6.5 7a.5.5 0 000 1h5a.5.5 0 000-1h-5zm0 2a.5.5 0 000 1h5a.5.5 0 000-1h-5zm0 2a.5.5 0 000 1h3a.5.5 0 000-1h-3z"})}),e.jsx("span",{className:"text-xs font-medium text-cc-fg",children:"Edit CLAUDE.md"})]}),e.jsx("span",{className:"text-[11px] text-cc-muted",children:"Click to open the editor modal (uses server working directory)"}),e.jsx(ve,{cwd:n,open:t,onClose:()=>c(!1)})]})}function rs({server:t}){var x;const[c,n]=u.useState(!1),i={connected:{label:"Connected",cls:"text-cc-success bg-cc-success/10",dot:"bg-cc-success"},connecting:{label:"Connecting",cls:"text-cc-warning bg-cc-warning/10",dot:"bg-cc-warning animate-pulse"},failed:{label:"Failed",cls:"text-cc-error bg-cc-error/10",dot:"bg-cc-error"},disabled:{label:"Disabled",cls:"text-cc-muted bg-cc-hover",dot:"bg-cc-muted opacity-40"}},r=i[t.status]||i.disabled;return e.jsxs("div",{className:"rounded-lg border border-cc-border bg-cc-bg",children:[e.jsxs("div",{className:"flex items-center gap-2 px-2.5 py-2",children:[e.jsx("span",{className:`w-1.5 h-1.5 rounded-full shrink-0 ${r.dot}`}),e.jsx("button",{onClick:()=>n(!c),className:"flex-1 min-w-0 text-left cursor-pointer",children:e.jsx("span",{className:"text-[12px] font-medium text-cc-fg truncate block",children:t.name})}),e.jsx("span",{className:`text-[9px] font-medium px-1.5 rounded-full leading-[16px] shrink-0 ${r.cls}`,children:r.label})]}),c&&e.jsxs("div",{className:"px-2.5 pb-2.5 space-y-1.5 border-t border-cc-border pt-2",children:[e.jsxs("div",{className:"text-[11px] text-cc-muted space-y-0.5",children:[e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("span",{className:"text-cc-muted/60",children:"Type:"}),e.jsx("span",{children:t.config.type})]}),t.config.command&&e.jsxs("div",{className:"flex items-start gap-1",children:[e.jsx("span",{className:"text-cc-muted/60 shrink-0",children:"Cmd:"}),e.jsxs("span",{className:"font-mono text-[10px] break-all",children:[t.config.command,(x=t.config.args)!=null&&x.length?` ${t.config.args.join(" ")}`:""]})]}),t.config.url&&e.jsxs("div",{className:"flex items-start gap-1",children:[e.jsx("span",{className:"text-cc-muted/60 shrink-0",children:"URL:"}),e.jsx("span",{className:"font-mono text-[10px] break-all",children:t.config.url})]}),e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("span",{className:"text-cc-muted/60",children:"Scope:"}),e.jsx("span",{children:t.scope})]})]}),t.error&&e.jsx("div",{className:"text-[11px] text-cc-error bg-cc-error/5 rounded px-2 py-1",children:t.error}),t.tools&&t.tools.length>0&&e.jsxs("div",{className:"space-y-1",children:[e.jsxs("span",{className:"text-[10px] text-cc-muted uppercase tracking-wider",children:["Tools (",t.tools.length,")"]}),e.jsx("div",{className:"flex flex-wrap gap-1",children:t.tools.map(l=>e.jsx("span",{className:"text-[10px] font-mono px-1.5 py-0.5 rounded bg-cc-hover text-cc-fg",children:l.name},l.name))})]})]})]})}function as({task:t}){const c=t.status==="completed",n=t.status==="in_progress";return e.jsxs("div",{className:`px-2.5 py-2 rounded-lg ${c?"opacity-50":""}`,children:[e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx("span",{className:"shrink-0 flex items-center justify-center w-4 h-4 mt-px",children:n?e.jsx("svg",{className:"w-4 h-4 text-cc-primary animate-spin",viewBox:"0 0 16 16",fill:"none",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5",strokeDasharray:"28",strokeDashoffset:"8",strokeLinecap:"round"})}):c?e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-4 h-4 text-cc-success",children:e.jsx("path",{fillRule:"evenodd",d:"M8 15A7 7 0 108 1a7 7 0 000 14zm3.354-9.354a.5.5 0 00-.708-.708L7 8.586 5.354 6.94a.5.5 0 10-.708.708l2 2a.5.5 0 00.708 0l4-4z",clipRule:"evenodd"})}):e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-4 h-4 text-cc-muted",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5"})})}),e.jsx("span",{className:`text-[13px] leading-snug flex-1 ${c?"text-cc-muted line-through":"text-cc-fg"}`,children:t.subject})]}),n&&t.activeForm&&e.jsx("p",{className:"mt-1 ml-6 text-[11px] text-cc-muted italic truncate",children:t.activeForm}),t.blockedBy&&t.blockedBy.length>0&&e.jsxs("p",{className:"mt-1 ml-6 text-[11px] text-cc-muted flex items-center gap-1",children:[e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-3 h-3 shrink-0",children:[e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5"}),e.jsx("path",{d:"M5 8h6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}),e.jsxs("span",{children:["blocked by ",t.blockedBy.map(i=>`#${i}`).join(", ")]})]})]})}const R="ai-validation-playground";function de({enabled:t}){return u.useEffect(()=>{const c=j.getState(),n=c.sessions.get(R);return c.updateSession(R,{session_id:R,model:"claude-sonnet-4-20250514",cwd:"/workspace",tools:[],permissionMode:"default",claude_code_version:"1.0.0",mcp_servers:[],agents:[],slash_commands:[],skills:[],total_cost_usd:0,num_turns:0,context_used_percent:0,is_compacting:!1,git_branch:"main",is_worktree:!1,is_containerized:!1,repo_root:"/workspace",git_ahead:0,git_behind:0,total_lines_added:0,total_lines_removed:0,aiValidationEnabled:t,aiValidationAutoApprove:!0,aiValidationAutoDeny:!1,...n}),()=>{n&&j.getState().updateSession(R,n)}},[t]),u.useEffect(()=>{j.getState().setSessionAiValidation(R,{aiValidationEnabled:t})},[t]),e.jsxs("div",{className:"flex items-center gap-2 p-2",children:[e.jsx(ue,{sessionId:R}),e.jsx("span",{className:"text-xs text-cc-muted",children:"Click to toggle"})]})}function is(){const[t,c]=u.useState(!0),[n,i]=u.useState("running"),r=[{name:"Explore codebase",agentType:"Explore",status:n,startedAt:Date.now()-12e3,completedAt:n==="completed"?Date.now():void 0},{name:"Research auth patterns",agentType:"general-purpose",status:"completed",startedAt:Date.now()-45e3,completedAt:Date.now()-3e3}],x=[{id:"1",subject:"Implement ActivityTray component",description:"",status:"completed"},{id:"2",subject:"Wire into ChatView layout",description:"",status:"completed"},{id:"3",subject:"Add background agent detection",description:"",status:"in_progress",activeForm:"Detecting Agent tool_use"},{id:"4",subject:"Write tests",description:"",status:"pending"}],l=r.filter(a=>a.status==="running").length,h=x.filter(a=>a.status==="completed").length,o=l>0||x.some(a=>a.status==="in_progress");function m(a,y){const N=Math.round(((y||Date.now())-a)/1e3);if(N<60)return`${N}s`;const p=Math.floor(N/60),D=N%60;return`${p}m${D>0?` ${D}s`:""}`}return e.jsxs("div",{className:"relative h-48 bg-cc-bg rounded-lg border border-cc-border/30 overflow-hidden",children:[e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx("span",{className:"text-[10px] text-cc-muted/20",children:"Chat area"})}),e.jsx("div",{className:"absolute top-2 left-2 z-30",children:e.jsxs("button",{type:"button",onClick:()=>i(a=>a==="running"?"completed":"running"),className:"text-[10px] px-2 py-1 rounded bg-cc-surface border border-cc-border text-cc-muted hover:text-cc-fg cursor-pointer",children:["Toggle agent: ",n]})}),e.jsxs("div",{className:"absolute bottom-3 right-3 z-20",children:[t&&e.jsxs("div",{className:"mb-1.5 w-72 max-w-[calc(100vw-2rem)] max-h-52 overflow-y-auto rounded-xl border border-cc-border/60 bg-cc-surface/95 backdrop-blur-xl shadow-lg shadow-black/20 animate-[fadeSlideIn_0.2s_ease-out]",children:[e.jsxs("div",{className:"flex items-center justify-between px-3 py-2 border-b border-cc-border/40",children:[e.jsx("span",{className:"text-[11px] font-semibold text-cc-fg/70 uppercase tracking-wider",role:"heading","aria-level":3,children:"Activity"}),e.jsx("button",{type:"button",onClick:()=>c(!1),className:"flex items-center justify-center w-7 h-7 -mr-1 rounded-md text-cc-muted/40 hover:text-cc-muted/70 hover:bg-cc-hover/50 transition-colors cursor-pointer","aria-label":"Close activity tray",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3 h-3",children:e.jsx("path",{d:"M4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 01.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z"})})})]}),e.jsxs("div",{className:"py-1",children:[e.jsx("div",{className:"px-3 py-1",role:"heading","aria-level":4,children:e.jsx("span",{className:"text-[9px] text-cc-muted/40 uppercase tracking-widest font-semibold",children:"Agents"})}),r.map((a,y)=>e.jsxs("div",{className:`flex items-center gap-2 px-2.5 min-h-[36px] transition-opacity duration-300 ${a.status!=="running"?"opacity-60":""}`,children:[a.status==="running"?e.jsxs("span",{className:"relative flex h-1.5 w-1.5 shrink-0",children:[e.jsx("span",{className:"absolute inline-flex h-full w-full rounded-full bg-cc-warning opacity-75 animate-ping"}),e.jsx("span",{className:"relative inline-flex rounded-full h-1.5 w-1.5 bg-cc-warning"})]}):e.jsx("span",{className:"h-1.5 w-1.5 rounded-full bg-cc-success shrink-0"}),e.jsx("span",{className:"text-[11px] text-cc-fg/80 truncate flex-1 font-medium",children:a.name}),e.jsx("span",{className:"text-[9px] text-cc-muted/50 uppercase tracking-wider shrink-0",children:a.agentType}),e.jsx("span",{className:"text-[10px] text-cc-muted/50 tabular-nums font-mono-code",children:m(a.startedAt,a.completedAt)})]},y))]}),e.jsx("div",{className:"border-t border-cc-border/30 mx-2",role:"separator"}),e.jsxs("div",{className:"py-1",children:[e.jsx("div",{className:"px-3 py-1",role:"heading","aria-level":4,children:e.jsx("span",{className:"text-[9px] text-cc-muted/40 uppercase tracking-widest font-semibold",children:"Tasks"})}),x.map(a=>e.jsxs("div",{className:`flex items-center gap-2 px-2.5 min-h-[32px] transition-opacity duration-300 ${a.status==="completed"?"opacity-40":""}`,children:[e.jsx("span",{className:"shrink-0 flex items-center justify-center w-3.5 h-3.5",children:a.status==="in_progress"?e.jsx("svg",{className:"w-3.5 h-3.5 text-cc-primary animate-spin",viewBox:"0 0 16 16",fill:"none",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5",strokeDasharray:"28",strokeDashoffset:"8",strokeLinecap:"round"})}):a.status==="completed"?e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5 text-cc-success",children:e.jsx("path",{fillRule:"evenodd",d:"M8 15A7 7 0 108 1a7 7 0 000 14zm3.354-9.354a.5.5 0 00-.708-.708L7 8.586 5.354 6.94a.5.5 0 10-.708.708l2 2a.5.5 0 00.708 0l4-4z",clipRule:"evenodd"})}):e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-3.5 h-3.5 text-cc-muted/40",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5"})})}),e.jsx("span",{className:`text-[11px] leading-snug flex-1 truncate ${a.status==="completed"?"text-cc-muted line-through":"text-cc-fg/80"}`,children:a.subject}),a.status==="in_progress"&&a.activeForm&&e.jsx("span",{className:"text-[10px] text-cc-muted/50 italic truncate max-w-[120px] shrink-0",children:a.activeForm})]},a.id))]})]}),e.jsxs("button",{type:"button",onClick:()=>c(!t),"aria-expanded":t,className:`flex items-center gap-2 px-3 min-h-[36px] rounded-full border border-cc-border/50 bg-cc-surface/90 backdrop-blur-lg shadow-md shadow-black/15 hover:bg-cc-hover/80 hover:border-cc-border/70 transition-all duration-200 cursor-pointer ${t?"ring-1 ring-cc-primary/30":""}`,children:[o?e.jsxs("span",{className:"relative flex h-2 w-2",children:[e.jsx("span",{className:"absolute inline-flex h-full w-full rounded-full bg-cc-warning opacity-75 animate-ping"}),e.jsx("span",{className:"relative inline-flex rounded-full h-2 w-2 bg-cc-warning"})]}):e.jsx("span",{className:"h-2 w-2 rounded-full bg-cc-success"}),l>0?e.jsxs("span",{className:"text-[11px] text-cc-fg/70 font-medium tabular-nums",children:[l," agent",l!==1?"s":""]}):e.jsxs("span",{className:"text-[11px] text-cc-fg/70 font-medium tabular-nums",children:[r.length," done"]}),e.jsx("span",{className:"w-0.5 h-0.5 rounded-full bg-cc-muted/30"}),e.jsxs("span",{className:"text-[11px] text-cc-fg/70 tabular-nums",children:[h,"/",x.length]}),e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:`w-2.5 h-2.5 text-cc-muted/40 transition-transform duration-200 ${t?"rotate-180":""}`,"aria-hidden":!0,children:e.jsx("path",{d:"M4 6l4 4 4-4"})})]})]})]})}export{os as Playground};
+npm ERR! path /app/package.json`})})]})}),e.jsx(d,{title:"Session Launch Overlay",description:"Full-screen overlay shown during session creation, replacing the inline progress list",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"In progress (container session)",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(L,{steps:[{step:"resolving_env",label:"Environment resolved",status:"done"},{step:"pulling_image",label:"Pulling Docker image...",status:"done"},{step:"creating_container",label:"Starting container...",status:"in_progress"},{step:"launching_cli",label:"Launching Claude Code...",status:"in_progress"}],backend:"claude",onCancel:()=>{}})})}),e.jsx(s,{label:"All steps done (launching)",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(L,{steps:[{step:"resolving_env",label:"Environment resolved",status:"done"},{step:"fetching_git",label:"Fetch complete",status:"done"},{step:"creating_worktree",label:"Worktree created",status:"done"},{step:"launching_cli",label:"CLI launched",status:"done"}],backend:"claude"})})}),e.jsx(s,{label:"Error state",children:e.jsx("div",{className:"relative h-[400px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(L,{steps:[{step:"resolving_env",label:"Environment resolved",status:"done"},{step:"pulling_image",label:"Pulling Docker image...",status:"error"}],error:"Failed to pull docker.io/stangirard/the-companion:latest — connection timed out after 30s",backend:"claude",onCancel:()=>{}})})}),e.jsx(s,{label:"Codex backend",children:e.jsx("div",{className:"relative h-[320px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(L,{steps:[{step:"resolving_env",label:"Environment resolved",status:"done"},{step:"launching_cli",label:"Launching Codex...",status:"in_progress"}],backend:"codex",onCancel:()=>{}})})})]})}),e.jsx(d,{title:"Update Overlay",description:"Full-screen overlay shown when auto-update is in progress, polls server and reloads when ready",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Installing phase",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(U,{phase:"installing"})})}),e.jsx(s,{label:"Restarting phase",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(U,{phase:"restarting"})})}),e.jsx(s,{label:"Waiting for server",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(U,{phase:"waiting"})})}),e.jsx(s,{label:"Update complete",children:e.jsx("div",{className:"relative h-[360px] bg-cc-bg rounded-lg overflow-hidden border border-cc-border",children:e.jsx(U,{phase:"ready"})})})]})}),e.jsx(d,{title:"Docker Update Dialog",description:"Post-update dialog asking whether to also update the sandbox Docker image",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(s,{label:"Prompt phase",children:e.jsx(B,{phase:"prompt"})}),e.jsx(s,{label:"Pulling phase",children:e.jsx(B,{phase:"pulling"})}),e.jsx(s,{label:"Done phase",children:e.jsx(B,{phase:"done"})}),e.jsx(s,{label:"Error phase",children:e.jsx(B,{phase:"error"})})]})}),e.jsx(d,{title:"CLAUDE.md Editor",description:"Modal for viewing and editing project CLAUDE.md instructions",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Open editor button (from TopBar)",children:e.jsx(as,{})}),e.jsx(s,{label:"Terminal quick tabs (from TopBar)",children:e.jsx(ts,{})})]})}),e.jsx(d,{title:"Session Items",description:"Sidebar session rows — status dot, backend badge, Docker indicator, archive on hover",children:e.jsx(ss,{})}),e.jsx(d,{title:"Browser Preview",description:"Browser preview panel — host mode (HTTP proxy) and container mode (noVNC) — loading, error, and active states",children:e.jsxs("div",{className:"space-y-4 max-w-3xl",children:[e.jsx(s,{label:"Loading state",children:e.jsxs("div",{className:"h-48 flex flex-col items-center justify-center gap-3 p-4 bg-cc-bg rounded border border-cc-border",children:[e.jsx("div",{className:"w-5 h-5 border-2 border-cc-primary border-t-transparent rounded-full animate-spin"}),e.jsx("div",{className:"text-sm text-cc-muted",children:"Starting browser preview..."})]})}),e.jsx(s,{label:"Error state",children:e.jsx("div",{className:"h-48 flex items-center justify-center p-4 bg-cc-bg rounded border border-cc-border",children:e.jsx("div",{className:"px-4 py-3 rounded-lg bg-cc-error/10 border border-cc-error/30 text-sm text-cc-error max-w-md text-center",children:"Browser preview unavailable."})})}),e.jsx(s,{label:"Host mode (proxy — before navigation)",children:e.jsxs("div",{className:"h-48 flex flex-col bg-cc-bg rounded border border-cc-border overflow-hidden",children:[e.jsxs("div",{className:"shrink-0 px-3 py-2 border-b border-cc-border flex items-center gap-2",children:[e.jsx("button",{type:"button",className:"flex items-center justify-center w-7 h-7 rounded text-cc-muted hover:text-cc-fg hover:bg-cc-hover transition-colors cursor-pointer","aria-label":"Reload browser",title:"Reload",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M13.65 2.35a1 1 0 0 0-1.3 0L11 3.7A5.99 5.99 0 0 0 2 8a1 1 0 1 0 2 0 4 4 0 0 1 6.29-3.29L8.65 6.35a1 1 0 0 0 .7 1.7H13a1 1 0 0 0 1-1V3.4a1 1 0 0 0-.35-.7z M14 8a1 1 0 1 0-2 0 4 4 0 0 1-6.29 3.29l1.64-1.64a1 1 0 0 0-.7-1.7H3.05a1 1 0 0 0-1 1v3.65a1 1 0 0 0 1.7.7L5 11.7A5.99 5.99 0 0 0 14 8z"})})}),e.jsx("input",{type:"text",defaultValue:"http://localhost:3000",className:"flex-1 px-2 py-1 text-xs rounded bg-cc-bg border border-cc-border text-cc-fg placeholder:text-cc-muted focus:outline-none focus:border-cc-primary","aria-label":"Navigate URL",readOnly:!0}),e.jsx("button",{type:"button",className:"px-3 py-1 rounded text-xs font-medium bg-cc-primary text-white hover:bg-cc-primary-hover transition-colors cursor-pointer",children:"Go"})]}),e.jsx("div",{className:"flex-1 flex items-center justify-center text-xs text-cc-muted",children:"Enter a URL and click Go to preview."})]})}),e.jsx(s,{label:"Container mode (noVNC — active)",children:e.jsxs("div",{className:"h-48 flex flex-col bg-cc-bg rounded border border-cc-border overflow-hidden",children:[e.jsxs("div",{className:"shrink-0 px-3 py-2 border-b border-cc-border flex items-center gap-2",children:[e.jsx("button",{type:"button",className:"flex items-center justify-center w-7 h-7 rounded text-cc-muted hover:text-cc-fg hover:bg-cc-hover transition-colors cursor-pointer","aria-label":"Reload browser",title:"Reload",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M13.65 2.35a1 1 0 0 0-1.3 0L11 3.7A5.99 5.99 0 0 0 2 8a1 1 0 1 0 2 0 4 4 0 0 1 6.29-3.29L8.65 6.35a1 1 0 0 0 .7 1.7H13a1 1 0 0 0 1-1V3.4a1 1 0 0 0-.35-.7z M14 8a1 1 0 1 0-2 0 4 4 0 0 1-6.29 3.29l1.64-1.64a1 1 0 0 0-.7-1.7H3.05a1 1 0 0 0-1 1v3.65a1 1 0 0 0 1.7.7L5 11.7A5.99 5.99 0 0 0 14 8z"})})}),e.jsx("input",{type:"text",defaultValue:"http://localhost:3000",className:"flex-1 px-2 py-1 text-xs rounded bg-cc-bg border border-cc-border text-cc-fg placeholder:text-cc-muted focus:outline-none focus:border-cc-primary","aria-label":"Navigate URL",readOnly:!0}),e.jsx("button",{type:"button",className:"px-3 py-1 rounded text-xs font-medium bg-cc-primary text-white hover:bg-cc-primary-hover transition-colors cursor-pointer",children:"Go"})]}),e.jsx("div",{className:"flex-1 flex items-center justify-center text-xs text-cc-muted",children:"noVNC iframe would render here"})]})})]})}),e.jsx(d,{title:"Tool Activity",description:"Live execution bar and post-turn summary strip",children:e.jsxs("div",{className:"space-y-6",children:[e.jsx(s,{label:"ToolExecutionBar — 1 tool running",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(Q,{tools:[{toolName:"Bash",elapsedSeconds:3}]})})}),e.jsx(s,{label:"ToolExecutionBar — 3 tools running",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(Q,{tools:[{toolName:"Bash",elapsedSeconds:7},{toolName:"Read",elapsedSeconds:1},{toolName:"Edit",elapsedSeconds:4}]})})}),e.jsx(s,{label:"ToolExecutionBar — empty (renders nothing)",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded min-h-[24px]",children:e.jsx(Q,{tools:[]})})}),e.jsx(s,{label:"ToolTurnSummary — collapsed (3 tools, no errors)",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(X,{entries:He})})}),e.jsx(s,{label:"ToolTurnSummary — collapsed (with error)",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(X,{entries:$e})})}),e.jsx(s,{label:"ToolTurnSummary — collapsed (with running tool)",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(X,{entries:qe})})})]})})]})]})}function S(t){return{id:`mock-${Math.random().toString(36).slice(2,8)}`,model:"claude-sonnet-4-20250514",cwd:"/Users/dev/project",gitBranch:"main",isContainerized:!1,gitAhead:0,gitBehind:0,linesAdded:0,linesRemoved:0,isConnected:!1,isReconnecting:!1,status:null,sdkState:null,createdAt:Date.now(),archived:!1,backendType:"claude",repoRoot:"/Users/dev/project",permCount:0,...t}}const es={current:null},C={onSelect:()=>{},onStartRename:()=>{},onArchive:t=>t.stopPropagation(),onUnarchive:t=>t.stopPropagation(),onDelete:t=>t.stopPropagation(),onClearRecentlyRenamed:()=>{},editingSessionId:null,editingName:"",setEditingName:()=>{},onConfirmRename:()=>{},onCancelRename:()=>{},editInputRef:es};function ss(){return e.jsxs("div",{className:"space-y-4 max-w-sm",children:[e.jsx(s,{label:"Running — Claude Code",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isConnected:!0,status:"running",backendType:"claude"}),isActive:!1,sessionName:"Refactor auth module",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Running — Codex + Docker",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isConnected:!0,status:"running",backendType:"codex",isContainerized:!0}),isActive:!1,sessionName:"Add payment flow",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Awaiting Input — 2 permissions pending",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isConnected:!0,status:"running",backendType:"claude",permCount:2}),isActive:!1,sessionName:"Fix login bug",permCount:2,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Idle — connected, not running",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isConnected:!0,status:"idle",backendType:"claude"}),isActive:!1,sessionName:"Review PR #42",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Reconnecting — CLI restarting",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isReconnecting:!0}),isActive:!1,sessionName:"Debug auth flow",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Exited — session stopped",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({sdkState:"exited",backendType:"codex"}),isActive:!1,sessionName:"Deploy to staging",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Active (selected session)",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({isConnected:!0,status:"running",backendType:"claude",isContainerized:!0}),isActive:!0,sessionName:"Build new dashboard",permCount:0,isRecentlyRenamed:!1,...C})})}),e.jsx(s,{label:"Archived session",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(_,{session:S({archived:!0,backendType:"claude"}),isActive:!1,isArchived:!0,sessionName:"Old migration script",permCount:0,isRecentlyRenamed:!1,...C})})})]})}function d({title:t,description:c,children:n}){return e.jsxs("section",{children:[e.jsxs("div",{className:"mb-4",children:[e.jsx("h2",{className:"text-base font-semibold text-cc-fg",children:t}),e.jsx("p",{className:"text-xs text-cc-muted mt-0.5",children:c})]}),n]})}function s({label:t,children:c}){return e.jsxs("div",{className:"border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsx("div",{className:"px-3 py-1.5 bg-cc-hover/50 border-b border-cc-border",children:e.jsx("span",{className:"text-[10px] text-cc-muted font-mono-code uppercase tracking-wider",children:t})}),e.jsx("div",{className:"p-4",children:c})]})}function ts(){var x;const t=[{id:"host",label:"Terminal",cwd:"/Users/demo/project"},{id:"docker",label:"Docker",cwd:"/workspace"}],[c,n]=u.useState("host"),[i,r]=u.useState("bottom");return e.jsxs("div",{className:"rounded-xl border border-cc-border bg-cc-card overflow-hidden",children:[e.jsxs("div",{className:"flex items-center gap-1.5 px-2 py-1.5 border-b border-cc-border bg-cc-sidebar",children:[e.jsx("div",{className:"flex items-center gap-0.5 bg-cc-hover rounded-md p-0.5 mr-1",children:["top","right","bottom","left"].map(l=>{var h;return e.jsxs("button",{onClick:()=>r(l),className:`px-2 py-1 rounded text-[10px] font-medium cursor-pointer ${i===l?"bg-cc-card text-cc-fg":"text-cc-muted"}`,children:[(h=l[0])==null?void 0:h.toUpperCase(),l.slice(1)]},l)})}),t.map(l=>e.jsx("button",{onClick:()=>n(l.id),className:`px-2 py-1 rounded-md text-[11px] font-medium border cursor-pointer ${c===l.id?"text-cc-fg bg-cc-card border-cc-border":"text-cc-muted border-transparent hover:bg-cc-hover"}`,children:l.label},l.id)),e.jsx("span",{className:"text-[11px] font-mono-code text-cc-muted truncate ml-1",children:(x=t.find(l=>l.id===c))==null?void 0:x.cwd})]}),e.jsx("div",{className:"h-32 p-3 bg-cc-bg",children:e.jsxs("div",{className:`h-full min-h-0 rounded-lg border border-cc-border bg-cc-card flex ${i==="left"||i==="right"?"flex-row":"flex-col"}`,children:[(i==="top"||i==="left")&&e.jsx("div",{className:`${i==="left"?"w-2/5 border-r":"h-2/5 border-b"} border-cc-border bg-cc-sidebar/40 flex items-center justify-center text-[10px] text-cc-muted font-mono-code`,children:"Terminal docked"}),e.jsx("div",{className:"flex-1 min-h-0 flex items-center justify-center text-xs text-cc-muted",children:"Session content"}),(i==="right"||i==="bottom")&&e.jsx("div",{className:`${i==="right"?"w-2/5 border-l":"h-2/5 border-t"} border-cc-border bg-cc-sidebar/40 flex items-center justify-center text-[10px] text-cc-muted font-mono-code`,children:"Terminal docked"})]})})]})}function Z({toolName:t,items:c}){const[n,i]=u.useState(!1),r=we(t),x=fe(t),l=c.length;if(l===1){const h=c[0];return e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-6 h-6 rounded-full bg-cc-primary/10 flex items-center justify-center shrink-0 mt-0.5",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3 h-3 text-cc-primary",children:e.jsx("circle",{cx:"8",cy:"8",r:"3"})})}),e.jsx("div",{className:"flex-1 min-w-0",children:e.jsxs("div",{className:"border border-cc-border rounded-[10px] overflow-hidden bg-cc-card",children:[e.jsxs("button",{onClick:()=>i(!n),className:"w-full flex items-center gap-2.5 px-3 py-2 text-left hover:bg-cc-hover transition-colors cursor-pointer",children:[e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:`w-3 h-3 text-cc-muted transition-transform shrink-0 ${n?"rotate-90":""}`,children:e.jsx("path",{d:"M6 4l4 4-4 4"})}),e.jsx(se,{type:r}),e.jsx("span",{className:"text-xs font-medium text-cc-fg",children:x}),e.jsx("span",{className:"text-xs text-cc-muted truncate flex-1 font-mono-code",children:te(h.name,h.input)})]}),n&&e.jsx("div",{className:"px-3 pb-3 pt-0 border-t border-cc-border mt-0",children:e.jsx("pre",{className:"mt-2 text-[11px] text-cc-muted font-mono-code whitespace-pre-wrap leading-relaxed max-h-60 overflow-y-auto",children:JSON.stringify(h.input,null,2)})})]})})]})}return e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-6 h-6 rounded-full bg-cc-primary/10 flex items-center justify-center shrink-0 mt-0.5",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3 h-3 text-cc-primary",children:e.jsx("circle",{cx:"8",cy:"8",r:"3"})})}),e.jsx("div",{className:"flex-1 min-w-0",children:e.jsxs("div",{className:"border border-cc-border rounded-[10px] overflow-hidden bg-cc-card",children:[e.jsxs("button",{onClick:()=>i(!n),className:"w-full flex items-center gap-2.5 px-3 py-2 text-left hover:bg-cc-hover transition-colors cursor-pointer",children:[e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:`w-3 h-3 text-cc-muted transition-transform shrink-0 ${n?"rotate-90":""}`,children:e.jsx("path",{d:"M6 4l4 4-4 4"})}),e.jsx(se,{type:r}),e.jsx("span",{className:"text-xs font-medium text-cc-fg",children:x}),e.jsx("span",{className:"text-[10px] text-cc-muted bg-cc-hover rounded-full px-1.5 py-0.5 tabular-nums font-medium",children:l})]}),n&&e.jsx("div",{className:"border-t border-cc-border px-3 py-1.5",children:c.map((h,o)=>{const m=te(h.name,h.input);return e.jsxs("div",{className:"flex items-center gap-2 py-1 text-xs text-cc-muted font-mono-code truncate",children:[e.jsx("span",{className:"w-1 h-1 rounded-full bg-cc-muted/40 shrink-0"}),e.jsx("span",{className:"truncate",children:m||JSON.stringify(h.input).slice(0,80)})]},h.id||o)})})]})})]})}function ns({description:t,agentType:c,backend:n="codex",status:i,senderThreadId:r,receiverThreadIds:x=[],receiverCount:l,items:h}){var N;const[o,m]=u.useState(!0),a=u.useMemo(()=>{if(!i)return null;const p=i.trim().toLowerCase();return p?p==="completed"?{label:"completed",className:"text-green-600 bg-green-500/15",summary:"completed"}:p==="failed"||p==="error"||p==="errored"?{label:"failed",className:"text-cc-error bg-cc-error/10",summary:"failed"}:p==="pending"||p==="pendinginit"||p==="pending_init"?{label:"pending",className:"text-amber-700 bg-amber-500/15",summary:"pending"}:p==="running"||p==="inprogress"||p==="in_progress"||p==="started"?{label:"running",className:"text-blue-600 bg-blue-500/15",summary:"running"}:{label:i,className:"text-amber-700 bg-amber-500/15",summary:"running"}:null},[i]),y=l!==void 0?l:h.length;return e.jsxs("div",{className:"ml-9 border-l-2 border-cc-primary/20 pl-4",children:[e.jsxs("button",{onClick:()=>m(!o),className:"w-full flex items-center gap-2 py-1.5 text-left cursor-pointer mb-1",children:[e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:`w-3 h-3 text-cc-muted transition-transform shrink-0 ${o?"rotate-90":""}`,children:e.jsx("path",{d:"M6 4l4 4-4 4"})}),e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5 text-cc-primary shrink-0",children:[e.jsx("circle",{cx:"8",cy:"8",r:"5"}),e.jsx("path",{d:"M8 5v3l2 1",strokeLinecap:"round"})]}),e.jsx("span",{className:"text-xs font-medium text-cc-fg truncate",children:t}),c&&e.jsx("span",{className:"text-[10px] text-cc-muted bg-cc-hover rounded-full px-1.5 py-0.5 shrink-0",children:c}),e.jsx("span",{className:"text-[10px] text-cc-muted bg-cc-hover rounded-full px-1.5 py-0.5 shrink-0",children:n==="codex"?"Codex":"Claude"}),a&&e.jsx("span",{className:`text-[10px] rounded-full px-1.5 py-0.5 shrink-0 ${a.className}`,children:a.label}),l!==void 0&&e.jsxs("span",{className:"text-[10px] text-cc-muted bg-cc-hover rounded-full px-1.5 py-0.5 shrink-0",children:[l," agent",l===1?"":"s"]}),e.jsx("span",{className:"text-[10px] text-cc-muted bg-cc-hover rounded-full px-1.5 py-0.5 tabular-nums shrink-0 ml-auto",children:h.length})]}),o&&e.jsxs("div",{className:"space-y-3 pb-2",children:[(a||r||x.length>0)&&e.jsxs("div",{className:"rounded-lg border border-cc-border bg-cc-card px-2.5 py-2 space-y-1.5",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-1.5 text-[10px]",children:[a&&e.jsxs("span",{className:`rounded-full px-1.5 py-0.5 ${a.className}`,children:[y," ",a.summary]}),r&&e.jsxs("span",{className:"rounded-full px-1.5 py-0.5 text-cc-muted bg-cc-hover font-mono-code",children:["sender: ",r]}),x.length>0&&e.jsxs("span",{className:"rounded-full px-1.5 py-0.5 text-cc-muted bg-cc-hover",children:["receivers: ",x.length]})]}),x.length>0&&e.jsx("div",{className:"flex flex-wrap gap-1",children:x.map(p=>e.jsx("span",{className:"text-[10px] rounded-full px-1.5 py-0.5 text-cc-muted bg-cc-hover font-mono-code",children:p},p))})]}),e.jsx(Z,{toolName:((N=h[0])==null?void 0:N.name)||"Grep",items:h})]})]})}const E="codex-playground-demo";function rs(){return u.useEffect(()=>{const t=v.getState(),c=t.sessions.get(E);return t.addSession({session_id:E,backend_type:"codex",model:"o3",cwd:"/Users/demo/project",tools:[],permissionMode:"bypassPermissions",claude_code_version:"0.1.0",mcp_servers:[],agents:[],slash_commands:[],skills:[],total_cost_usd:0,num_turns:8,context_used_percent:45,is_compacting:!1,git_branch:"main",is_worktree:!1,is_containerized:!1,repo_root:"/Users/demo/project",git_ahead:0,git_behind:0,total_lines_added:0,total_lines_removed:0,codex_rate_limits:{primary:{usedPercent:62,windowDurationMins:300,resetsAt:Date.now()+2*36e5},secondary:{usedPercent:18,windowDurationMins:10080,resetsAt:Date.now()+5*864e5}},codex_token_details:{inputTokens:84230,outputTokens:12450,cachedInputTokens:41200,reasoningOutputTokens:8900,modelContextWindow:2e5}}),()=>{v.setState(n=>{const i=new Map(n.sessions);return c?i.set(E,c):i.delete(E),{sessions:i}})}},[]),e.jsxs("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsx(he,{sessionId:E}),e.jsx(ge,{sessionId:E})]})}function O({updateInfo:t}){return u.useEffect(()=>{const c=v.getState().updateInfo,n=v.getState().updateDismissedVersion;return v.getState().setUpdateInfo(t),n&&v.setState({updateDismissedVersion:null}),()=>{v.getState().setUpdateInfo(c),n&&v.setState({updateDismissedVersion:n})}},[t]),e.jsx(be,{})}function as(){const[t,c]=u.useState(!1),[n,i]=u.useState("/tmp");return u.useEffect(()=>{je.getHome().then(r=>i(r.cwd)).catch(()=>{})},[]),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("button",{onClick:()=>c(!0),className:"flex items-center gap-2 px-3 py-2 rounded-lg bg-cc-hover border border-cc-border hover:bg-cc-active transition-colors cursor-pointer",children:[e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-4 h-4 text-cc-primary",children:e.jsx("path",{d:"M4 1.5a.5.5 0 01.5-.5h7a.5.5 0 01.354.146l2 2A.5.5 0 0114 3.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-13zm1 .5v12h8V4h-1.5a.5.5 0 01-.5-.5V2H5zm6 0v1h1l-1-1zM6.5 7a.5.5 0 000 1h5a.5.5 0 000-1h-5zm0 2a.5.5 0 000 1h5a.5.5 0 000-1h-5zm0 2a.5.5 0 000 1h3a.5.5 0 000-1h-3z"})}),e.jsx("span",{className:"text-xs font-medium text-cc-fg",children:"Edit CLAUDE.md"})]}),e.jsx("span",{className:"text-[11px] text-cc-muted",children:"Click to open the editor modal (uses server working directory)"}),e.jsx(ve,{cwd:n,open:t,onClose:()=>c(!1)})]})}function is({server:t}){var x;const[c,n]=u.useState(!1),i={connected:{label:"Connected",cls:"text-cc-success bg-cc-success/10",dot:"bg-cc-success"},connecting:{label:"Connecting",cls:"text-cc-warning bg-cc-warning/10",dot:"bg-cc-warning animate-pulse"},failed:{label:"Failed",cls:"text-cc-error bg-cc-error/10",dot:"bg-cc-error"},disabled:{label:"Disabled",cls:"text-cc-muted bg-cc-hover",dot:"bg-cc-muted opacity-40"}},r=i[t.status]||i.disabled;return e.jsxs("div",{className:"rounded-lg border border-cc-border bg-cc-bg",children:[e.jsxs("div",{className:"flex items-center gap-2 px-2.5 py-2",children:[e.jsx("span",{className:`w-1.5 h-1.5 rounded-full shrink-0 ${r.dot}`}),e.jsx("button",{onClick:()=>n(!c),className:"flex-1 min-w-0 text-left cursor-pointer",children:e.jsx("span",{className:"text-[12px] font-medium text-cc-fg truncate block",children:t.name})}),e.jsx("span",{className:`text-[9px] font-medium px-1.5 rounded-full leading-[16px] shrink-0 ${r.cls}`,children:r.label})]}),c&&e.jsxs("div",{className:"px-2.5 pb-2.5 space-y-1.5 border-t border-cc-border pt-2",children:[e.jsxs("div",{className:"text-[11px] text-cc-muted space-y-0.5",children:[e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("span",{className:"text-cc-muted/60",children:"Type:"}),e.jsx("span",{children:t.config.type})]}),t.config.command&&e.jsxs("div",{className:"flex items-start gap-1",children:[e.jsx("span",{className:"text-cc-muted/60 shrink-0",children:"Cmd:"}),e.jsxs("span",{className:"font-mono text-[10px] break-all",children:[t.config.command,(x=t.config.args)!=null&&x.length?` ${t.config.args.join(" ")}`:""]})]}),t.config.url&&e.jsxs("div",{className:"flex items-start gap-1",children:[e.jsx("span",{className:"text-cc-muted/60 shrink-0",children:"URL:"}),e.jsx("span",{className:"font-mono text-[10px] break-all",children:t.config.url})]}),e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("span",{className:"text-cc-muted/60",children:"Scope:"}),e.jsx("span",{children:t.scope})]})]}),t.error&&e.jsx("div",{className:"text-[11px] text-cc-error bg-cc-error/5 rounded px-2 py-1",children:t.error}),t.tools&&t.tools.length>0&&e.jsxs("div",{className:"space-y-1",children:[e.jsxs("span",{className:"text-[10px] text-cc-muted uppercase tracking-wider",children:["Tools (",t.tools.length,")"]}),e.jsx("div",{className:"flex flex-wrap gap-1",children:t.tools.map(l=>e.jsx("span",{className:"text-[10px] font-mono px-1.5 py-0.5 rounded bg-cc-hover text-cc-fg",children:l.name},l.name))})]})]})]})}function cs({task:t}){const c=t.status==="completed",n=t.status==="in_progress";return e.jsxs("div",{className:`px-2.5 py-2 rounded-lg ${c?"opacity-50":""}`,children:[e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx("span",{className:"shrink-0 flex items-center justify-center w-4 h-4 mt-px",children:n?e.jsx("svg",{className:"w-4 h-4 text-cc-primary animate-spin",viewBox:"0 0 16 16",fill:"none",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5",strokeDasharray:"28",strokeDashoffset:"8",strokeLinecap:"round"})}):c?e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-4 h-4 text-cc-success",children:e.jsx("path",{fillRule:"evenodd",d:"M8 15A7 7 0 108 1a7 7 0 000 14zm3.354-9.354a.5.5 0 00-.708-.708L7 8.586 5.354 6.94a.5.5 0 10-.708.708l2 2a.5.5 0 00.708 0l4-4z",clipRule:"evenodd"})}):e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-4 h-4 text-cc-muted",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5"})})}),e.jsx("span",{className:`text-[13px] leading-snug flex-1 ${c?"text-cc-muted line-through":"text-cc-fg"}`,children:t.subject})]}),n&&t.activeForm&&e.jsx("p",{className:"mt-1 ml-6 text-[11px] text-cc-muted italic truncate",children:t.activeForm}),t.blockedBy&&t.blockedBy.length>0&&e.jsxs("p",{className:"mt-1 ml-6 text-[11px] text-cc-muted flex items-center gap-1",children:[e.jsxs("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-3 h-3 shrink-0",children:[e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5"}),e.jsx("path",{d:"M5 8h6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}),e.jsxs("span",{children:["blocked by ",t.blockedBy.map(i=>`#${i}`).join(", ")]})]})]})}const R="ai-validation-playground";function de({enabled:t}){return u.useEffect(()=>{const c=v.getState(),n=c.sessions.get(R);return c.updateSession(R,{session_id:R,model:"claude-sonnet-4-20250514",cwd:"/workspace",tools:[],permissionMode:"default",claude_code_version:"1.0.0",mcp_servers:[],agents:[],slash_commands:[],skills:[],total_cost_usd:0,num_turns:0,context_used_percent:0,is_compacting:!1,git_branch:"main",is_worktree:!1,is_containerized:!1,repo_root:"/workspace",git_ahead:0,git_behind:0,total_lines_added:0,total_lines_removed:0,aiValidationEnabled:t,aiValidationAutoApprove:!0,aiValidationAutoDeny:!1,...n}),()=>{n&&v.getState().updateSession(R,n)}},[t]),u.useEffect(()=>{v.getState().setSessionAiValidation(R,{aiValidationEnabled:t})},[t]),e.jsxs("div",{className:"flex items-center gap-2 p-2",children:[e.jsx(ue,{sessionId:R}),e.jsx("span",{className:"text-xs text-cc-muted",children:"Click to toggle"})]})}function os(){const[t,c]=u.useState(!0),[n,i]=u.useState("running"),r=[{name:"Explore codebase",agentType:"Explore",status:n,startedAt:Date.now()-12e3,completedAt:n==="completed"?Date.now():void 0},{name:"Research auth patterns",agentType:"general-purpose",status:"completed",startedAt:Date.now()-45e3,completedAt:Date.now()-3e3}],x=[{id:"1",subject:"Implement ActivityTray component",description:"",status:"completed"},{id:"2",subject:"Wire into ChatView layout",description:"",status:"completed"},{id:"3",subject:"Add background agent detection",description:"",status:"in_progress",activeForm:"Detecting Agent tool_use"},{id:"4",subject:"Write tests",description:"",status:"pending"}],l=r.filter(a=>a.status==="running").length,h=x.filter(a=>a.status==="completed").length,o=l>0||x.some(a=>a.status==="in_progress");function m(a,y){const N=Math.round(((y||Date.now())-a)/1e3);if(N<60)return`${N}s`;const p=Math.floor(N/60),D=N%60;return`${p}m${D>0?` ${D}s`:""}`}return e.jsxs("div",{className:"relative h-48 bg-cc-bg rounded-lg border border-cc-border/30 overflow-hidden",children:[e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx("span",{className:"text-[10px] text-cc-muted/20",children:"Chat area"})}),e.jsx("div",{className:"absolute top-2 left-2 z-30",children:e.jsxs("button",{type:"button",onClick:()=>i(a=>a==="running"?"completed":"running"),className:"text-[10px] px-2 py-1 rounded bg-cc-surface border border-cc-border text-cc-muted hover:text-cc-fg cursor-pointer",children:["Toggle agent: ",n]})}),e.jsxs("div",{className:"absolute bottom-3 right-3 z-20",children:[t&&e.jsxs("div",{className:"mb-1.5 w-72 max-w-[calc(100vw-2rem)] max-h-52 overflow-y-auto rounded-xl border border-cc-border/60 bg-cc-surface/95 backdrop-blur-xl shadow-lg shadow-black/20 animate-[fadeSlideIn_0.2s_ease-out]",children:[e.jsxs("div",{className:"flex items-center justify-between px-3 py-2 border-b border-cc-border/40",children:[e.jsx("span",{className:"text-[11px] font-semibold text-cc-fg/70 uppercase tracking-wider",role:"heading","aria-level":3,children:"Activity"}),e.jsx("button",{type:"button",onClick:()=>c(!1),className:"flex items-center justify-center w-7 h-7 -mr-1 rounded-md text-cc-muted/40 hover:text-cc-muted/70 hover:bg-cc-hover/50 transition-colors cursor-pointer","aria-label":"Close activity tray",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3 h-3",children:e.jsx("path",{d:"M4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 01.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z"})})})]}),e.jsxs("div",{className:"py-1",children:[e.jsx("div",{className:"px-3 py-1",role:"heading","aria-level":4,children:e.jsx("span",{className:"text-[9px] text-cc-muted/40 uppercase tracking-widest font-semibold",children:"Agents"})}),r.map((a,y)=>e.jsxs("div",{className:`flex items-center gap-2 px-2.5 min-h-[36px] transition-opacity duration-300 ${a.status!=="running"?"opacity-60":""}`,children:[a.status==="running"?e.jsxs("span",{className:"relative flex h-1.5 w-1.5 shrink-0",children:[e.jsx("span",{className:"absolute inline-flex h-full w-full rounded-full bg-cc-warning opacity-75 animate-ping"}),e.jsx("span",{className:"relative inline-flex rounded-full h-1.5 w-1.5 bg-cc-warning"})]}):e.jsx("span",{className:"h-1.5 w-1.5 rounded-full bg-cc-success shrink-0"}),e.jsx("span",{className:"text-[11px] text-cc-fg/80 truncate flex-1 font-medium",children:a.name}),e.jsx("span",{className:"text-[9px] text-cc-muted/50 uppercase tracking-wider shrink-0",children:a.agentType}),e.jsx("span",{className:"text-[10px] text-cc-muted/50 tabular-nums font-mono-code",children:m(a.startedAt,a.completedAt)})]},y))]}),e.jsx("div",{className:"border-t border-cc-border/30 mx-2",role:"separator"}),e.jsxs("div",{className:"py-1",children:[e.jsx("div",{className:"px-3 py-1",role:"heading","aria-level":4,children:e.jsx("span",{className:"text-[9px] text-cc-muted/40 uppercase tracking-widest font-semibold",children:"Tasks"})}),x.map(a=>e.jsxs("div",{className:`flex items-center gap-2 px-2.5 min-h-[32px] transition-opacity duration-300 ${a.status==="completed"?"opacity-40":""}`,children:[e.jsx("span",{className:"shrink-0 flex items-center justify-center w-3.5 h-3.5",children:a.status==="in_progress"?e.jsx("svg",{className:"w-3.5 h-3.5 text-cc-primary animate-spin",viewBox:"0 0 16 16",fill:"none",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5",strokeDasharray:"28",strokeDashoffset:"8",strokeLinecap:"round"})}):a.status==="completed"?e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-3.5 h-3.5 text-cc-success",children:e.jsx("path",{fillRule:"evenodd",d:"M8 15A7 7 0 108 1a7 7 0 000 14zm3.354-9.354a.5.5 0 00-.708-.708L7 8.586 5.354 6.94a.5.5 0 10-.708.708l2 2a.5.5 0 00.708 0l4-4z",clipRule:"evenodd"})}):e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",className:"w-3.5 h-3.5 text-cc-muted/40",children:e.jsx("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"1.5"})})}),e.jsx("span",{className:`text-[11px] leading-snug flex-1 truncate ${a.status==="completed"?"text-cc-muted line-through":"text-cc-fg/80"}`,children:a.subject}),a.status==="in_progress"&&a.activeForm&&e.jsx("span",{className:"text-[10px] text-cc-muted/50 italic truncate max-w-[120px] shrink-0",children:a.activeForm})]},a.id))]})]}),e.jsxs("button",{type:"button",onClick:()=>c(!t),"aria-expanded":t,className:`flex items-center gap-2 px-3 min-h-[36px] rounded-full border border-cc-border/50 bg-cc-surface/90 backdrop-blur-lg shadow-md shadow-black/15 hover:bg-cc-hover/80 hover:border-cc-border/70 transition-all duration-200 cursor-pointer ${t?"ring-1 ring-cc-primary/30":""}`,children:[o?e.jsxs("span",{className:"relative flex h-2 w-2",children:[e.jsx("span",{className:"absolute inline-flex h-full w-full rounded-full bg-cc-warning opacity-75 animate-ping"}),e.jsx("span",{className:"relative inline-flex rounded-full h-2 w-2 bg-cc-warning"})]}):e.jsx("span",{className:"h-2 w-2 rounded-full bg-cc-success"}),l>0?e.jsxs("span",{className:"text-[11px] text-cc-fg/70 font-medium tabular-nums",children:[l," agent",l!==1?"s":""]}):e.jsxs("span",{className:"text-[11px] text-cc-fg/70 font-medium tabular-nums",children:[r.length," done"]}),e.jsx("span",{className:"w-0.5 h-0.5 rounded-full bg-cc-muted/30"}),e.jsxs("span",{className:"text-[11px] text-cc-fg/70 tabular-nums",children:[h,"/",x.length]}),e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:`w-2.5 h-2.5 text-cc-muted/40 transition-transform duration-200 ${t?"rotate-180":""}`,"aria-hidden":!0,children:e.jsx("path",{d:"M4 6l4 4 4-4"})})]})]})]})}export{ds as Playground};