heyhank 0.1.0

package/dist/assets/Playground-Fc5cdc5p.js

@@ -0,0 +1,109 @@
+import{r as p,j as e,u as j,n as ce,a as le,P as f,C as de,A as q,M as v,c as w,G as I,D as T,S as D,d as M,e as P,f as $,g as J,h as me,i as pe,k as xe,U as ue,l as he,m as Q,o as X,b as ge,p as be,q as N,s as fe}from"./index-CEqZnThB.js";const je=new Set(["pulling_image","running_init_script","building_image"]);function R({steps:t,error:o}){const[n,a]=p.useState({}),[r,h]=p.useState(new Set),l=p.useRef(new Map),x=p.useCallback(i=>d=>{d?l.current.set(i,d):l.current.delete(i)},[]);return p.useEffect(()=>{for(const i of t)i.detail&&je.has(i.step)&&(a(d=>{const u=d[i.step]||[];return u.length===0||u[u.length-1]!==i.detail?{...d,[i.step]:[...u,i.detail]}:d}),h(d=>{if(d.has(i.step))return d;const u=new Set(d);return u.add(i.step),u}))},[t]),p.useEffect(()=>{var i;for(const d of l.current.values())(i=d.scrollTo)==null||i.call(d,{top:d.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(i=>{const d=n[i.step],u=d&&d.length>0,S=r.has(i.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:[i.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"}),i.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"})}),i.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 ${i.status==="in_progress"?"text-cc-fg font-medium":i.status==="done"?"text-cc-muted":"text-cc-error"}`,children:i.label}),u&&e.jsx("button",{onClick:()=>h(C=>{const m=new Set(C);return m.has(i.step)?m.delete(i.step):m.add(i.step),m}),className:"text-[10px] text-cc-muted hover:text-cc-fg transition-colors cursor-pointer",children:S?"Hide logs":"Show logs"})]}),u&&S&&e.jsx("pre",{ref:x(i.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:d.slice(-30).join(`
+`)})]},i.step)})}),o&&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:o})})]})}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 Z=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"}]}),ve=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") {
+  return d.toLocaleDateString(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}`},permission_suggestions:[{type:"addRules",rules:[{toolName:"Edit"}],behavior:"allow",destination:"session"}]}),we=g({tool_name:"Write",input:{file_path:"/Users/stan/Dev/project/src/config.ts",content:`export const config = {
+  apiUrl: "https://api.example.com",
+  timeout: 5000,
+  retries: 3,
+  debug: process.env.NODE_ENV !== "production",
+};
+`}}),ye=g({tool_name:"Read",input:{file_path:"/Users/stan/Dev/project/package.json"},permission_suggestions:[{type:"addRules",rules:[{toolName:"Read"}],behavior:"allow",destination:"session"},{type:"addRules",rules:[{toolName:"Read"}],behavior:"allow",destination:"userSettings"}]}),Ne=g({tool_name:"Glob",input:{pattern:"**/*.test.ts",path:"/Users/stan/Dev/project/src"}}),ke=g({tool_name:"Grep",input:{pattern:"TODO|FIXME|HACK",path:"/Users/stan/Dev/project/src",glob:"*.ts"}}),_e=g({tool_name:"ExitPlanMode",input:{plan:`## Summary
+Refactor the authentication module to use JWT tokens instead of session cookies.
+
+## Changes
+1. **Add JWT utility** — new \`src/auth/jwt.ts\` with sign/verify helpers
+2. **Update middleware** — modify \`src/middleware/auth.ts\` to validate Bearer tokens
+3. **Migrate login endpoint** — return JWT in response body instead of Set-Cookie
+4. **Update tests** — adapt all auth tests to use token-based flow
+
+## Test plan
+- Run \`npm test -- --grep auth\`
+- Manual test with curl`,allowedPrompts:[{tool:"Bash",prompt:"run tests"},{tool:"Bash",prompt:"install dependencies"}]}}),Se=g({tool_name:"WebSearch",input:{query:"TypeScript 5.5 new features",allowed_domains:["typescriptlang.org","github.com"]},description:"Search the web for TypeScript 5.5 features"}),ee=g({tool_name:"dynamic:code_interpreter",input:{code:"print('hello from dynamic tool')"},description:"Custom tool call: code_interpreter"}),Ce=g({tool_name:"Bash",input:{command:"npm install --save-dev @types/react"},ai_validation:{verdict:"uncertain",reason:"Package installation modifies node_modules",ruleBasedOnly:!1}}),Re=g({tool_name:"Bash",input:{command:"git status"},ai_validation:{verdict:"safe",reason:"Read-only git command",ruleBasedOnly:!1}}),Ee=g({tool_name:"Bash",input:{command:"rm -rf node_modules && rm -rf .git"},ai_validation:{verdict:"dangerous",reason:"Recursive delete of project files",ruleBasedOnly:!1}}),Ae=g({tool_name:"Edit",display_name:"File Editor",title:"Edit a TypeScript file",decision_reason:"File is outside trusted directories",input:{file_path:"/workspace/src/app.ts",new_string:"const x = 1;",old_string:"const x = 0;"}}),Ie=g({tool_name:"AskUserQuestion",input:{questions:[{header:"Auth method",question:"Which authentication method should we use for the API?",options:[{label:"JWT tokens (Recommended)",description:"Stateless, scalable, works well with microservices"},{label:"Session cookies",description:"Traditional approach, simpler but requires session storage"},{label:"OAuth 2.0",description:"Delegated auth, best for third-party integrations"}],multiSelect:!1}]}}),Te=g({tool_name:"AskUserQuestion",input:{questions:[{header:"Database",question:"Which database should we use?",options:[{label:"PostgreSQL",description:"Relational, strong consistency"},{label:"MongoDB",description:"Document store, flexible schema"}],multiSelect:!1},{header:"Cache",question:"Do you want to add a caching layer?",options:[{label:"Redis",description:"In-memory, fast, supports pub/sub"},{label:"No cache",description:"Keep it simple for now"}],multiSelect:!1}]}}),se={id:"msg-1",role:"user",content:"Can you help me refactor the authentication module to use JWT tokens?",timestamp:Date.now()-6e4},De={id:"msg-2",role:"user",content:"Here's a screenshot of the error I'm seeing",images:[{media_type:"image/png",data:"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg=="}],timestamp:Date.now()-55e3},te={id:"msg-3",role:"assistant",content:"",contentBlocks:[{type:"text",text:`I'll help you refactor the authentication module. Let me first look at the current implementation.
+
+Here's what I found:
+- The current auth uses **session cookies** via \`express-session\`
+- Sessions are stored in a \`MemoryStore\` (not production-ready)
+- The middleware checks \`req.session.userId\`
+
+\`\`\`typescript
+// Current implementation
+app.use(session({
+  secret: process.env.SESSION_SECRET,
+  resave: false,
+  saveUninitialized: false,
+}));
+\`\`\`
+
+| Feature | Cookies | JWT |
+|---------|---------|-----|
+| Stateless | No | Yes |
+| Scalable | Limited | Excellent |
+| Revocation | Easy | Needs blocklist |
+`}],timestamp:Date.now()-5e4},ne={id:"msg-4",role:"assistant",content:"",contentBlocks:[{type:"text",text:"Let me check the current auth files."},{type:"tool_use",id:"tu-1",name:"Glob",input:{pattern:"src/auth/**/*.ts"}},{type:"tool_result",tool_use_id:"tu-1",content:`src/auth/middleware.ts
+src/auth/login.ts
+src/auth/session.ts`},{type:"tool_use",id:"tu-2",name:"Read",input:{file_path:"src/auth/middleware.ts"}},{type:"tool_result",tool_use_id:"tu-2",content:`export function authMiddleware(req, res, next) {
+  if (!req.session.userId) {
+    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},Me={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
+4. Update all tests
+
+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},Pe={id:"msg-streaming",role:"assistant",content:"Scanning auth files and drafting migration steps...",isStreaming:!0,timestamp:Date.now()-35e3},Ue={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},Le={id:"msg-6",role:"system",content:"Context compacted successfully",timestamp:Date.now()-3e4},re={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},ae=[{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"]}],Be=[{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"}}],Oe=[{id:"sa-1",name:"Grep",input:{pattern:"useAuth",path:"src/"}},{id:"sa-2",name:"Grep",input:{pattern:"session.userId",path:"src/"}}],Ge=[{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}],We=[{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}],Ve=[{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}],ze={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}},Fe={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}},He={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}},$e=[{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:[]}];function ns(){const[t,o]=p.useState(()=>document.documentElement.classList.contains("dark"));return p.useEffect(()=>{document.documentElement.classList.toggle("dark",t)},[t]),p.useEffect(()=>{const n=j.getState(),a=j.getState(),r=b,h=a.sessions.get(r),l=a.messages.get(r),x=a.pendingPermissions.get(r),i=a.connectionStatus.get(r),d=a.cliConnected.get(r),u=a.sessionStatus.get(r),S=a.streaming.get(r),C=a.streamingStartedAt.get(r),m=a.streamingOutputTokens.get(r),oe={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(oe),n.setConnectionStatus(r,"connected"),n.setCliConnected(r,!0),n.setSessionStatus(r,"running");const Y="I'm updating tests and then I'll run the full suite.";return n.setMessages(r,[se,te,ne,re,{id:"stream-draft",role:"assistant",content:Y,timestamp:Date.now(),isStreaming:!0}]),n.setStreaming(r,Y),n.setStreamingStats(r,{startedAt:Date.now()-12e3,outputTokens:1200}),n.addPermission(r,Z),n.addPermission(r,ee),()=>{j.setState(y=>{const L=new Map(y.sessions),B=new Map(y.messages),O=new Map(y.pendingPermissions),G=new Map(y.connectionStatus),W=new Map(y.cliConnected),V=new Map(y.sessionStatus),z=new Map(y.streaming),F=new Map(y.streamingStartedAt),H=new Map(y.streamingOutputTokens);return h?L.set(r,h):L.delete(r),l?B.set(r,l):B.delete(r),x?O.set(r,x):O.delete(r),i?G.set(r,i):G.delete(r),typeof d=="boolean"?W.set(r,d):W.delete(r),u?V.set(r,u):V.delete(r),typeof S=="string"?z.set(r,S):z.delete(r),typeof C=="number"?F.set(r,C):F.delete(r),typeof m=="number"?H.set(r,m):H.delete(r),{sessions:L,messages:B,pendingPermissions:O,connectionStatus:G,cliConnected:W,sessionStatus:V,streaming:z,streamingStartedAt:F,streamingOutputTokens:H}})}},[]),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?ce(n):le()},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:()=>o(!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(c,{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:Z,sessionId:b}),e.jsx(f,{permission:ve,sessionId:b}),e.jsx(f,{permission:we,sessionId:b}),e.jsx(f,{permission:ye,sessionId:b}),e.jsx(f,{permission:Ne,sessionId:b}),e.jsx(f,{permission:ke,sessionId:b}),e.jsx(f,{permission:Se,sessionId:b}),e.jsx(f,{permission:ee,sessionId:b}),e.jsx(f,{permission:Ae,sessionId:b})]})}),e.jsx(c,{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(de,{sessionId:b})})}),e.jsx(c,{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:_e,sessionId:b})})}),e.jsx(c,{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:Ie,sessionId:b})}),e.jsx(s,{label:"Multi-question",children:e.jsx(f,{permission:Te,sessionId:b})})]})}),e.jsx(c,{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:Ce,sessionId:b})}),e.jsx(s,{label:"Permission with AI recommendation (safe)",children:e.jsx(f,{permission:Re,sessionId:b})}),e.jsx(s,{label:"Permission with AI recommendation (dangerous)",children:e.jsx(f,{permission:Ee,sessionId:b})}),e.jsx(s,{label:"Per-session toggle (disabled)",children:e.jsx(ie,{enabled:!1})}),e.jsx(s,{label:"Per-session toggle (enabled)",children:e.jsx(ie,{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(q,{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(q,{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(q,{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(c,{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:se})}),e.jsx(s,{label:"User message with image",children:e.jsx(v,{message:De})}),e.jsx(s,{label:"Assistant message (markdown)",children:e.jsx(v,{message:te})}),e.jsx(s,{label:"Assistant message (with tool calls)",children:e.jsx(v,{message:ne})}),e.jsx(s,{label:"Assistant message (streaming)",children:e.jsx(v,{message:Pe})}),e.jsx(s,{label:"Assistant message (streaming thinking phase)",children:e.jsx(v,{message:Ue})}),e.jsx(s,{label:"Assistant message (thinking block)",children:e.jsx(v,{message:Me})}),e.jsx(s,{label:"Tool result with error",children:e.jsx(v,{message:re})}),e.jsx(s,{label:"System message",children:e.jsx(v,{message:Le})})]})}),e.jsx(c,{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(c,{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(c,{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(c,{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(c,{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(c,{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/",ae.length]})]}),e.jsx("div",{className:"px-3 py-2 space-y-0.5",children:ae.map(n=>e.jsx(ss,{task:n},n.id))})]})}),e.jsx(c,{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(I,{pr:ze})})}),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(I,{pr:Fe})})}),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(I,{pr:He})})}),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(I,{pr:qe})})})]})}),e.jsx(c,{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:$e.map(n=>e.jsx(es,{server:n},n.name))})]})})})}),e.jsx(c,{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:"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,a,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:a===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:a===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(c,{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(Xe,{})})})}),e.jsx(c,{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(U,{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(U,{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(U,{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(U,{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(c,{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(c,{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(c,{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(c,{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",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:"Generating..."}),e.jsx("span",{className:"text-cc-muted/60",children:"("}),e.jsx("span",{children:"12s"}),e.jsx("span",{className:"text-cc-muted/40",children:"·"}),e.jsx("span",{children:"↓ 1.2k"}),e.jsx("span",{className:"text-cc-muted/60",children:")"})]})})]})}),e.jsx(c,{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(K,{toolName:"Read",items:Be})}),e.jsx(s,{label:"Single-item group",children:e.jsx(K,{toolName:"Glob",items:[{id:"sg-1",name:"Glob",input:{pattern:"src/auth/**/*.ts"}}]})})]})}),e.jsx(c,{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(Qe,{description:"Search codebase for auth patterns",agentType:"Explore",status:"completed",senderThreadId:"thr_main",receiverThreadIds:["thr_sub_1","thr_sub_2"],receiverCount:2,items:Oe})})})}),e.jsx(c,{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(T,{oldText:`export function formatDate(d: Date) {
+  return d.toISOString();
+}`,newText:`export function formatDate(d: Date, locale = "en-US") {
+  return d.toLocaleDateString(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}`,fileName:"src/utils/format.ts",mode:"compact"})}),e.jsx(s,{label:"New file diff (compact mode)",children:e.jsx(T,{newText:`export const config = {
+  apiUrl: "https://api.example.com",
+  timeout: 5000,
+  retries: 3,
+  debug: process.env.NODE_ENV !== "production",
+};
+`,fileName:"src/config.ts",mode:"compact"})}),e.jsx(s,{label:"Git diff (full mode with line numbers)",children:e.jsx(T,{unifiedDiff:`diff --git a/src/auth/middleware.ts b/src/auth/middleware.ts
+--- a/src/auth/middleware.ts
++++ b/src/auth/middleware.ts
+@@ -1,8 +1,12 @@
+-import { getSession } from "./session";
++import { verifyToken } from "./jwt";
++import type { Request, Response, NextFunction } from "express";
+
+-export function authMiddleware(req, res, next) {
+-  const session = getSession(req);
+-  if (!session?.userId) {
++export function authMiddleware(req: Request, res: Response, next: NextFunction) {
++  const header = req.headers.authorization;
++  if (!header?.startsWith("Bearer ")) {
+     return res.status(401).json({ error: "Unauthorized" });
+   }
+-  req.userId = session.userId;
++  const token = header.slice(7);
++  const payload = verifyToken(token);
++  if (!payload) return res.status(401).json({ error: "Invalid token" });
++  req.userId = payload.userId;
+   next();
+ }`,mode:"full"})}),e.jsx(s,{label:"No changes",children:e.jsx(T,{oldText:"same content",newText:"same content"})})]})}),e.jsx(c,{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(R,{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(R,{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(R,{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/heyhank:latest — connection timed out after 30s"})}),e.jsx(s,{label:"With streaming init script logs",children:e.jsx(R,{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(R,{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(R,{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(c,{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(D,{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(D,{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(D,{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/heyhank: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(D,{steps:[{step:"resolving_env",label:"Environment resolved",status:"done"},{step:"launching_cli",label:"Launching Codex...",status:"in_progress"}],backend:"codex",onCancel:()=>{}})})})]})}),e.jsx(c,{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(M,{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(M,{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(M,{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(M,{phase:"ready"})})})]})}),e.jsx(c,{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(P,{phase:"prompt"})}),e.jsx(s,{label:"Pulling phase",children:e.jsx(P,{phase:"pulling"})}),e.jsx(s,{label:"Done phase",children:e.jsx(P,{phase:"done"})}),e.jsx(s,{label:"Error phase",children:e.jsx(P,{phase:"error"})})]})}),e.jsx(c,{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(Ze,{})}),e.jsx(s,{label:"Terminal quick tabs (from TopBar)",children:e.jsx(Ye,{})})]})}),e.jsx(c,{title:"Session Items",description:"Sidebar session rows — status dot, backend badge, Docker indicator, archive on hover",children:e.jsx(Ke,{})}),e.jsx(c,{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(c,{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($,{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($,{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($,{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(J,{entries:Ge})})}),e.jsx(s,{label:"ToolTurnSummary — collapsed (with error)",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(J,{entries:We})})}),e.jsx(s,{label:"ToolTurnSummary — collapsed (with running tool)",children:e.jsx("div",{className:"bg-cc-bg p-2 rounded",children:e.jsx(J,{entries:Ve})})})]})})]})]})}function k(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 Je={current:null},_={onSelect:()=>{},onStartRename:()=>{},onArchive:t=>t.stopPropagation(),onUnarchive:t=>t.stopPropagation(),onDelete:t=>t.stopPropagation(),onClearRecentlyRenamed:()=>{},editingSessionId:null,editingName:"",setEditingName:()=>{},onConfirmRename:()=>{},onCancelRename:()=>{},editInputRef:Je};function Ke(){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(N,{session:k({isConnected:!0,status:"running",backendType:"claude"}),isActive:!1,sessionName:"Refactor auth module",permCount:0,isRecentlyRenamed:!1,..._})})}),e.jsx(s,{label:"Running — Codex + Docker",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(N,{session:k({isConnected:!0,status:"running",backendType:"codex",isContainerized:!0}),isActive:!1,sessionName:"Add payment flow",permCount:0,isRecentlyRenamed:!1,..._})})}),e.jsx(s,{label:"Awaiting Input — 2 permissions pending",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(N,{session:k({isConnected:!0,status:"running",backendType:"claude",permCount:2}),isActive:!1,sessionName:"Fix login bug",permCount:2,isRecentlyRenamed:!1,..._})})}),e.jsx(s,{label:"Idle — connected, not running",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(N,{session:k({isConnected:!0,status:"idle",backendType:"claude"}),isActive:!1,sessionName:"Review PR #42",permCount:0,isRecentlyRenamed:!1,..._})})}),e.jsx(s,{label:"Reconnecting — CLI restarting",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(N,{session:k({isReconnecting:!0}),isActive:!1,sessionName:"Debug auth flow",permCount:0,isRecentlyRenamed:!1,..._})})}),e.jsx(s,{label:"Exited — session stopped",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(N,{session:k({sdkState:"exited",backendType:"codex"}),isActive:!1,sessionName:"Deploy to staging",permCount:0,isRecentlyRenamed:!1,..._})})}),e.jsx(s,{label:"Active (selected session)",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(N,{session:k({isConnected:!0,status:"running",backendType:"claude",isContainerized:!0}),isActive:!0,sessionName:"Build new dashboard",permCount:0,isRecentlyRenamed:!1,..._})})}),e.jsx(s,{label:"Archived session",children:e.jsx("div",{className:"bg-cc-sidebar rounded-lg p-1",children:e.jsx(N,{session:k({archived:!0,backendType:"claude"}),isActive:!1,isArchived:!0,sessionName:"Old migration script",permCount:0,isRecentlyRenamed:!1,..._})})})]})}function c({title:t,description:o,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:o})]}),n]})}function s({label:t,children:o}){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:o})]})}function Ye(){var h;const t=[{id:"host",label:"Terminal",cwd:"/Users/demo/project"},{id:"docker",label:"Docker",cwd:"/workspace"}],[o,n]=p.useState("host"),[a,r]=p.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 x;return e.jsxs("button",{onClick:()=>r(l),className:`px-2 py-1 rounded text-[10px] font-medium cursor-pointer ${a===l?"bg-cc-card text-cc-fg":"text-cc-muted"}`,children:[(x=l[0])==null?void 0:x.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 ${o===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:(h=t.find(l=>l.id===o))==null?void 0:h.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 ${a==="left"||a==="right"?"flex-row":"flex-col"}`,children:[(a==="top"||a==="left")&&e.jsx("div",{className:`${a==="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"}),(a==="right"||a==="bottom")&&e.jsx("div",{className:`${a==="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 K({toolName:t,items:o}){const[n,a]=p.useState(!1),r=fe(t),h=he(t),l=o.length;if(l===1){const x=o[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:()=>a(!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(Q,{type:r}),e.jsx("span",{className:"text-xs font-medium text-cc-fg",children:h}),e.jsx("span",{className:"text-xs text-cc-muted truncate flex-1 font-mono-code",children:X(x.name,x.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(x.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:()=>a(!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(Q,{type:r}),e.jsx("span",{className:"text-xs font-medium text-cc-fg",children:h}),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:o.map((x,i)=>{const d=X(x.name,x.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:d||JSON.stringify(x.input).slice(0,80)})]},x.id||i)})})]})})]})}function Qe({description:t,agentType:o,backend:n="codex",status:a,senderThreadId:r,receiverThreadIds:h=[],receiverCount:l,items:x}){var C;const[i,d]=p.useState(!0),u=p.useMemo(()=>{if(!a)return null;const m=a.trim().toLowerCase();return m?m==="completed"?{label:"completed",className:"text-green-600 bg-green-500/15",summary:"completed"}:m==="failed"||m==="error"||m==="errored"?{label:"failed",className:"text-cc-error bg-cc-error/10",summary:"failed"}:m==="pending"||m==="pendinginit"||m==="pending_init"?{label:"pending",className:"text-amber-700 bg-amber-500/15",summary:"pending"}:m==="running"||m==="inprogress"||m==="in_progress"||m==="started"?{label:"running",className:"text-blue-600 bg-blue-500/15",summary:"running"}:{label:a,className:"text-amber-700 bg-amber-500/15",summary:"running"}:null},[a]),S=l!==void 0?l:x.length;return e.jsxs("div",{className:"ml-9 border-l-2 border-cc-primary/20 pl-4",children:[e.jsxs("button",{onClick:()=>d(!i),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 ${i?"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}),o&&e.jsx("span",{className:"text-[10px] text-cc-muted bg-cc-hover rounded-full px-1.5 py-0.5 shrink-0",children:o}),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"}),u&&e.jsx("span",{className:`text-[10px] rounded-full px-1.5 py-0.5 shrink-0 ${u.className}`,children:u.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:x.length})]}),i&&e.jsxs("div",{className:"space-y-3 pb-2",children:[(u||r||h.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:[u&&e.jsxs("span",{className:`rounded-full px-1.5 py-0.5 ${u.className}`,children:[S," ",u.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]}),h.length>0&&e.jsxs("span",{className:"rounded-full px-1.5 py-0.5 text-cc-muted bg-cc-hover",children:["receivers: ",h.length]})]}),h.length>0&&e.jsx("div",{className:"flex flex-wrap gap-1",children:h.map(m=>e.jsx("span",{className:"text-[10px] rounded-full px-1.5 py-0.5 text-cc-muted bg-cc-hover font-mono-code",children:m},m))})]}),e.jsx(K,{toolName:((C=x[0])==null?void 0:C.name)||"Grep",items:x})]})]})}const E="codex-playground-demo";function Xe(){return p.useEffect(()=>{const t=j.getState(),o=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 a=new Map(n.sessions);return o?a.set(E,o):a.delete(E),{sessions:a}})}},[]),e.jsxs("div",{className:"w-[280px] border border-cc-border rounded-xl overflow-hidden bg-cc-card",children:[e.jsx(pe,{sessionId:E}),e.jsx(xe,{sessionId:E})]})}function U({updateInfo:t}){return p.useEffect(()=>{const o=j.getState().updateInfo,n=j.getState().updateDismissedVersion;return j.getState().setUpdateInfo(t),n&&j.setState({updateDismissedVersion:null}),()=>{j.getState().setUpdateInfo(o),n&&j.setState({updateDismissedVersion:n})}},[t]),e.jsx(ue,{})}function Ze(){const[t,o]=p.useState(!1),[n,a]=p.useState("/tmp");return p.useEffect(()=>{ge.getHome().then(r=>a(r.cwd)).catch(()=>{})},[]),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("button",{onClick:()=>o(!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(be,{cwd:n,open:t,onClose:()=>o(!1)})]})}function es({server:t}){var h;const[o,n]=p.useState(!1),a={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=a[t.status]||a.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(!o),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})]}),o&&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,(h=t.config.args)!=null&&h.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 ss({task:t}){const o=t.status==="completed",n=t.status==="in_progress";return e.jsxs("div",{className:`px-2.5 py-2 rounded-lg ${o?"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"})}):o?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 ${o?"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(a=>`#${a}`).join(", ")]})]})]})}const A="ai-validation-playground";function ie({enabled:t}){return p.useEffect(()=>{const o=j.getState(),n=o.sessions.get(A);return o.updateSession(A,{session_id:A,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(A,n)}},[t]),p.useEffect(()=>{j.getState().setSessionAiValidation(A,{aiValidationEnabled:t})},[t]),e.jsxs("div",{className:"flex items-center gap-2 p-2",children:[e.jsx(me,{sessionId:A}),e.jsx("span",{className:"text-xs text-cc-muted",children:"Click to toggle"})]})}export{ns as Playground};

package/dist/assets/ProcessPanel-CslEiZkI.js

@@ -0,0 +1,2 @@
+import{u as E,r as d,b as C,j as e}from"./index-CEqZnThB.js";const te=[],se=15e3;function T(t){const r=Math.floor(t/1e3);if(r<60)return`${r}s`;const s=Math.floor(r/60),c=r%60;if(s<60)return`${s}m ${c}s`;const i=Math.floor(s/60),l=s%60;return`${i}h ${l}m`}function re(t){const r=Math.max(0,Math.floor((Date.now()-t)/1e3));if(r<5)return"just now";if(r<60)return`${r}s ago`;const s=Math.floor(r/60);return s<60?`${s}m ago`:`${Math.floor(s/60)}h ago`}function D(t,r=60){const s=t.split(`
+`)[0];return s.length<=r?s:s.slice(0,r-3)+"..."}function ne(t){const r=t.replace(/\/+$/,""),s=r.split("/").filter(Boolean);return s[s.length-1]||r||"/"}function ae(t){const r=t.replace(/\/+$/,""),s=r.lastIndexOf("/");return s<=0?"/":r.slice(0,s)}function P(t){if(!t)return;const r=t.trim();if(r)return r.replace(/\/+$/,"")||"/"}function ce(t,r){const s=P(t),c=P(r);return!s||!c?!1:s===c?!0:s.startsWith(`${c}/`)}function ie(t,r=68){if(t.length<=r)return t;const s=t.split("/").filter(Boolean);if(s.length<=2)return`...${t.slice(-(r-3))}`;const c=s.slice(-2).join("/"),l=`${t.startsWith("/")?"/":""}.../${c}`;return l.length<=r?l:`...${t.slice(-(r-3))}`}function le(t){const r=[...t.matchAll(/\/[^\s"'`]+/g)].map(c=>c[0]);if(r.length===0)return;let s=null;for(const c of r){let i=c,l=0;const m=i.indexOf("/node_modules/");m>0&&(i=i.slice(0,m),l+=4),/\/\.[^/]+/.test(i)&&(l-=1),(/\/\.nvm\//.test(c)||/\/bin\/(?:node|bun|python3?|ruby|php)$/.test(c))&&(l-=3),/\.(mjs|cjs|js|ts|tsx|py|rb|php|go)$/i.test(i)&&(i=ae(i),l+=2),/\/Users\/|\/home\/|\/workspace\//.test(i)&&(l+=1);const x=P(i);x&&(!s||l>s.score||l===s.score&&x.length>s.path.length)&&(s={path:x,score:l})}return s==null?void 0:s.path}function oe(t){try{return new Date(t).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"})}catch{return""}}function de({expanded:t}){return e.jsx("svg",{viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:1.75,className:`w-3 h-3 text-cc-muted shrink-0 transition-transform duration-150 ${t?"rotate-90":""}`,"aria-hidden":"true",children:e.jsx("path",{d:"M7 4l6 6-6 6",strokeLinecap:"round",strokeLinejoin:"round"})})}function ue(t,r){const s=new Map;for(const c of t){const i=P(c.cwd)||le(c.fullCommand),l=ce(i,r),m=i||"__unknown__",x=s.get(m);if(x){x.processes.push(c),x.isCurrentRepo=x.isCurrentRepo||l;continue}const f=i?ne(i):"Unknown project";s.set(m,{key:m,label:f,path:i,isCurrentRepo:l,processes:[c]})}return[...s.values()].sort((c,i)=>c.isCurrentRepo!==i.isCurrentRepo?c.isCurrentRepo?-1:1:!!c.path!=!!i.path?c.path?-1:1:(c.path||c.label).localeCompare(i.path||i.label))}function me(t){const r=(t.fullCommand||t.command||"").trim(),s=r.toLowerCase();if(/\bnext(\s+dev|\b)/.test(s)||s.includes("/next/dist/bin/next"))return"Next.js dev server";if(/\bvite\b/.test(s))return"Vite dev server";if(/\bnuxt\b/.test(s))return"Nuxt dev server";if(/\bastro\b/.test(s))return"Astro dev server";if(/\bremix\b/.test(s))return"Remix dev server";if(/\bwebpack(-dev-server)?\b/.test(s))return"Webpack dev server";if(/\bphp\s+artisan\s+serve\b/.test(s))return"Laravel dev server";if(/\buvicorn\b/.test(s))return"Uvicorn server";if(/\bgunicorn\b/.test(s))return"Gunicorn server";if(/\bpython(?:3)?\s+-m\s+http\.server\b/.test(s))return"Python http.server";if(/\b(?:bin\/rails|rails\s+server|puma)\b/.test(s))return"Rails app server";const c=r.match(/(?:^|\s)([^\s"'`]+\.(?:mjs|cjs|js|ts|tsx|py|rb|php|go))(?=\s|$)/i);if(c){const i=c[1].split("/").pop();if(i)return i}return D(r||t.command,64)}function W({process:t,killing:r,onKill:s}){const[c,i]=d.useState(!1),[l,m]=d.useState(Date.now());d.useEffect(()=>{if(t.status!=="running")return;const v=setInterval(()=>m(Date.now()),1e3);return()=>clearInterval(v)},[t.status]);const x={running:"bg-cc-primary",completed:"bg-cc-success",failed:"bg-cc-error",stopped:"bg-cc-muted"},f=t.completedAt?T(t.completedAt-t.startedAt):T(l-t.startedAt);return e.jsx("div",{role:"listitem",className:`px-4 py-2.5 hover:bg-cc-hover/50 transition-colors ${t.status!=="running"?"opacity-60":""}`,"data-testid":"process-row",children:e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx("span",{className:`w-1.5 h-1.5 rounded-full shrink-0 mt-1.5 ${x[t.status]||"bg-cc-muted"} ${t.status==="running"?"animate-pulse":""}`,"data-testid":"process-status-dot"}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("button",{type:"button",onClick:()=>i(!c),className:"text-[12px] text-cc-fg font-medium truncate text-left cursor-pointer hover:underline flex-1 min-w-0",title:t.description||t.command,children:t.description||D(t.command)}),e.jsx("span",{className:"text-[10px] text-cc-muted tabular-nums shrink-0",children:f})]}),e.jsxs("div",{className:"text-[10px] text-cc-muted mt-0.5",children:["ID: ",t.taskId||"pending..."]}),c&&e.jsxs("div",{className:"mt-1.5 space-y-1",children:[e.jsx("pre",{className:"text-[10px] text-cc-muted bg-cc-hover rounded px-2 py-1 overflow-x-auto whitespace-pre-wrap break-all font-mono",children:t.command}),t.summary&&e.jsx("div",{className:"text-[11px] text-cc-muted italic",children:t.summary})]})]}),s&&t.status==="running"&&e.jsx("button",{type:"button",onClick:s,disabled:r,className:"shrink-0 text-[11px] text-cc-error hover:text-red-500 disabled:opacity-50 transition-colors cursor-pointer px-2.5 py-1.5 min-h-[44px] rounded hover:bg-cc-hover",title:"Kill process","aria-label":`Kill process ${t.taskId}`,children:r?"...":"Kill"})]})})}function xe({proc:t,killing:r,onKill:s}){const[c,i]=d.useState(!1),[l,m]=d.useState(Date.now()),x=me(t),f=D(t.fullCommand,110),v=f&&f!==x,j=t.startedAt?T(Math.max(0,l-t.startedAt)):null,g=t.startedAt?oe(t.startedAt):null;return d.useEffect(()=>{if(!t.startedAt)return;const p=setInterval(()=>m(Date.now()),1e3);return()=>clearInterval(p)},[t.startedAt]),e.jsx("div",{role:"listitem",className:"px-4 py-2.5 hover:bg-cc-hover/50 transition-colors","data-testid":"system-process-row",children:e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx("span",{className:"w-1.5 h-1.5 rounded-full shrink-0 mt-1.5 bg-green-500 animate-pulse"}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("div",{className:"flex items-center gap-2",children:e.jsx("button",{type:"button",onClick:()=>i(!c),className:"text-[12px] text-cc-fg font-medium truncate text-left cursor-pointer hover:underline flex-1 min-w-0",title:t.fullCommand,children:x})}),e.jsxs("div",{className:"mt-0.5 flex items-center gap-1.5 flex-wrap text-[10px] text-cc-muted",children:[e.jsx("span",{className:"rounded px-1 py-0.5 bg-cc-active/60 text-[9px] font-mono text-cc-fg/80",children:t.command}),e.jsxs("span",{children:["PID: ",t.pid]}),j&&e.jsxs("span",{children:["Up ",j]}),g&&e.jsxs("span",{children:["Started ",g]}),t.ports.map(p=>e.jsxs("a",{href:`http://localhost:${p}`,target:"_blank",rel:"noreferrer","aria-label":`Open http://localhost:${p}`,className:"inline-flex items-center gap-0.5 text-[9px] rounded px-1 py-0.5 bg-cc-primary/10 text-cc-primary hover:bg-cc-primary/20 transition-colors tabular-nums font-mono underline decoration-cc-primary/30 underline-offset-2",children:["localhost:",p,e.jsx("svg",{viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:1.5,className:"w-2.5 h-2.5 shrink-0","aria-hidden":"true",children:e.jsx("path",{d:"M4.5 2.5h-2v7h7v-2M7 2.5h2.5V5M5.5 6.5l4-4",strokeLinecap:"round",strokeLinejoin:"round"})})]},p))]}),v&&!c&&e.jsx("div",{className:"mt-1 text-[10px] text-cc-muted font-mono truncate",title:t.fullCommand,children:f}),c&&e.jsx("pre",{className:"mt-1.5 text-[10px] text-cc-muted bg-cc-hover rounded px-2 py-1 overflow-x-auto whitespace-pre-wrap break-all font-mono",children:t.fullCommand})]}),e.jsx("button",{type:"button",onClick:s,disabled:r,className:"shrink-0 text-[11px] text-cc-error hover:text-red-500 disabled:opacity-50 transition-colors cursor-pointer px-2.5 py-1.5 min-h-[44px] rounded hover:bg-cc-hover",title:"Kill process","aria-label":`Kill system process ${t.pid}`,children:r?"...":"Kill"})]})})}function z({title:t,count:r,action:s}){return e.jsxs("div",{className:"shrink-0 px-4 py-2 flex items-center justify-between bg-cc-bg",children:[e.jsxs("span",{className:"text-[11px] text-cc-muted uppercase tracking-wider",children:[t,r!==void 0&&r>0?` (${r})`:""]}),s]})}function _({text:t,spinning:r=!1,tone:s="muted"}){return e.jsxs("span",{className:`inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[9px] ${s==="error"?"bg-cc-error/10 text-cc-error":"bg-cc-hover text-cc-muted"}`,children:[r&&e.jsx("span",{className:"inline-block w-2 h-2 rounded-full border border-current border-t-transparent animate-spin","aria-hidden":"true"}),t]})}function R({size:t="sm",className:r=""}){const s=t==="lg"?"w-8 h-8":t==="md"?"w-4 h-4":"w-3 h-3";return e.jsx("span",{className:`inline-block ${s} rounded-full border-2 border-current border-t-transparent animate-spin ${r}`,"aria-hidden":"true"})}function pe({label:t,state:r}){return e.jsxs("div",{className:"flex items-center gap-2 text-[11px]",children:[e.jsx("span",{className:`inline-flex items-center justify-center w-4 h-4 rounded-full border ${r==="done"?"border-emerald-400/50 bg-emerald-400/10 text-emerald-300":r==="active"?"border-cc-primary/50 bg-cc-primary/10 text-cc-primary":"border-cc-border text-cc-muted/70"}`,"aria-hidden":"true",children:r==="active"?e.jsx(R,{size:"sm",className:"text-current"}):r==="done"?e.jsx("svg",{viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:1.5,className:"w-3 h-3",children:e.jsx("path",{d:"M2.5 6.2l2.1 2.1 4.9-4.9",strokeLinecap:"round",strokeLinejoin:"round"})}):e.jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-current/60"})}),e.jsx("span",{className:r==="active"?"text-cc-fg":"text-cc-muted",children:t})]})}function he({title:t,subtitle:r}){const s=["Scanning listening ports","Resolving process commands","Grouping by project folder"],[c,i]=d.useState(0);return d.useEffect(()=>{const l=setInterval(()=>{i(m=>(m+1)%s.length)},850);return()=>clearInterval(l)},[s.length]),e.jsxs("div",{className:"h-full flex flex-col items-center justify-center px-6 text-center bg-cc-bg","aria-live":"polite",children:[e.jsxs("div",{className:"relative w-16 h-16 mb-3 text-cc-muted/60",children:[e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:1.5,className:"w-full h-full",children:e.jsx("path",{d:"M8 9h8m-8 4h6m-2-10h2.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2H7a2 2 0 01-2-2V5a2 2 0 012-2z",strokeLinecap:"round",strokeLinejoin:"round"})}),e.jsx("span",{className:"absolute inset-0 rounded-full border border-cc-primary/20 motion-safe:animate-ping","aria-hidden":"true"})]}),e.jsxs("div",{className:"mb-3 flex items-center gap-3 rounded-full border border-cc-border bg-cc-hover/20 px-3 py-2",children:[e.jsx(R,{size:"lg",className:"text-cc-primary"}),e.jsxs("div",{className:"text-left",children:[e.jsx("div",{className:"text-xs font-medium text-cc-fg",children:t}),e.jsx("div",{className:"text-[10px] text-cc-muted",children:"This can take a second on larger machines."})]})]}),e.jsx("p",{className:"text-xs text-cc-muted max-w-[320px] mb-4",children:r}),e.jsxs("div",{className:"w-full max-w-[360px] rounded-lg border border-cc-border bg-cc-hover/10 p-3 text-left",children:[e.jsx("div",{className:"text-[10px] uppercase tracking-wide text-cc-muted mb-2",children:"Scan progress"}),e.jsx("div",{className:"space-y-2",children:s.map((l,m)=>{const x=m<c?"done":m===c?"active":"pending";return e.jsx(pe,{label:l,state:x},l)})})]})]})}function fe({message:t,onRetry:r,retrying:s}){return e.jsxs("div",{className:"h-full flex flex-col items-center justify-center px-6 text-center bg-cc-bg",children:[e.jsx("div",{className:"w-12 h-12 mb-3 text-cc-error/60",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:1.5,children:e.jsx("path",{d:"M12 9v4m0 4h.01M10.29 3.86l-7.4 12.82A1 1 0 003.76 18h16.48a1 1 0 00.87-1.5l-7.4-12.82a1 1 0 00-1.74 0z",strokeLinecap:"round",strokeLinejoin:"round"})})}),e.jsx("h3",{className:"text-sm font-medium text-cc-fg mb-1",children:"Couldn't scan dev servers"}),e.jsx("p",{className:"text-xs text-cc-muted max-w-[320px]",children:t}),e.jsx("button",{type:"button",onClick:r,disabled:s,className:"mt-3 text-[11px] text-cc-muted hover:text-cc-fg disabled:opacity-50 transition-colors cursor-pointer px-3 py-2 rounded border border-cc-border hover:bg-cc-hover",children:s?"Retrying...":"Retry scan"})]})}function be({sessionId:t}){const r=E(n=>n.sessions.get(t)),s=E(n=>n.sessionProcesses.get(t))||te,[c,i]=d.useState(new Set),[l,m]=d.useState([]),[x,f]=d.useState(new Set),[v,j]=d.useState(new Set),g=d.useRef(new Set),[p,$]=d.useState("not_started"),[S,G]=d.useState("initial"),[V,I]=d.useState(null),[L,K]=d.useState(!1),[B,O]=d.useState(null),A=d.useRef(0),k=d.useRef(!1),b=s.filter(n=>n.status==="running"),U=s.filter(n=>n.status!=="running"),F=(r==null?void 0:r.repo_root)||(r==null?void 0:r.cwd),N=ue(l,F);d.useEffect(()=>{j(n=>{let o=!1;const a=new Set(n),u=new Set(N.map(h=>h.key));for(const h of N)g.current.has(h.key)||(h.isCurrentRepo?a.delete(h.key)&&(o=!0):a.has(h.key)||(a.add(h.key),o=!0));for(const h of[...a])u.has(h)||(a.delete(h),o=!0);for(const h of[...g.current])u.has(h)||g.current.delete(h);return o?a:n})},[N]);const y=d.useCallback(async n=>{const o=++A.current;G(n),I(null),$(a=>!L||a==="not_started"?"initial_loading":"refreshing");try{const a=await C.getSystemProcesses(t);if(k.current||o!==A.current)return;a.processes&&m(a.processes),K(!0),O(Date.now()),$("loaded")}catch(a){if(k.current||o!==A.current)return;const u=a instanceof Error?a.message:String(a);I(u),K(!0),$("error"),console.warn("[ProcessPanel] System process scan failed:",a instanceof Error?a.message:a)}},[L,t]);d.useEffect(()=>{k.current=!1,y("initial");const n=setInterval(()=>{y("poll")},se);return()=>{k.current=!0,clearInterval(n)}},[y]);const M=d.useCallback(async()=>{await y("manual")},[y]),H=d.useCallback(async n=>{i(o=>new Set([...o,n]));try{await C.killProcess(t,n),setTimeout(()=>{const o=E.getState(),a=o.sessionProcesses.get(t),u=a==null?void 0:a.find(h=>h.taskId===n);u&&u.status==="running"&&o.updateProcess(t,n,{status:"stopped",completedAt:Date.now()})},3e3)}catch{}finally{i(o=>{const a=new Set(o);return a.delete(n),a})}},[t]),q=d.useCallback(async()=>{const n=b.map(o=>o.taskId).filter(Boolean);i(new Set(n));try{await C.killAllProcesses(t,n)}catch{}finally{i(new Set)}},[t,b]),Y=d.useCallback(async n=>{f(o=>new Set([...o,n]));try{await C.killSystemProcess(t,n),setTimeout(()=>{m(o=>o.filter(a=>a.pid!==n))},1e3)}catch{}finally{f(o=>{const a=new Set(o);return a.delete(n),a})}},[t]),J=d.useCallback(n=>{g.current.add(n),j(o=>{const a=new Set(o);return a.has(n)?a.delete(n):a.add(n),a})},[]),Q=s.length>0||l.length>0,w=p==="initial_loading"||p==="refreshing",X=!L&&(p==="not_started"||p==="initial_loading"),Z=s.length===0&&X,ee=s.length===0&&l.length===0&&p==="error";if(Z){const n=S==="manual"?"Refreshing process list...":"Searching for running dev servers...",o=S==="manual"?"Updating the process list and resolving active ports.":"Checking listening ports and resolving process details.";return e.jsx(he,{title:n,subtitle:o})}return ee?e.jsx(fe,{message:V||"The dev server scan failed before any results were loaded.",onRetry:M,retrying:w}):Q?e.jsx("div",{className:"h-full flex flex-col overflow-hidden bg-cc-bg",children:e.jsxs("div",{className:"flex-1 overflow-y-auto",children:[s.length>0&&e.jsxs(e.Fragment,{children:[e.jsx(z,{title:"Claude Tasks",count:b.length,action:b.length>1?e.jsx("button",{type:"button",onClick:q,className:"text-[11px] px-2.5 py-1.5 text-cc-error hover:text-red-500 transition-colors cursor-pointer","aria-label":"Kill all running processes",children:"Kill All"}):void 0}),e.jsxs("div",{role:"list","aria-label":"Background processes",children:[b.map(n=>e.jsx(W,{process:n,killing:c.has(n.taskId),onKill:()=>H(n.taskId)},n.taskId||n.toolUseId)),U.length>0&&b.length>0&&e.jsx("div",{role:"presentation",className:"px-4 py-1.5 text-[10px] text-cc-muted uppercase tracking-wider",children:"Completed"}),U.map(n=>e.jsx(W,{process:n,killing:!1,onKill:null},n.taskId||n.toolUseId))]})]}),l.length>0&&e.jsxs(e.Fragment,{children:[e.jsx(z,{title:"Dev Servers",count:l.length,action:e.jsxs("div",{className:"flex items-center gap-2",children:[p==="refreshing"&&e.jsx(_,{text:S==="manual"?"Refreshing...":"Updating...",spinning:!0}),p==="error"&&l.length>0&&e.jsx(_,{text:"Refresh failed",tone:"error"}),B&&p!=="refreshing"&&e.jsx(_,{text:`Updated ${re(B)}`}),e.jsxs("button",{type:"button",onClick:M,disabled:w,className:"text-[11px] px-2 py-1.5 text-cc-muted hover:text-cc-fg disabled:opacity-50 transition-colors cursor-pointer inline-flex items-center gap-1.5","aria-label":"Refresh system processes",children:[p==="refreshing"&&e.jsx(R,{size:"sm",className:"text-current"}),p==="refreshing"&&S==="manual"?"Refreshing...":"Refresh"]})]})}),N.map(n=>{const o=v.has(n.key),a=[...new Set(n.processes.flatMap(u=>u.ports))].sort((u,h)=>u-h);return e.jsxs("div",{children:[e.jsx("div",{className:"px-4 py-2.5 bg-cc-hover/30",children:e.jsxs("button",{type:"button",onClick:()=>J(n.key),className:"w-full flex items-start justify-between gap-3 text-left cursor-pointer rounded px-2 py-1.5 hover:bg-cc-hover/60 transition-colors","aria-expanded":!o,"aria-label":`Toggle process group ${n.label}`,children:[e.jsxs("div",{className:"min-w-0 flex-1",children:[e.jsxs("div",{className:"flex items-center gap-2 flex-wrap",children:[e.jsx(de,{expanded:!o}),e.jsx("span",{className:"text-[9px] rounded px-1 py-0.5 bg-cc-active/60 text-cc-muted uppercase tracking-wide",children:"Folder"}),e.jsx("span",{className:"text-[12px] text-cc-fg font-medium",children:n.label}),e.jsxs("span",{className:"text-[9px] rounded px-1.5 py-0.5 bg-cc-active/60 text-cc-fg/80",children:[n.processes.length," running"]}),a.length>0&&e.jsxs("span",{className:"text-[9px] rounded px-1.5 py-0.5 bg-cc-active/60 text-cc-muted",children:[a.length," port",a.length===1?"":"s"]}),n.isCurrentRepo&&e.jsx("span",{className:"text-[9px] rounded px-1.5 py-0.5 bg-cc-primary/20 text-cc-primary",children:"Current repo"})]}),n.path&&e.jsx("div",{className:"mt-1 text-[10px] text-cc-muted font-mono truncate",title:n.path,children:ie(n.path,96)})]}),e.jsxs("div",{className:"shrink-0 hidden md:flex items-center gap-1.5 flex-wrap justify-end max-w-[40%]",children:[a.slice(0,4).map(u=>e.jsxs("span",{className:"text-[9px] rounded px-1 py-0.5 bg-cc-active/60 text-cc-muted tabular-nums font-mono",children:[":",u]},`${n.key}-port-${u}`)),a.length>4&&e.jsxs("span",{className:"text-[9px] text-cc-muted",children:["+",a.length-4]})]})]})}),!o&&e.jsx("div",{role:"list","aria-label":`System dev processes for ${n.label}`,className:"ml-4 border-l border-cc-border/40",children:n.processes.map(u=>e.jsx(xe,{proc:u,killing:x.has(u.pid),onKill:()=>Y(u.pid)},u.pid))})]},n.key)})]})]})}):e.jsxs("div",{className:"h-full flex flex-col items-center justify-center px-6 text-center bg-cc-bg",children:[e.jsx("div",{className:"w-12 h-12 mb-3 text-cc-muted/40",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:1.5,children:e.jsx("path",{d:"M8 9h8m-8 4h6m-2-10h2.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2H7a2 2 0 01-2-2V5a2 2 0 012-2z",strokeLinecap:"round",strokeLinejoin:"round"})})}),e.jsx("h3",{className:"text-sm font-medium text-cc-fg mb-1",children:"No background processes"}),e.jsx("p",{className:"text-xs text-cc-muted max-w-[260px]",children:"Background tasks spawned by Claude and dev servers listening on ports will appear here."}),e.jsxs("button",{type:"button",onClick:M,disabled:w,className:"mt-3 text-[11px] text-cc-muted hover:text-cc-fg disabled:opacity-50 transition-colors cursor-pointer px-3 py-2 rounded border border-cc-border hover:bg-cc-hover inline-flex items-center gap-2","aria-label":"Scan for dev servers",children:[w&&e.jsx(R,{size:"sm",className:"text-current"}),w?"Scanning...":"Scan for dev servers"]})]})}export{be as ProcessPanel};

package/dist/assets/PromptsPage-D2EhsdNO.js

@@ -0,0 +1,4 @@
+import{r as c,u as X,b as z,j as e,n as ne,a as ae,F as Y}from"./index-CEqZnThB.js";function de({embedded:o=!1}){const[a,i]=c.useState([]),[h,b]=c.useState(!0),[l,M]=c.useState(!1),[$,d]=c.useState(""),[u,I]=c.useState(""),[g,B]=c.useState(""),[y,R]=c.useState("global"),[p,L]=c.useState([]),[te,V]=c.useState(!1),[W,S]=c.useState(null),[A,f]=c.useState(""),[D,j]=c.useState(""),[k,v]=c.useState("global"),[N,m]=c.useState([]),[se,G]=c.useState(!1),[Z,re]=c.useState(""),[C,q]=c.useState(!1),J=X(t=>t.currentSessionId),x=X(t=>{var s,r;return t.currentSessionId&&(((s=t.sessions.get(t.currentSessionId))==null?void 0:s.cwd)||((r=t.sdkSessions.find(n=>n.sessionId===t.currentSessionId))==null?void 0:r.cwd))||""}),P=c.useMemo(()=>{const t=Z.trim().toLowerCase();return t?a.filter(s=>`${s.name}
+${s.content}
+${s.scope}`.toLowerCase().includes(t)):a},[a,Z]),H=a.length,K=P.length,T=c.useMemo(()=>{const t=P.filter(n=>n.scope==="global"),s=P.filter(n=>n.scope==="project"),r=new Map;for(const n of s){const w=n.projectPaths??(n.projectPath?[n.projectPath]:[]),F=w.length>0?w.slice().sort().join(`
+`):"(no folder)",oe=w.length>0?w.map(U=>U.split("/").pop()||U).join(", "):"(no folder)";r.has(F)||r.set(F,{label:oe,prompts:[]}),r.get(F).prompts.push(n)}return{globalPrompts:t,folderGroups:r}},[P]),E=c.useCallback(async()=>{b(!0),d("");try{const t=await z.listPrompts();i(t)}catch(t){d(t instanceof Error?t.message:String(t))}finally{b(!1)}},[]);c.useEffect(()=>{E()},[E]);async function ce(t){if(t.preventDefault(),!(!u.trim()||!g.trim())){if(y==="project"&&p.length===0){d("Select at least one project folder");return}M(!0),d("");try{await z.createPrompt({name:u.trim(),content:g.trim(),scope:y,projectPaths:y==="project"?p:void 0}),I(""),B(""),R("global"),L([]),q(!1),await E()}catch(s){d(s instanceof Error?s.message:String(s))}finally{M(!1)}}}async function O(t){try{await z.deletePrompt(t),await E()}catch(s){d(s instanceof Error?s.message:String(s))}}async function Q(){if(!(!W||!A.trim()||!D.trim())){if(k==="project"&&N.length===0){d("Select at least one project folder");return}try{await z.updatePrompt(W,{name:A.trim(),content:D.trim(),scope:k,projectPaths:k==="project"?N:void 0}),S(null),f(""),j(""),v("global"),m([]),await E()}catch(t){d(t instanceof Error?t.message:String(t))}}}return e.jsxs("div",{className:`${o?"h-full":"h-[100dvh]"} bg-cc-bg text-cc-fg font-sans-ui antialiased overflow-y-auto`,children:[e.jsxs("div",{className:"max-w-2xl mx-auto px-4 sm:px-6 py-6 sm:py-10 pb-safe",children:[e.jsxs("div",{className:"flex items-start justify-between gap-3 mb-2",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx("h1",{className:"text-lg font-semibold text-cc-fg",children:"Saved Prompts"}),e.jsxs("p",{className:"mt-0.5 text-[13px] text-cc-muted leading-relaxed",children:["Create reusable prompts — insert with ",e.jsx("code",{className:"text-cc-fg text-xs bg-cc-hover rounded px-1 py-0.5",children:"@title"})," in the composer."]})]}),!o&&e.jsx("button",{onClick:()=>{J?ne(J):ae()},className:"px-3 py-2.5 min-h-[44px] rounded-lg text-sm text-cc-muted hover:text-cc-fg hover:bg-cc-hover transition-colors cursor-pointer shrink-0",children:"Back"})]}),e.jsxs("div",{className:"flex items-center gap-2 mt-4 mb-5",children:[e.jsxs("div",{className:"relative flex-1 min-w-0",children:[e.jsxs("svg",{className:"absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-cc-muted pointer-events-none",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("path",{d:"m21 21-4.35-4.35"})]}),e.jsx("input",{value:Z,onChange:t=>re(t.target.value),placeholder:"Search by title or content...",className:"w-full pl-9 pr-3 py-2.5 min-h-[44px] text-sm bg-cc-card rounded-lg text-cc-fg placeholder:text-cc-muted focus:outline-none focus:ring-1 focus:ring-cc-primary/40 transition-shadow"})]}),e.jsxs("button",{onClick:()=>q(!C),className:`flex items-center gap-1.5 px-3.5 py-2.5 min-h-[44px] rounded-lg text-sm font-medium transition-colors cursor-pointer shrink-0 ${C?"bg-cc-active text-cc-fg":"bg-cc-primary hover:bg-cc-primary-hover text-white"}`,children:[e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"w-4 h-4",children:C?e.jsx("path",{d:"M18 6 6 18M6 6l12 12"}):e.jsx("path",{d:"M12 5v14M5 12h14"})}),e.jsx("span",{className:"hidden sm:inline",children:C?"Cancel":"New Prompt"})]})]}),C&&e.jsxs("form",{onSubmit:ce,className:"mb-6 rounded-xl bg-cc-card p-4 sm:p-5 space-y-3",style:{animation:"fadeSlideIn 150ms ease-out"},children:[e.jsxs("div",{children:[e.jsx("label",{className:"block text-xs font-medium text-cc-muted mb-1",htmlFor:"prompt-name",children:"Title"}),e.jsx("input",{id:"prompt-name",type:"text",value:u,onChange:t=>I(t.target.value),placeholder:"review-pr",className:"w-full px-3 py-2.5 min-h-[44px] text-sm bg-cc-bg rounded-lg text-cc-fg placeholder:text-cc-muted focus:outline-none focus:ring-1 focus:ring-cc-primary/40 transition-shadow"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-xs font-medium text-cc-muted mb-1",htmlFor:"prompt-content",children:"Content"}),e.jsx("textarea",{id:"prompt-content",value:g,onChange:t=>B(t.target.value),placeholder:"Review this PR and summarize risks, regressions, and missing tests.",rows:4,className:"w-full px-3 py-2.5 text-sm bg-cc-bg rounded-lg text-cc-fg placeholder:text-cc-muted focus:outline-none focus:ring-1 focus:ring-cc-primary/40 resize-y transition-shadow"})]}),e.jsx(ee,{scope:y,onScopeChange:t=>{R(t),t==="project"&&p.length===0&&x&&L([x])},folders:p,onRemoveFolder:t=>L(s=>s.filter(r=>r!==t)),onAddFolder:()=>V(!0)}),$&&e.jsx("div",{className:"px-3 py-2 rounded-lg bg-cc-error/10 text-xs text-cc-error",children:$}),e.jsxs("div",{className:"flex items-center justify-between pt-1",children:[e.jsxs("p",{className:"text-[11px] text-cc-muted",children:["Stored in ",e.jsx("code",{className:"text-[10px]",children:"~/.heyhank/prompts.json"})]}),e.jsx("button",{type:"submit",disabled:l||!u.trim()||!g.trim(),className:`px-4 py-2.5 min-h-[44px] rounded-lg text-sm font-medium transition-colors ${l||!u.trim()||!g.trim()?"bg-cc-hover text-cc-muted cursor-not-allowed":"bg-cc-primary hover:bg-cc-primary-hover text-white cursor-pointer"}`,children:l?"Saving...":"Create Prompt"})]})]}),e.jsx("div",{className:"flex items-center gap-2 mb-3 text-[12px] text-cc-muted",children:e.jsx("span",{children:K===H?`${H} prompt${H!==1?"s":""}`:`${K} of ${H}`})}),h?e.jsx("div",{className:"py-12 text-center text-sm text-cc-muted",children:"Loading prompts..."}):a.length===0?e.jsx("div",{className:"py-12 text-center text-sm text-cc-muted",children:"No prompts yet."}):P.length===0?e.jsx("div",{className:"py-12 text-center text-sm text-cc-muted",children:"No prompts match your search."}):e.jsxs("div",{className:"space-y-4",children:[T.globalPrompts.length>0&&e.jsxs("div",{children:[e.jsx("h2",{className:"text-[11px] uppercase tracking-wider text-cc-muted font-semibold mb-1.5 px-1",children:"Global"}),e.jsx("div",{className:"space-y-1",children:T.globalPrompts.map(t=>e.jsx(_,{prompt:t,isEditing:W===t.id,editName:A,editContent:D,editScope:k,editFolders:N,cwd:x,onEditNameChange:f,onEditContentChange:j,onEditScopeChange:s=>{v(s),s==="project"&&N.length===0&&x&&m([x])},onEditRemoveFolder:s=>m(r=>r.filter(n=>n!==s)),onEditAddFolder:()=>G(!0),onStartEdit:()=>{S(t.id),f(t.name),j(t.content),v(t.scope),m(t.projectPaths??(t.projectPath?[t.projectPath]:[]))},onCancelEdit:()=>{S(null),f(""),j(""),v("global"),m([])},onSaveEdit:()=>void Q(),onDelete:()=>void O(t.id)},t.id))})]}),Array.from(T.folderGroups.entries()).map(([t,s])=>e.jsxs("div",{children:[e.jsx("h2",{className:"text-[11px] uppercase tracking-wider text-cc-muted font-semibold mb-1.5 px-1",children:s.label}),e.jsx("div",{className:"space-y-1",children:s.prompts.map(r=>e.jsx(_,{prompt:r,isEditing:W===r.id,editName:A,editContent:D,editScope:k,editFolders:N,cwd:x,onEditNameChange:f,onEditContentChange:j,onEditScopeChange:n=>{v(n),n==="project"&&N.length===0&&x&&m([x])},onEditRemoveFolder:n=>m(w=>w.filter(F=>F!==n)),onEditAddFolder:()=>G(!0),onStartEdit:()=>{S(r.id),f(r.name),j(r.content),v(r.scope),m(r.projectPaths??(r.projectPath?[r.projectPath]:[]))},onCancelEdit:()=>{S(null),f(""),j(""),v("global"),m([])},onSaveEdit:()=>void Q(),onDelete:()=>void O(r.id)},r.id))})]},t))]})]}),te&&e.jsx(Y,{initialPath:x||"/",onSelect:t=>{L(s=>s.includes(t)?s:[...s,t]),V(!1)},onClose:()=>V(!1)}),se&&e.jsx(Y,{initialPath:x||"/",onSelect:t=>{m(s=>s.includes(t)?s:[...s,t]),G(!1)},onClose:()=>G(!1)})]})}function ee({scope:o,onScopeChange:a,folders:i,onRemoveFolder:h,onAddFolder:b}){return e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"block text-xs font-medium text-cc-muted",children:"Scope"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("button",{type:"button","aria-pressed":o==="global",onClick:()=>a("global"),className:`px-3 py-1.5 text-xs rounded-md border transition-colors cursor-pointer ${o==="global"?"border-cc-primary/40 text-cc-primary bg-cc-primary/8":"border-cc-border text-cc-muted hover:text-cc-fg hover:bg-cc-hover"}`,children:"Global"}),e.jsx("button",{type:"button","aria-pressed":o==="project",onClick:()=>a("project"),className:`px-3 py-1.5 text-xs rounded-md border transition-colors cursor-pointer ${o==="project"?"border-cc-primary/40 text-cc-primary bg-cc-primary/8":"border-cc-border text-cc-muted hover:text-cc-fg hover:bg-cc-hover"}`,children:"Project folders"})]}),o==="project"&&e.jsxs("div",{className:"space-y-1.5",children:[i.length>0&&e.jsx("div",{className:"flex flex-wrap gap-1.5",children:i.map(l=>e.jsxs("span",{className:"inline-flex items-center gap-1 px-2 py-1 rounded-md bg-cc-hover text-xs font-mono-code text-cc-fg",children:[e.jsx("span",{className:"truncate max-w-[200px]",title:l,children:l.split("/").pop()||l}),e.jsx("button",{type:"button",onClick:()=>h(l),className:"text-cc-muted hover:text-cc-error cursor-pointer shrink-0","aria-label":`Remove folder ${l}`,children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"w-3 h-3",children:e.jsx("path",{d:"M4 4l8 8M12 4l-8 8",strokeLinecap:"round"})})})]},l))}),e.jsxs("button",{type:"button",onClick:b,className:"inline-flex items-center gap-1 px-2 py-1 text-xs text-cc-muted hover:text-cc-fg hover:bg-cc-hover rounded-md border border-dashed border-cc-border transition-colors cursor-pointer",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:"M8 3v10M3 8h10",strokeLinecap:"round"})}),"Add folder"]})]})]})}function ie({prompt:o}){if(o.scope==="global")return e.jsx("span",{className:"text-[10px] uppercase tracking-wider text-cc-muted opacity-60",children:"global"});const a=o.projectPaths??(o.projectPath?[o.projectPath]:[]);return a.length===0?null:e.jsx("span",{className:"inline-flex items-center gap-1 flex-wrap",children:a.map(i=>e.jsx("span",{className:"text-[10px] px-1.5 py-0.5 rounded bg-cc-primary/8 text-cc-primary/70 font-mono-code",title:i,children:i.split("/").pop()||i},i))})}function _({prompt:o,isEditing:a,editName:i,editContent:h,editScope:b,editFolders:l,onEditNameChange:M,onEditContentChange:$,onEditScopeChange:d,onEditRemoveFolder:u,onEditAddFolder:I,onStartEdit:g,onCancelEdit:B,onSaveEdit:y,onDelete:R}){return a?e.jsxs("div",{className:"rounded-xl bg-cc-card p-4 space-y-3",style:{animation:"fadeSlideIn 150ms ease-out"},children:[e.jsx("input",{value:i,onChange:p=>M(p.target.value),placeholder:"Prompt title",className:"w-full px-3 py-2.5 min-h-[44px] text-sm bg-cc-bg rounded-lg text-cc-fg focus:outline-none focus:ring-1 focus:ring-cc-primary/40 transition-shadow"}),e.jsx("textarea",{value:h,onChange:p=>$(p.target.value),rows:4,className:"w-full px-3 py-2.5 text-sm bg-cc-bg rounded-lg text-cc-fg focus:outline-none focus:ring-1 focus:ring-cc-primary/40 resize-y transition-shadow"}),e.jsx(ee,{scope:b,onScopeChange:d,folders:l,onRemoveFolder:u,onAddFolder:I}),e.jsxs("div",{className:"flex justify-end gap-2",children:[e.jsx("button",{onClick:B,className:"px-3 py-2.5 min-h-[44px] text-sm rounded-lg text-cc-muted hover:text-cc-fg hover:bg-cc-hover transition-colors cursor-pointer",children:"Cancel"}),e.jsx("button",{onClick:y,disabled:!i.trim()||!h.trim(),className:`px-4 py-2.5 min-h-[44px] text-sm rounded-lg font-medium transition-colors ${i.trim()&&h.trim()?"bg-cc-primary hover:bg-cc-primary-hover text-white cursor-pointer":"bg-cc-hover text-cc-muted cursor-not-allowed"}`,children:"Save"})]})]}):e.jsxs("div",{className:"group flex items-start gap-3 px-3 py-3 min-h-[44px] rounded-lg hover:bg-cc-hover/60 transition-colors",children:[e.jsx("div",{className:"shrink-0 mt-0.5 w-7 h-7 rounded-md bg-cc-primary/10 flex items-center justify-center",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5 text-cc-primary",children:e.jsx("path",{d:"M7 8h10M7 12h6M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8l-4 4V5Z"})})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm font-medium text-cc-fg truncate",children:o.name}),e.jsx(ie,{prompt:o})]}),e.jsx("p",{className:"mt-0.5 text-xs text-cc-muted line-clamp-2 leading-relaxed",children:o.content})]}),e.jsxs("div",{className:"shrink-0 flex items-center gap-0.5 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity",children:[e.jsx("button",{onClick:g,className:"p-2 min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 sm:p-1.5 rounded-md text-cc-muted hover:text-cc-fg hover:bg-cc-active transition-colors cursor-pointer","aria-label":"Edit",children:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5",children:[e.jsx("path",{d:"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"}),e.jsx("path",{d:"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5Z"})]})}),e.jsx("button",{onClick:R,className:"p-2 min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 sm:p-1.5 rounded-md text-cc-muted hover:text-cc-error hover:bg-cc-error/10 transition-colors cursor-pointer","aria-label":"Delete",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14Z"})})})]})]})}export{de as PromptsPage};

package/dist/assets/RunsPage-C5BZF5Rx.js

@@ -0,0 +1 @@
+import{r,b as N,j as e}from"./index-CEqZnThB.js";import{t as I}from"./time-ago-B6r_l9u1.js";function g(c){switch(c){case"manual":return"Manual";case"webhook":return"Webhook";case"schedule":return"Schedule";default:return c}}function v(c){switch(c){case"manual":return"bg-blue-500/10 text-blue-600 dark:text-blue-400";case"webhook":return"bg-purple-500/10 text-purple-600 dark:text-purple-400";case"schedule":return"bg-amber-500/10 text-amber-600 dark:text-amber-400";default:return"bg-cc-hover text-cc-muted"}}function E(c){return c.error?{label:"Error",color:"text-cc-error"}:c.success?{label:"Success",color:"text-cc-success"}:c.completedAt?{label:"Unknown",color:"text-cc-muted"}:{label:"Running",color:"text-cc-warning"}}function y(c,x){const l=(x||Date.now())-c;if(l<1e3)return"<1s";if(l<6e4)return`${Math.round(l/1e3)}s`;const u=Math.floor(l/6e4),h=Math.round(l%6e4/1e3);return`${u}m ${h}s`}function D(){const[c,x]=r.useState([]),[m,l]=r.useState([]),[u,h]=r.useState(0),[w,k]=r.useState(!0),[n,A]=r.useState("all"),[i,S]=r.useState("all"),[o,C]=r.useState(""),[s,f]=r.useState(null),p=r.useCallback(async()=>{try{const t={limit:100};n!=="all"&&(t.triggerType=n),i!=="all"&&(t.status=i),o&&(t.agentId=o);const a=await N.listExecutions(t);x(a.executions),h(a.total)}catch(t){console.error("[runs] Failed to fetch executions:",t)}finally{k(!1)}},[n,i,o]),b=r.useCallback(async()=>{try{const t=await N.listAgents();l(t)}catch(t){console.error("[runs] Failed to fetch agents:",t)}},[]);r.useEffect(()=>{b()},[b]),r.useEffect(()=>{p();const t=setInterval(p,5e3);return()=>clearInterval(t)},[p]);const j=t=>{const a=m.find(d=>d.id===t);return(a==null?void 0:a.name)||t};return e.jsxs("div",{className:"h-full flex flex-col bg-cc-bg",children:[e.jsxs("div",{className:"shrink-0 border-b border-cc-border px-6 py-4",children:[e.jsx("h1",{className:"text-lg font-semibold text-cc-fg",children:"Runs"}),e.jsx("p",{className:"text-sm text-cc-muted mt-1",children:"Monitor agent executions across all triggers"})]}),e.jsxs("div",{className:"shrink-0 border-b border-cc-border px-6 py-3 flex items-center gap-4 flex-wrap",children:[e.jsxs("select",{value:o,onChange:t=>C(t.target.value),className:"text-sm rounded-md border border-cc-border bg-cc-input-bg text-cc-fg px-2 py-1","aria-label":"Filter by agent",children:[e.jsx("option",{value:"",children:"All agents"}),m.map(t=>e.jsx("option",{value:t.id,children:t.name},t.id))]}),e.jsx("div",{className:"flex items-center gap-1",children:["all","manual","webhook","schedule"].map(t=>e.jsx("button",{onClick:()=>A(t),className:`text-xs px-2.5 py-1 rounded-full transition-colors ${n===t?"bg-cc-fg text-cc-bg":"bg-cc-hover text-cc-muted hover:text-cc-fg"}`,children:t==="all"?"All triggers":g(t)},t))}),e.jsx("div",{className:"flex items-center gap-1",children:["all","running","success","error"].map(t=>e.jsx("button",{onClick:()=>S(t),className:`text-xs px-2.5 py-1 rounded-full transition-colors ${i===t?"bg-cc-fg text-cc-bg":"bg-cc-hover text-cc-muted hover:text-cc-fg"}`,children:t==="all"?"All statuses":t.charAt(0).toUpperCase()+t.slice(1)},t))}),e.jsxs("span",{className:"text-xs text-cc-muted ml-auto",children:[u," total"]})]}),e.jsx("div",{className:"flex-1 overflow-auto",children:w?e.jsx("div",{className:"text-sm text-cc-muted text-center py-12",children:"Loading..."}):c.length===0?e.jsxs("div",{className:"text-center py-16",children:[e.jsx("div",{className:"mb-3 flex justify-center text-cc-muted",children:e.jsx("svg",{viewBox:"0 0 16 16",fill:"currentColor",className:"w-8 h-8",children:e.jsx("path",{d:"M8 1a7 7 0 100 14A7 7 0 008 1zm-.75 3.5a.75.75 0 011.5 0v3.19l2.03 2.03a.75.75 0 01-1.06 1.06l-2.25-2.25A.75.75 0 017.25 8V4.5z"})})}),e.jsx("p",{className:"text-sm text-cc-muted",children:"No executions found"}),e.jsx("p",{className:"text-xs text-cc-muted mt-1",children:"Run an agent to see executions here"})]}):e.jsxs("table",{className:"w-full text-sm",role:"table",children:[e.jsx("thead",{className:"sticky top-0 bg-cc-card backdrop-blur",children:e.jsxs("tr",{className:"text-left text-xs text-cc-muted uppercase tracking-wider",children:[e.jsx("th",{className:"px-6 py-2 font-medium",children:"Agent"}),e.jsx("th",{className:"px-4 py-2 font-medium",children:"Trigger"}),e.jsx("th",{className:"px-4 py-2 font-medium",children:"Status"}),e.jsx("th",{className:"px-4 py-2 font-medium",children:"Started"}),e.jsx("th",{className:"px-4 py-2 font-medium",children:"Duration"}),e.jsx("th",{className:"px-4 py-2 font-medium",children:"Session"})]})}),e.jsx("tbody",{className:"divide-y divide-cc-border/50",children:c.map(t=>{const a=E(t),d=(s==null?void 0:s.sessionId)===t.sessionId;return e.jsxs("tr",{onClick:()=>f(d?null:t),className:`cursor-pointer transition-colors ${d?"bg-cc-active":"hover:bg-cc-hover"}`,children:[e.jsx("td",{className:"px-6 py-3",children:e.jsx("div",{className:"flex items-center gap-2",children:e.jsx("span",{className:"text-cc-fg font-medium",children:j(t.agentId)})})}),e.jsx("td",{className:"px-4 py-3",children:e.jsx("span",{className:`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${v(t.triggerType)}`,children:g(t.triggerType)})}),e.jsx("td",{className:"px-4 py-3",children:e.jsxs("span",{className:`font-medium ${a.color}`,children:[!t.completedAt&&!t.error&&e.jsx("span",{className:"inline-block w-1.5 h-1.5 rounded-full bg-cc-warning mr-1.5 animate-pulse"}),a.label]})}),e.jsx("td",{className:"px-4 py-3 text-cc-muted",children:I(t.startedAt)}),e.jsx("td",{className:"px-4 py-3 text-cc-muted font-mono text-xs",children:y(t.startedAt,t.completedAt)}),e.jsx("td",{className:"px-4 py-3",children:t.sessionId&&e.jsx("a",{href:`#/session/${t.sessionId}`,onClick:$=>$.stopPropagation(),className:"text-cc-primary hover:text-cc-primary-hover text-xs font-mono underline",children:"Open"})})]},`${t.sessionId}-${t.startedAt}`)})})]})}),s&&e.jsxs("div",{className:"shrink-0 border-t border-cc-border bg-cc-card px-6 py-4",children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("h3",{className:"text-sm font-semibold text-cc-fg",children:"Execution Details"}),e.jsx("button",{onClick:()=>f(null),className:"text-cc-muted hover:text-cc-fg text-sm transition-colors","aria-label":"Close details",children:"Close"})]}),e.jsxs("div",{className:"grid grid-cols-2 md:grid-cols-4 gap-4 text-sm",children:[e.jsxs("div",{children:[e.jsx("span",{className:"text-cc-muted",children:"Agent"}),e.jsx("p",{className:"text-cc-fg font-medium",children:j(s.agentId)})]}),e.jsxs("div",{children:[e.jsx("span",{className:"text-cc-muted",children:"Trigger"}),e.jsx("p",{className:`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${v(s.triggerType)}`,children:g(s.triggerType)})]}),e.jsxs("div",{children:[e.jsx("span",{className:"text-cc-muted",children:"Started"}),e.jsx("p",{className:"text-cc-fg",children:new Date(s.startedAt).toLocaleString()})]}),e.jsxs("div",{children:[e.jsx("span",{className:"text-cc-muted",children:"Duration"}),e.jsx("p",{className:"text-cc-fg font-mono",children:y(s.startedAt,s.completedAt)})]})]}),s.error&&e.jsx("div",{className:"mt-3 p-2 bg-cc-error/10 rounded text-sm text-cc-error font-mono whitespace-pre-wrap",children:s.error}),s.sessionId&&e.jsx("a",{href:`#/session/${s.sessionId}`,className:"mt-3 inline-flex items-center gap-1 text-sm text-cc-primary hover:text-cc-primary-hover",children:"Open session to view live output"})]})]})}export{D as RunsPage};

package/dist/assets/SandboxManager-a1AVI5q2.js

@@ -0,0 +1,8 @@
+import{r as n,b as c,j as e}from"./index-CEqZnThB.js";function X({embedded:f=!1}){const[u,k]=n.useState([]),[V,W]=n.useState(!0),[v,l]=n.useState(""),[o,M]=n.useState(!1),[C,R]=n.useState(!1),[b,B]=n.useState(null),[s,E]=n.useState(null),i=n.useRef(null),[p,I]=n.useState(""),[T,D]=n.useState(""),[j,y]=n.useState(null),[P,$]=n.useState(""),[N,H]=n.useState(""),[h,w]=n.useState(null),[m,d]=n.useState(null),x=n.useRef({}),[S,z]=n.useState(""),g=n.useCallback(()=>{c.listSandboxes().then(k).catch(()=>{}).finally(()=>W(!1))},[]);n.useEffect(()=>{g(),c.getContainerStatus().then(t=>B(t.available)).catch(()=>B(!1)),c.getImageStatus("heyhank:latest").then(t=>E(t)).catch(()=>{}),c.getHome().then(({cwd:t})=>z(t)).catch(()=>{})},[g]),n.useEffect(()=>{if(!s||s.status!=="pulling"){i.current&&(clearInterval(i.current),i.current=null);return}return i.current||(i.current=setInterval(()=>{c.getImageStatus("heyhank:latest").then(t=>E(t)).catch(()=>{})},2e3)),()=>{i.current&&(clearInterval(i.current),i.current=null)}},[s]);function L(){c.pullImage("heyhank:latest").then(t=>{t.state&&E(t.state)}).catch(()=>{})}async function A(){const t=p.trim();if(t){R(!0);try{await c.createSandbox(t,{initScript:T||void 0}),I(""),D(""),M(!1),l(""),g()}catch(r){l(r instanceof Error?r.message:String(r))}finally{R(!1)}}}function Z(t){x.current={},y(t.slug),$(t.name),H(t.initScript||""),d(null),l("")}function q(){x.current={},y(null),d(null),w(null),l("")}async function K(){if(j){x.current={},w(null);try{await c.updateSandbox(j,{name:P.trim()||void 0,initScript:N||void 0}),y(null),d(null),l(""),g()}catch(t){l(t instanceof Error?t.message:String(t))}}}async function U(t){try{await c.deleteSandbox(t),j===t&&y(null),g()}catch(r){l(r instanceof Error?r.message:String(r))}}async function F(t){if(!S)return;const r={};x.current=r,w(t),d(null);try{const a=await c.testInitScript(t,S,N);if(x.current!==r)return;d(a)}catch(a){if(x.current!==r)return;d({success:!1,exitCode:-1,output:a instanceof Error?a.message:String(a)})}finally{x.current===r&&w(null)}}const G=b===null?null:b?e.jsx("span",{className:"text-[10px] px-2 py-1 rounded-md bg-green-500/10 text-green-500 font-medium",children:"Docker"}):e.jsx("span",{className:"text-[10px] px-2 py-1 rounded-md bg-amber-500/10 text-amber-500 font-medium",children:"No Docker"});function J(){if(!b)return null;const t=(s==null?void 0:s.status)==="pulling";return e.jsxs("div",{className:"rounded-xl bg-cc-card p-3 sm:p-4 mb-5",children:[e.jsxs("div",{className:"flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2 min-w-0",children:[e.jsx("span",{className:"text-[11px] font-medium text-cc-muted",children:"Base Image"}),e.jsx("code",{className:"text-[10px] font-mono-code text-cc-fg",children:"heyhank:latest"}),(s==null?void 0:s.status)==="ready"&&e.jsx("span",{className:"text-[10px] px-1.5 py-0.5 rounded bg-green-500/10 text-green-500",children:"Ready"}),(s==null?void 0:s.status)==="pulling"&&e.jsxs("span",{className:"text-[10px] px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-500 flex items-center gap-1",children:[e.jsx("span",{className:"w-2.5 h-2.5 border border-amber-500/30 border-t-amber-500 rounded-full animate-spin"}),"Pulling..."]}),(s==null?void 0:s.status)==="error"&&e.jsx("span",{className:"text-[10px] px-1.5 py-0.5 rounded bg-cc-error/10 text-cc-error",children:"Pull failed"}),(!s||s.status==="idle")&&e.jsx("span",{className:"text-[10px] px-1.5 py-0.5 rounded bg-cc-hover text-cc-muted",children:"Not downloaded"})]}),(s==null?void 0:s.status)!=="ready"&&e.jsx("button",{onClick:L,disabled:t,className:`text-xs px-3 py-2 min-h-[36px] rounded-lg transition-colors shrink-0 ${t?"bg-cc-hover text-cc-muted cursor-not-allowed":"bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 cursor-pointer"}`,children:t?"Pulling...":"Pull"})]}),t&&(s==null?void 0:s.progress)&&s.progress.length>0&&e.jsx("pre",{className:"mt-2 px-3 py-2 text-[10px] font-mono-code bg-cc-code-bg rounded-lg text-cc-muted max-h-[120px] overflow-auto whitespace-pre-wrap",children:s.progress.slice(-20).join(`
+`)}),(s==null?void 0:s.status)==="error"&&s.error&&e.jsx("p",{className:"mt-2 text-[10px] text-cc-error",children:s.error})]})}return f?e.jsx("div",{className:"h-full bg-cc-bg text-cc-fg font-sans-ui antialiased overflow-y-auto overflow-x-hidden",children:e.jsxs("div",{className:"max-w-2xl mx-auto px-4 sm:px-6 py-6 sm:py-10 pb-safe",children:[e.jsxs("div",{className:"flex items-start justify-between gap-3 mb-2",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx("h1",{className:"text-lg font-semibold text-cc-fg",children:"Sandboxes"}),e.jsx("p",{className:"mt-0.5 text-[13px] text-cc-muted leading-relaxed",children:"Reusable sandbox configurations for containerized sessions."})]}),e.jsx("div",{className:"flex items-center gap-2 shrink-0",children:G})]}),J(),e.jsxs("div",{className:"flex items-center gap-2 mt-4 mb-5",children:[e.jsx("div",{className:"flex-1"}),e.jsxs("button",{onClick:()=>M(!o),className:`flex items-center gap-1.5 px-3.5 py-2.5 min-h-[44px] rounded-lg text-sm font-medium transition-colors cursor-pointer shrink-0 ${o?"bg-cc-active text-cc-fg":"bg-cc-primary hover:bg-cc-primary-hover text-white"}`,children:[e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",className:"w-4 h-4",children:o?e.jsx("path",{d:"M18 6 6 18M6 6l12 12"}):e.jsx("path",{d:"M12 5v14M5 12h14"})}),e.jsx("span",{className:"hidden sm:inline",children:o?"Cancel":"New Sandbox"})]})]}),o&&e.jsxs("div",{className:"mb-6 rounded-xl bg-cc-card p-4 sm:p-5 space-y-3",style:{animation:"fadeSlideIn 150ms ease-out"},children:[e.jsx("input",{type:"text",value:p,onChange:t=>I(t.target.value),placeholder:"Sandbox name (e.g. node-project)",className:"w-full px-3 py-2.5 min-h-[44px] text-sm bg-cc-bg rounded-lg text-cc-fg placeholder:text-cc-muted focus:outline-none focus:ring-1 focus:ring-cc-primary/40 transition-shadow",onKeyDown:t=>{t.key==="Enter"&&p.trim()&&A()}}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-[11px] font-medium text-cc-muted mb-1",children:"Init Script (optional)"}),e.jsx("textarea",{value:T,onChange:t=>D(t.target.value),placeholder:`# Runs inside the container before Claude starts
+# Example:
+bun install
+pip install -r requirements.txt`,rows:5,className:"w-full px-3 py-2.5 text-[11px] font-mono-code bg-cc-bg rounded-lg text-cc-fg placeholder:text-cc-muted focus:outline-none focus:ring-1 focus:ring-cc-primary/40 resize-y transition-shadow",style:{minHeight:"80px"}})]}),v&&o&&e.jsx("div",{className:"px-3 py-2 rounded-lg bg-cc-error/10 text-xs text-cc-error",children:v}),e.jsxs("div",{className:"flex items-center justify-between pt-1",children:[e.jsxs("p",{className:"text-[11px] text-cc-muted",children:["Stored in ",e.jsx("code",{className:"text-[10px]",children:"~/.heyhank/sandboxes/"})]}),e.jsx("button",{onClick:A,disabled:!p.trim()||C,className:`px-4 py-2.5 min-h-[44px] rounded-lg text-sm font-medium transition-colors ${p.trim()&&!C?"bg-cc-primary hover:bg-cc-primary-hover text-white cursor-pointer":"bg-cc-hover text-cc-muted cursor-not-allowed"}`,children:C?"Creating...":"Create"})]})]}),e.jsx("div",{className:"flex items-center gap-2 mb-3 text-[12px] text-cc-muted",children:e.jsxs("span",{children:[u.length," sandbox",u.length!==1?"es":""]})}),V?e.jsx("div",{className:"py-12 text-center text-sm text-cc-muted",children:"Loading sandboxes..."}):u.length===0?e.jsx("div",{className:"py-12 text-center text-sm text-cc-muted",children:"No sandboxes yet."}):e.jsx("div",{className:"space-y-1",children:u.map(t=>j===t.slug?e.jsxs("div",{className:"rounded-xl bg-cc-card p-4 space-y-3",style:{animation:"fadeSlideIn 150ms ease-out"},children:[e.jsx("input",{type:"text",value:P,onChange:a=>$(a.target.value),placeholder:"Sandbox name",className:"w-full px-3 py-2.5 min-h-[44px] text-sm bg-cc-bg rounded-lg text-cc-fg focus:outline-none focus:ring-1 focus:ring-cc-primary/40 transition-shadow"}),e.jsxs("div",{children:[e.jsx("div",{className:"flex items-center justify-between mb-1",children:e.jsx("div",{className:"text-[11px] font-medium text-cc-muted",children:"Init Script (optional)"})}),e.jsx("textarea",{value:N,onChange:a=>{H(a.target.value),d(null)},placeholder:`# Runs inside the container before Claude starts
+# Example:
+bun install
+pip install -r requirements.txt`,rows:5,className:"w-full px-3 py-2.5 text-[11px] font-mono-code bg-cc-bg rounded-lg text-cc-fg placeholder:text-cc-muted focus:outline-none focus:ring-1 focus:ring-cc-primary/40 resize-y transition-shadow",style:{minHeight:"80px"}})]}),h===t.slug&&e.jsxs("div",{className:"flex items-center gap-2 px-3 py-2 rounded-lg bg-amber-500/10 text-xs text-amber-500",children:[e.jsx("span",{className:"w-3 h-3 border-2 border-amber-500/30 border-t-amber-500 rounded-full animate-spin"}),"Testing init script..."]}),m&&h!==t.slug&&e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:`flex items-center gap-2 px-3 py-2 rounded-lg text-xs ${m.success?"bg-green-500/10 text-green-500":"bg-cc-error/10 text-cc-error"}`,children:m.success?"Test passed":`Test failed (exit ${m.exitCode})`}),m.output&&e.jsx("pre",{className:"px-3 py-2 text-[10px] font-mono-code bg-cc-code-bg rounded-lg text-cc-muted max-h-[200px] overflow-auto whitespace-pre-wrap",children:m.output})]}),e.jsxs("div",{className:"flex justify-end gap-2",children:[N.trim()&&b&&e.jsx("button",{onClick:()=>void F(t.slug),disabled:h===t.slug||!S,className:`px-3 py-2.5 min-h-[44px] text-sm rounded-lg font-medium transition-colors ${h===t.slug||!S?"bg-cc-hover text-cc-muted cursor-not-allowed":"bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 cursor-pointer"}`,children:h===t.slug?"Testing...":"Test Init Script"}),e.jsx("button",{onClick:q,className:"px-3 py-2.5 min-h-[44px] text-sm rounded-lg text-cc-muted hover:text-cc-fg hover:bg-cc-hover transition-colors cursor-pointer",children:"Cancel"}),e.jsx("button",{onClick:()=>void K(),className:"px-4 py-2.5 min-h-[44px] text-sm rounded-lg font-medium bg-cc-primary hover:bg-cc-primary-hover text-white transition-colors cursor-pointer",children:"Save"})]})]},t.slug):e.jsx(O,{sandbox:t,onStartEdit:()=>Z(t),onDelete:()=>void U(t.slug)},t.slug))}),v&&!o&&e.jsx("div",{className:"mt-4 px-3 py-2 rounded-lg bg-cc-error/10 text-xs text-cc-error",children:v})]})}):e.jsx("div",{className:"h-full bg-cc-bg text-cc-fg font-sans-ui antialiased overflow-y-auto overflow-x-hidden",children:e.jsx("div",{className:"max-w-2xl mx-auto px-4 sm:px-6 py-6 sm:py-10 pb-safe",children:e.jsx("div",{className:"py-12 text-center text-sm text-cc-muted",children:"Use embedded mode to view sandboxes."})})})}function O({sandbox:f,onStartEdit:u,onDelete:k}){return e.jsxs("div",{className:"group flex items-start gap-3 px-3 py-3 min-h-[44px] rounded-lg hover:bg-cc-hover/60 transition-colors",children:[e.jsx("div",{className:"shrink-0 mt-0.5 w-7 h-7 rounded-md bg-cc-primary/10 flex items-center justify-center",children:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5 text-cc-primary",children:[e.jsx("path",{d:"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"}),e.jsx("path",{d:"M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12"})]})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("div",{className:"flex items-center gap-2",children:e.jsx("span",{className:"text-sm font-medium text-cc-fg truncate",children:f.name})}),e.jsx("p",{className:"mt-0.5 text-xs text-cc-muted",children:f.initScript?"init script":"no init script"})]}),e.jsxs("div",{className:"shrink-0 flex items-center gap-0.5 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity",children:[e.jsx("button",{onClick:u,className:"p-2 min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 sm:p-1.5 rounded-md text-cc-muted hover:text-cc-fg hover:bg-cc-active transition-colors cursor-pointer","aria-label":"Edit",children:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5",children:[e.jsx("path",{d:"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"}),e.jsx("path",{d:"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5Z"})]})}),e.jsx("button",{onClick:k,className:"p-2 min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 sm:p-1.5 rounded-md text-cc-muted hover:text-cc-error hover:bg-cc-error/10 transition-colors cursor-pointer","aria-label":"Delete",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-3.5 h-3.5",children:e.jsx("path",{d:"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14Z"})})})]})]})}export{X as SandboxManager};