@grackle-ai/web 0.55.0 → 0.56.1

package/dist/assets/{index-CzTBbCGx.js → index-C0E_jps0.js}

@@ -97,4 +97,4 @@ const grackle = await host.mcpServer({
   url: env.vars.GRACKLE_MCP_URL,
 });
 
-$\`Summarize the current tasks.\`;`,rows:20,className:Ze.scriptEditor,required:!0,"data-testid":"persona-script-editor"})]})]}),c.jsxs("div",{className:Ze.formActions,children:[c.jsx("button",{type:"submit",className:Ze.btnPrimary,children:u?"Save":"Create"}),c.jsx("button",{type:"button",onClick:te,className:Ze.btnSecondary,children:"Cancel"})]})]});return c.jsxs("div",{className:Ze.container,children:[c.jsxs("div",{className:Ze.header,children:[c.jsx("h2",{children:"Personas"}),c.jsx("button",{onClick:ce,className:Ze.btnPrimary,children:"+ New Persona"})]}),(m||u)&&re(),n.length===0&&!m?c.jsx("p",{className:Ze.empty,children:"No personas yet. Create one to get started."}):c.jsx("div",{className:Ze.list,children:n.map(O=>{const W=r===O.id,ke=O.type==="script";return c.jsxs("div",{className:`${Ze.card} ${(u==null?void 0:u.id)===O.id?Ze.active:""}`,"data-testid":`persona-card-${O.id}`,children:[c.jsxs("div",{className:Ze.cardHeader,children:[c.jsxs("span",{className:Ze.cardTitle,children:[c.jsx("strong",{children:O.name}),c.jsx("span",{className:Ze.typeBadge,"data-testid":`persona-type-badge-${O.id}`,children:ke?"Script":"Agent"}),W&&c.jsx("span",{className:Ze.defaultBadge,"data-testid":`persona-default-badge-${O.id}`,children:"App Default"})]}),c.jsxs("div",{className:Ze.cardActions,children:[!W&&c.jsx("button",{onClick:()=>d(O.id),className:Ze.btnSmall,"data-testid":`persona-set-default-${O.id}`,title:"Set as app default persona",children:"Set Default"}),c.jsx("button",{onClick:()=>Q(O),className:Ze.btnSmall,children:"Edit"}),y===O.id?c.jsxs(c.Fragment,{children:[c.jsx("button",{onClick:()=>M(O.id),className:Ze.btnDanger,children:"Confirm"}),c.jsx("button",{onClick:()=>v(null),className:Ze.btnSmall,children:"Cancel"})]}):c.jsx("button",{onClick:()=>v(O.id),className:Ze.btnSmall,children:"Delete"})]})]}),O.description&&c.jsx("p",{className:Ze.description,children:O.description}),c.jsxs("div",{className:Ze.meta,children:[O.runtime&&c.jsxs("span",{children:["Runtime: ",O.runtime]}),O.model&&c.jsxs("span",{children:["Model: ",O.model]}),O.maxTurns>0&&c.jsxs("span",{children:["Max turns: ",O.maxTurns]})]}),ke?c.jsxs("details",{className:Ze.promptDetails,children:[c.jsx("summary",{children:"Script"}),c.jsx("pre",{className:Ze.promptText,children:O.script})]}):c.jsxs("details",{className:Ze.promptDetails,children:[c.jsx("summary",{children:"System Prompt"}),c.jsx("pre",{className:Ze.promptText,children:O.systemPrompt})]})]},O.id)})})]})}function eL(){return c.jsx(JI,{})}function tL(){const{themeId:n,resolvedThemeId:a,setTheme:i,preferSystem:l,setPreferSystem:r}=Tb();return c.jsxs("section",{className:fe.section,children:[c.jsx("h3",{className:fe.sectionTitle,children:"Appearance"}),c.jsx("p",{className:fe.sectionDescription,children:"Choose how Grackle looks across the app."}),c.jsx("div",{className:fe.themeOptions,children:gc.filter(d=>!d.hidden).map(d=>{const u=!!(d.variantLightId&&d.variantDarkId),p=u?n===d.id||n===d.variantLightId||n===d.variantDarkId:n===d.id,m=u&&a===d.variantLightId;return c.jsxs("button",{type:"button",className:`${fe.themeOption} ${p?fe.themeOptionSelected:""}`,"aria-pressed":p,onClick:()=>i(d.id),children:[c.jsxs("span",{className:fe.themeOptionHeader,children:[c.jsxs("span",{children:[c.jsx("span",{className:fe.themeOptionLabel,children:d.label}),c.jsx("span",{className:fe.themeOptionDesc,children:d.description})]}),u&&c.jsxs("span",{className:fe.variantToggle,children:[c.jsx("span",{role:"button",tabIndex:0,className:`${fe.variantButton} ${p&&m?fe.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(d.variantLightId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(d.variantLightId))},"aria-label":"Light variant","aria-pressed":p&&m,children:"☼"}),c.jsx("span",{role:"button",tabIndex:0,className:`${fe.variantButton} ${p&&!m?fe.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(d.variantDarkId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(d.variantDarkId))},"aria-label":"Dark variant","aria-pressed":p&&!m,children:"☾"})]})]}),d.swatches&&c.jsx("span",{className:fe.themeSwatches,children:d.swatches.map((g,y)=>c.jsx("span",{className:fe.themeSwatch,style:{background:g}},y))})]},d.id)})}),c.jsxs("label",{className:fe.systemToggle,children:[c.jsx("input",{type:"checkbox",checked:l,onChange:d=>r(d.target.checked)}),c.jsx("span",{children:"Match system light/dark preference"})]}),c.jsx("p",{className:fe.systemToggleHint,children:"Automatically switches between light and dark variants when available."}),c.jsxs("p",{className:fe.themeActive,children:["Active theme: ",c.jsx("strong",{children:a})]})]})}function nL(){return c.jsx(tL,{})}function aL(){const{connected:n,environments:a,sessions:i}=vt(),l=a.filter(u=>u.status==="connected").length,r=a.length,d=i.filter(u=>["running","idle"].includes(u.status)).length;return c.jsxs("section",{className:fe.section,"data-testid":"about-panel",children:[c.jsx("h3",{className:fe.sectionTitle,children:"About"}),c.jsx("p",{className:fe.sectionDescription,children:"Connection status and application information."}),c.jsxs("div",{className:fe.aboutGrid,children:[c.jsxs("div",{className:fe.aboutItem,children:[c.jsx("span",{className:fe.aboutLabel,children:"Connection"}),c.jsxs("span",{className:fe.aboutValue,children:[c.jsx("span",{className:`${fe.aboutDot} ${n?fe.aboutDotConnected:fe.aboutDotDisconnected}`}),n?"Connected":"Disconnected"]})]}),c.jsxs("div",{className:fe.aboutItem,children:[c.jsx("span",{className:fe.aboutLabel,children:"Environments"}),c.jsxs("span",{className:fe.aboutValue,children:[l,"/",r," connected"]})]}),c.jsxs("div",{className:fe.aboutItem,children:[c.jsx("span",{className:fe.aboutLabel,children:"Active Sessions"}),c.jsx("span",{className:fe.aboutValue,children:d})]}),c.jsxs("div",{className:fe.aboutItem,children:[c.jsx("span",{className:fe.aboutLabel,children:"Version"}),c.jsx("span",{className:fe.aboutValue,children:"0.54.1"})]})]})]})}function sL(){return c.jsx(aL,{})}const iL="_wizard_1260s_1",oL="_container_1260s_10",lL="_stepContent_1260s_19",rL="_logoArea_1260s_28",cL="_logoImage_1260s_32",uL="_heading_1260s_41",dL="_tagline_1260s_49",fL="_subtitle_1260s_56",hL="_featureList_1260s_64",pL="_runtimeGrid_1260s_89",mL="_runtimeCard_1260s_101",gL="_runtimeName_1260s_133",vL="_runtimeDescription_1260s_139",yL="_buttonRow_1260s_144",bL="_primaryButton_1260s_151",xL="_ghostButton_1260s_185",_L="_dots_1260s_213",SL="_dot_1260s_213",rt={wizard:iL,container:oL,stepContent:lL,logoArea:rL,logoImage:cL,heading:uL,tagline:dL,subtitle:fL,featureList:hL,runtimeGrid:pL,runtimeCard:mL,runtimeName:gL,runtimeDescription:vL,buttonRow:yL,primaryButton:bL,ghostButton:xL,dots:_L,dot:SL};function TL({onNext:n}){return c.jsxs("div",{className:rt.stepContent,"data-testid":"setup-welcome",children:[c.jsx("div",{className:rt.logoArea,children:c.jsx("img",{src:"/grackle-logo.png",alt:"Grackle",className:rt.logoImage})}),c.jsx("h1",{className:rt.heading,children:"Welcome to Grackle"}),c.jsx("p",{className:rt.tagline,children:"Multi-agent orchestration for software teams"}),c.jsx("button",{type:"button",className:rt.primaryButton,onClick:n,"data-testid":"setup-get-started",children:"Get Started"})]})}function kL({onNext:n,onBack:a}){return c.jsxs("div",{className:rt.stepContent,"data-testid":"setup-about",children:[c.jsx("h2",{className:rt.heading,children:"What is Grackle?"}),c.jsxs("ul",{className:rt.featureList,children:[c.jsx("li",{children:"Run Claude, Copilot, and Codex agents side by side"}),c.jsx("li",{children:"Provision and control dev environments — SSH, Codespaces, or local"}),c.jsx("li",{children:"Organize work into workspaces with agent-executable tasks"}),c.jsx("li",{children:"Customize agent behavior with personas, tools, and MCP servers"}),c.jsx("li",{children:"Live-stream agent sessions with full terminal replay"})]}),c.jsxs("div",{className:rt.buttonRow,children:[c.jsx("button",{type:"button",className:rt.ghostButton,onClick:a,children:"Back"}),c.jsx("button",{type:"button",className:rt.primaryButton,onClick:n,"data-testid":"setup-about-next",children:"Next"})]})]})}const CL=[{id:"claude-code",name:"Claude Code",description:"Anthropic's agentic coding tool"},{id:"copilot",name:"Copilot Coding Agent",description:"GitHub's AI pair programmer"},{id:"codex",name:"Codex CLI",description:"OpenAI's coding agent"}];function wL({currentRuntime:n,onFinish:a,onBack:i,finishDisabled:l}){const[r,d]=b.useState(n||"claude-code");return b.useEffect(()=>{n&&d(n)},[n]),c.jsxs("div",{className:rt.stepContent,"data-testid":"setup-runtime",children:[c.jsx("h2",{className:rt.heading,children:"Choose Your Runtime"}),c.jsx("p",{className:rt.subtitle,children:"Select the primary agent runtime for your workspace. You can change this later."}),c.jsx("div",{className:rt.runtimeGrid,children:CL.map(u=>c.jsxs("button",{type:"button",className:rt.runtimeCard,"data-selected":r===u.id,"aria-pressed":r===u.id,"data-testid":`runtime-card-${u.id}`,onClick:()=>d(u.id),children:[c.jsx("span",{className:rt.runtimeName,children:u.name}),c.jsx("span",{className:rt.runtimeDescription,children:u.description})]},u.id))}),c.jsxs("div",{className:rt.buttonRow,children:[c.jsx("button",{type:"button",className:rt.ghostButton,onClick:i,children:"Back"}),c.jsx("button",{type:"button",className:rt.primaryButton,onClick:()=>a(r),disabled:l,"data-testid":"setup-finish",children:"Finish"})]})]})}const EL=3,X0={"claude-code":"sonnet",copilot:"gpt-4o",codex:"o3"};function NL(){const{personas:n,updatePersona:a,completeOnboarding:i,onboardingCompleted:l}=vt(),r=Wt(),[d,u]=b.useState(0),p=n.find(g=>g.id==="claude-code"),m=b.useCallback(g=>{if(p&&g!==p.runtime){const v=X0[g]??"sonnet";a(p.id,void 0,void 0,void 0,g,v)}const y=n.find(v=>v.id===N0);if(y&&g!==y.runtime){const v=X0[g]??"sonnet";a(N0,void 0,void 0,void 0,g,v)}i(),r("/",{replace:!0})},[p,n,a,i,r]);return l===!0?c.jsx(Zo,{to:"/",replace:!0}):c.jsx("div",{className:rt.wizard,"data-testid":"setup-wizard",children:c.jsxs("div",{className:rt.container,children:[c.jsx(dn,{mode:"wait",children:c.jsxs(gt.div,{initial:{opacity:0,x:40},animate:{opacity:1,x:0},exit:{opacity:0,x:-40},transition:{duration:.2,ease:"easeInOut"},children:[d===0&&c.jsx(TL,{onNext:()=>u(1)}),d===1&&c.jsx(kL,{onNext:()=>u(2),onBack:()=>u(0)}),d===2&&c.jsx(wL,{currentRuntime:(p==null?void 0:p.runtime)??"claude-code",onFinish:m,onBack:()=>u(1),finishDisabled:!p})]},d)}),c.jsx("div",{className:rt.dots,children:Array.from({length:EL},(g,y)=>c.jsx("span",{className:rt.dot,"data-active":y===d},y))})]})})}const AL="_root_zndgp_1",jL="_body_zndgp_7",DL="_main_zndgp_19",ML="_sidebarWrapper_zndgp_26",RL="_overlay_zndgp_51",Po={root:AL,body:jL,main:DL,sidebarWrapper:ML,overlay:RL},BL=typeof window<"u"&&new URLSearchParams(window.location.search).has("mock");function OL(){const{lastSpawnedId:n,environments:a,connected:i,onboardingCompleted:l}=vt(),{showToast:r}=Gi();wR(a,r);const d=Wt(),u=Vt(),[p,m]=b.useState(!1),g=b.useCallback(()=>m(y=>!y),[]);return b.useEffect(()=>{m(!1)},[u.pathname]),b.useEffect(()=>{if(!p)return;const y=v=>{v.key==="Escape"&&m(!1)};return document.addEventListener("keydown",y),()=>{document.removeEventListener("keydown",y)}},[p]),b.useEffect(()=>{n&&!u.pathname.includes("/tasks/")&&d(ih(n),{replace:!0})},[n,d,u.pathname]),i&&l===!1?c.jsx(Zo,{to:"/setup",replace:!0}):c.jsxs("div",{className:Po.root,children:[c.jsx(UC,{onToggleSidebar:g,sidebarOpen:p}),c.jsx(FC,{}),c.jsxs("div",{className:Po.body,children:[c.jsx("div",{className:Po.sidebarWrapper,"data-sidebar-open":p,children:c.jsx(WM,{})}),p&&c.jsx("div",{className:Po.overlay,"data-testid":"drawer-overlay",onClick:()=>m(!1)}),c.jsxs("div",{className:Po.main,children:[c.jsx(db,{}),c.jsx(fR,{})]})]}),c.jsx(CR,{})]})}function IL(){return c.jsxs(hk,{children:[c.jsx(Qe,{path:"setup",element:c.jsx(NL,{})}),c.jsxs(Qe,{element:c.jsx(OL,{}),children:[c.jsx(Qe,{index:!0,element:c.jsx(JB,{})}),c.jsx(Qe,{path:"chat",element:c.jsx(yO,{})}),c.jsx(Qe,{path:"tasks",element:c.jsx(QB,{})}),c.jsx(Qe,{path:"tasks/new",element:c.jsx(p4,{})}),c.jsx(Qe,{path:"tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"tasks/:taskId/edit",element:c.jsx(q0,{})}),c.jsx(Qe,{path:"workspaces",element:c.jsx(WB,{})}),c.jsx(Qe,{path:"workspaces/:workspaceId",element:c.jsx(q6,{})}),c.jsx(Qe,{path:"workspaces/:workspaceId/tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"workspaces/:workspaceId/tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"workspaces/:workspaceId/tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"workspaces/:workspaceId/tasks/:taskId/edit",element:c.jsx(q0,{})}),c.jsx(Qe,{path:"sessions/new",element:c.jsx(kO,{})}),c.jsx(Qe,{path:"sessions/:sessionId",element:c.jsx(EO,{})}),c.jsx(Qe,{path:"environments/new",element:c.jsx(Q4,{})}),c.jsx(Qe,{path:"environments/:environmentId",element:c.jsx(W4,{})}),c.jsxs(Qe,{path:"settings",element:c.jsx(a5,{}),children:[c.jsx(Qe,{index:!0,element:c.jsx(Zo,{to:"environments",replace:!0})}),c.jsx(Qe,{path:"environments",element:c.jsx(H5,{})}),c.jsx(Qe,{path:"credentials",element:c.jsx(NI,{})}),c.jsx(Qe,{path:"tokens",element:c.jsx(Zo,{to:"../credentials",replace:!0})}),c.jsx(Qe,{path:"personas",element:c.jsx(eL,{})}),c.jsx(Qe,{path:"appearance",element:c.jsx(nL,{})}),c.jsx(Qe,{path:"about",element:c.jsx(sL,{})})]}),c.jsx(Qe,{path:"*",element:c.jsx(Zo,{to:"/",replace:!0})})]})]})}const LL=1e4;function zL(){const{onboardingCompleted:n}=vt(),[a,i]=b.useState(!1);b.useEffect(()=>{if(n!==void 0)return;const r=setTimeout(()=>i(!0),LL);return()=>clearTimeout(r)},[n]);const l=n===void 0&&!a;return c.jsx(dn,{mode:"wait",children:l?c.jsx(gt.div,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.25},children:c.jsx(QD,{})},"splash"):c.jsx(gt.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.25},style:{minHeight:"100vh"},children:c.jsx(zk,{children:c.jsx(IL,{})})},"app")})}function UL(){const n=BL?TC:pC;return c.jsx(AC,{children:c.jsx(CC,{children:c.jsx(n,{children:c.jsx(zL,{})})})})}tT.createRoot(document.getElementById("root")).render(c.jsx(b.StrictMode,{children:c.jsx(UL,{})}));
+$\`Summarize the current tasks.\`;`,rows:20,className:Ze.scriptEditor,required:!0,"data-testid":"persona-script-editor"})]})]}),c.jsxs("div",{className:Ze.formActions,children:[c.jsx("button",{type:"submit",className:Ze.btnPrimary,children:u?"Save":"Create"}),c.jsx("button",{type:"button",onClick:te,className:Ze.btnSecondary,children:"Cancel"})]})]});return c.jsxs("div",{className:Ze.container,children:[c.jsxs("div",{className:Ze.header,children:[c.jsx("h2",{children:"Personas"}),c.jsx("button",{onClick:ce,className:Ze.btnPrimary,children:"+ New Persona"})]}),(m||u)&&re(),n.length===0&&!m?c.jsx("p",{className:Ze.empty,children:"No personas yet. Create one to get started."}):c.jsx("div",{className:Ze.list,children:n.map(O=>{const W=r===O.id,ke=O.type==="script";return c.jsxs("div",{className:`${Ze.card} ${(u==null?void 0:u.id)===O.id?Ze.active:""}`,"data-testid":`persona-card-${O.id}`,children:[c.jsxs("div",{className:Ze.cardHeader,children:[c.jsxs("span",{className:Ze.cardTitle,children:[c.jsx("strong",{children:O.name}),c.jsx("span",{className:Ze.typeBadge,"data-testid":`persona-type-badge-${O.id}`,children:ke?"Script":"Agent"}),W&&c.jsx("span",{className:Ze.defaultBadge,"data-testid":`persona-default-badge-${O.id}`,children:"App Default"})]}),c.jsxs("div",{className:Ze.cardActions,children:[!W&&c.jsx("button",{onClick:()=>d(O.id),className:Ze.btnSmall,"data-testid":`persona-set-default-${O.id}`,title:"Set as app default persona",children:"Set Default"}),c.jsx("button",{onClick:()=>Q(O),className:Ze.btnSmall,children:"Edit"}),y===O.id?c.jsxs(c.Fragment,{children:[c.jsx("button",{onClick:()=>M(O.id),className:Ze.btnDanger,children:"Confirm"}),c.jsx("button",{onClick:()=>v(null),className:Ze.btnSmall,children:"Cancel"})]}):c.jsx("button",{onClick:()=>v(O.id),className:Ze.btnSmall,children:"Delete"})]})]}),O.description&&c.jsx("p",{className:Ze.description,children:O.description}),c.jsxs("div",{className:Ze.meta,children:[O.runtime&&c.jsxs("span",{children:["Runtime: ",O.runtime]}),O.model&&c.jsxs("span",{children:["Model: ",O.model]}),O.maxTurns>0&&c.jsxs("span",{children:["Max turns: ",O.maxTurns]})]}),ke?c.jsxs("details",{className:Ze.promptDetails,children:[c.jsx("summary",{children:"Script"}),c.jsx("pre",{className:Ze.promptText,children:O.script})]}):c.jsxs("details",{className:Ze.promptDetails,children:[c.jsx("summary",{children:"System Prompt"}),c.jsx("pre",{className:Ze.promptText,children:O.systemPrompt})]})]},O.id)})})]})}function eL(){return c.jsx(JI,{})}function tL(){const{themeId:n,resolvedThemeId:a,setTheme:i,preferSystem:l,setPreferSystem:r}=Tb();return c.jsxs("section",{className:fe.section,children:[c.jsx("h3",{className:fe.sectionTitle,children:"Appearance"}),c.jsx("p",{className:fe.sectionDescription,children:"Choose how Grackle looks across the app."}),c.jsx("div",{className:fe.themeOptions,children:gc.filter(d=>!d.hidden).map(d=>{const u=!!(d.variantLightId&&d.variantDarkId),p=u?n===d.id||n===d.variantLightId||n===d.variantDarkId:n===d.id,m=u&&a===d.variantLightId;return c.jsxs("button",{type:"button",className:`${fe.themeOption} ${p?fe.themeOptionSelected:""}`,"aria-pressed":p,onClick:()=>i(d.id),children:[c.jsxs("span",{className:fe.themeOptionHeader,children:[c.jsxs("span",{children:[c.jsx("span",{className:fe.themeOptionLabel,children:d.label}),c.jsx("span",{className:fe.themeOptionDesc,children:d.description})]}),u&&c.jsxs("span",{className:fe.variantToggle,children:[c.jsx("span",{role:"button",tabIndex:0,className:`${fe.variantButton} ${p&&m?fe.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(d.variantLightId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(d.variantLightId))},"aria-label":"Light variant","aria-pressed":p&&m,children:"☼"}),c.jsx("span",{role:"button",tabIndex:0,className:`${fe.variantButton} ${p&&!m?fe.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(d.variantDarkId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(d.variantDarkId))},"aria-label":"Dark variant","aria-pressed":p&&!m,children:"☾"})]})]}),d.swatches&&c.jsx("span",{className:fe.themeSwatches,children:d.swatches.map((g,y)=>c.jsx("span",{className:fe.themeSwatch,style:{background:g}},y))})]},d.id)})}),c.jsxs("label",{className:fe.systemToggle,children:[c.jsx("input",{type:"checkbox",checked:l,onChange:d=>r(d.target.checked)}),c.jsx("span",{children:"Match system light/dark preference"})]}),c.jsx("p",{className:fe.systemToggleHint,children:"Automatically switches between light and dark variants when available."}),c.jsxs("p",{className:fe.themeActive,children:["Active theme: ",c.jsx("strong",{children:a})]})]})}function nL(){return c.jsx(tL,{})}function aL(){const{connected:n,environments:a,sessions:i}=vt(),l=a.filter(u=>u.status==="connected").length,r=a.length,d=i.filter(u=>["running","idle"].includes(u.status)).length;return c.jsxs("section",{className:fe.section,"data-testid":"about-panel",children:[c.jsx("h3",{className:fe.sectionTitle,children:"About"}),c.jsx("p",{className:fe.sectionDescription,children:"Connection status and application information."}),c.jsxs("div",{className:fe.aboutGrid,children:[c.jsxs("div",{className:fe.aboutItem,children:[c.jsx("span",{className:fe.aboutLabel,children:"Connection"}),c.jsxs("span",{className:fe.aboutValue,children:[c.jsx("span",{className:`${fe.aboutDot} ${n?fe.aboutDotConnected:fe.aboutDotDisconnected}`}),n?"Connected":"Disconnected"]})]}),c.jsxs("div",{className:fe.aboutItem,children:[c.jsx("span",{className:fe.aboutLabel,children:"Environments"}),c.jsxs("span",{className:fe.aboutValue,children:[l,"/",r," connected"]})]}),c.jsxs("div",{className:fe.aboutItem,children:[c.jsx("span",{className:fe.aboutLabel,children:"Active Sessions"}),c.jsx("span",{className:fe.aboutValue,children:d})]}),c.jsxs("div",{className:fe.aboutItem,children:[c.jsx("span",{className:fe.aboutLabel,children:"Version"}),c.jsx("span",{className:fe.aboutValue,children:"0.56.0"})]})]})]})}function sL(){return c.jsx(aL,{})}const iL="_wizard_1260s_1",oL="_container_1260s_10",lL="_stepContent_1260s_19",rL="_logoArea_1260s_28",cL="_logoImage_1260s_32",uL="_heading_1260s_41",dL="_tagline_1260s_49",fL="_subtitle_1260s_56",hL="_featureList_1260s_64",pL="_runtimeGrid_1260s_89",mL="_runtimeCard_1260s_101",gL="_runtimeName_1260s_133",vL="_runtimeDescription_1260s_139",yL="_buttonRow_1260s_144",bL="_primaryButton_1260s_151",xL="_ghostButton_1260s_185",_L="_dots_1260s_213",SL="_dot_1260s_213",rt={wizard:iL,container:oL,stepContent:lL,logoArea:rL,logoImage:cL,heading:uL,tagline:dL,subtitle:fL,featureList:hL,runtimeGrid:pL,runtimeCard:mL,runtimeName:gL,runtimeDescription:vL,buttonRow:yL,primaryButton:bL,ghostButton:xL,dots:_L,dot:SL};function TL({onNext:n}){return c.jsxs("div",{className:rt.stepContent,"data-testid":"setup-welcome",children:[c.jsx("div",{className:rt.logoArea,children:c.jsx("img",{src:"/grackle-logo.png",alt:"Grackle",className:rt.logoImage})}),c.jsx("h1",{className:rt.heading,children:"Welcome to Grackle"}),c.jsx("p",{className:rt.tagline,children:"Multi-agent orchestration for software teams"}),c.jsx("button",{type:"button",className:rt.primaryButton,onClick:n,"data-testid":"setup-get-started",children:"Get Started"})]})}function kL({onNext:n,onBack:a}){return c.jsxs("div",{className:rt.stepContent,"data-testid":"setup-about",children:[c.jsx("h2",{className:rt.heading,children:"What is Grackle?"}),c.jsxs("ul",{className:rt.featureList,children:[c.jsx("li",{children:"Run Claude, Copilot, and Codex agents side by side"}),c.jsx("li",{children:"Provision and control dev environments — SSH, Codespaces, or local"}),c.jsx("li",{children:"Organize work into workspaces with agent-executable tasks"}),c.jsx("li",{children:"Customize agent behavior with personas, tools, and MCP servers"}),c.jsx("li",{children:"Live-stream agent sessions with full terminal replay"})]}),c.jsxs("div",{className:rt.buttonRow,children:[c.jsx("button",{type:"button",className:rt.ghostButton,onClick:a,children:"Back"}),c.jsx("button",{type:"button",className:rt.primaryButton,onClick:n,"data-testid":"setup-about-next",children:"Next"})]})]})}const CL=[{id:"claude-code",name:"Claude Code",description:"Anthropic's agentic coding tool"},{id:"copilot",name:"Copilot Coding Agent",description:"GitHub's AI pair programmer"},{id:"codex",name:"Codex CLI",description:"OpenAI's coding agent"}];function wL({currentRuntime:n,onFinish:a,onBack:i,finishDisabled:l}){const[r,d]=b.useState(n||"claude-code");return b.useEffect(()=>{n&&d(n)},[n]),c.jsxs("div",{className:rt.stepContent,"data-testid":"setup-runtime",children:[c.jsx("h2",{className:rt.heading,children:"Choose Your Runtime"}),c.jsx("p",{className:rt.subtitle,children:"Select the primary agent runtime for your workspace. You can change this later."}),c.jsx("div",{className:rt.runtimeGrid,children:CL.map(u=>c.jsxs("button",{type:"button",className:rt.runtimeCard,"data-selected":r===u.id,"aria-pressed":r===u.id,"data-testid":`runtime-card-${u.id}`,onClick:()=>d(u.id),children:[c.jsx("span",{className:rt.runtimeName,children:u.name}),c.jsx("span",{className:rt.runtimeDescription,children:u.description})]},u.id))}),c.jsxs("div",{className:rt.buttonRow,children:[c.jsx("button",{type:"button",className:rt.ghostButton,onClick:i,children:"Back"}),c.jsx("button",{type:"button",className:rt.primaryButton,onClick:()=>a(r),disabled:l,"data-testid":"setup-finish",children:"Finish"})]})]})}const EL=3,X0={"claude-code":"sonnet",copilot:"gpt-4o",codex:"o3"};function NL(){const{personas:n,updatePersona:a,completeOnboarding:i,onboardingCompleted:l}=vt(),r=Wt(),[d,u]=b.useState(0),p=n.find(g=>g.id==="claude-code"),m=b.useCallback(g=>{if(p&&g!==p.runtime){const v=X0[g]??"sonnet";a(p.id,void 0,void 0,void 0,g,v)}const y=n.find(v=>v.id===N0);if(y&&g!==y.runtime){const v=X0[g]??"sonnet";a(N0,void 0,void 0,void 0,g,v)}i(),r("/",{replace:!0})},[p,n,a,i,r]);return l===!0?c.jsx(Zo,{to:"/",replace:!0}):c.jsx("div",{className:rt.wizard,"data-testid":"setup-wizard",children:c.jsxs("div",{className:rt.container,children:[c.jsx(dn,{mode:"wait",children:c.jsxs(gt.div,{initial:{opacity:0,x:40},animate:{opacity:1,x:0},exit:{opacity:0,x:-40},transition:{duration:.2,ease:"easeInOut"},children:[d===0&&c.jsx(TL,{onNext:()=>u(1)}),d===1&&c.jsx(kL,{onNext:()=>u(2),onBack:()=>u(0)}),d===2&&c.jsx(wL,{currentRuntime:(p==null?void 0:p.runtime)??"claude-code",onFinish:m,onBack:()=>u(1),finishDisabled:!p})]},d)}),c.jsx("div",{className:rt.dots,children:Array.from({length:EL},(g,y)=>c.jsx("span",{className:rt.dot,"data-active":y===d},y))})]})})}const AL="_root_zndgp_1",jL="_body_zndgp_7",DL="_main_zndgp_19",ML="_sidebarWrapper_zndgp_26",RL="_overlay_zndgp_51",Po={root:AL,body:jL,main:DL,sidebarWrapper:ML,overlay:RL},BL=typeof window<"u"&&new URLSearchParams(window.location.search).has("mock");function OL(){const{lastSpawnedId:n,environments:a,connected:i,onboardingCompleted:l}=vt(),{showToast:r}=Gi();wR(a,r);const d=Wt(),u=Vt(),[p,m]=b.useState(!1),g=b.useCallback(()=>m(y=>!y),[]);return b.useEffect(()=>{m(!1)},[u.pathname]),b.useEffect(()=>{if(!p)return;const y=v=>{v.key==="Escape"&&m(!1)};return document.addEventListener("keydown",y),()=>{document.removeEventListener("keydown",y)}},[p]),b.useEffect(()=>{n&&!u.pathname.includes("/tasks/")&&d(ih(n),{replace:!0})},[n,d,u.pathname]),i&&l===!1?c.jsx(Zo,{to:"/setup",replace:!0}):c.jsxs("div",{className:Po.root,children:[c.jsx(UC,{onToggleSidebar:g,sidebarOpen:p}),c.jsx(FC,{}),c.jsxs("div",{className:Po.body,children:[c.jsx("div",{className:Po.sidebarWrapper,"data-sidebar-open":p,children:c.jsx(WM,{})}),p&&c.jsx("div",{className:Po.overlay,"data-testid":"drawer-overlay",onClick:()=>m(!1)}),c.jsxs("div",{className:Po.main,children:[c.jsx(db,{}),c.jsx(fR,{})]})]}),c.jsx(CR,{})]})}function IL(){return c.jsxs(hk,{children:[c.jsx(Qe,{path:"setup",element:c.jsx(NL,{})}),c.jsxs(Qe,{element:c.jsx(OL,{}),children:[c.jsx(Qe,{index:!0,element:c.jsx(JB,{})}),c.jsx(Qe,{path:"chat",element:c.jsx(yO,{})}),c.jsx(Qe,{path:"tasks",element:c.jsx(QB,{})}),c.jsx(Qe,{path:"tasks/new",element:c.jsx(p4,{})}),c.jsx(Qe,{path:"tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"tasks/:taskId/edit",element:c.jsx(q0,{})}),c.jsx(Qe,{path:"workspaces",element:c.jsx(WB,{})}),c.jsx(Qe,{path:"workspaces/:workspaceId",element:c.jsx(q6,{})}),c.jsx(Qe,{path:"workspaces/:workspaceId/tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"workspaces/:workspaceId/tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"workspaces/:workspaceId/tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(Qe,{path:"workspaces/:workspaceId/tasks/:taskId/edit",element:c.jsx(q0,{})}),c.jsx(Qe,{path:"sessions/new",element:c.jsx(kO,{})}),c.jsx(Qe,{path:"sessions/:sessionId",element:c.jsx(EO,{})}),c.jsx(Qe,{path:"environments/new",element:c.jsx(Q4,{})}),c.jsx(Qe,{path:"environments/:environmentId",element:c.jsx(W4,{})}),c.jsxs(Qe,{path:"settings",element:c.jsx(a5,{}),children:[c.jsx(Qe,{index:!0,element:c.jsx(Zo,{to:"environments",replace:!0})}),c.jsx(Qe,{path:"environments",element:c.jsx(H5,{})}),c.jsx(Qe,{path:"credentials",element:c.jsx(NI,{})}),c.jsx(Qe,{path:"tokens",element:c.jsx(Zo,{to:"../credentials",replace:!0})}),c.jsx(Qe,{path:"personas",element:c.jsx(eL,{})}),c.jsx(Qe,{path:"appearance",element:c.jsx(nL,{})}),c.jsx(Qe,{path:"about",element:c.jsx(sL,{})})]}),c.jsx(Qe,{path:"*",element:c.jsx(Zo,{to:"/",replace:!0})})]})]})}const LL=1e4;function zL(){const{onboardingCompleted:n}=vt(),[a,i]=b.useState(!1);b.useEffect(()=>{if(n!==void 0)return;const r=setTimeout(()=>i(!0),LL);return()=>clearTimeout(r)},[n]);const l=n===void 0&&!a;return c.jsx(dn,{mode:"wait",children:l?c.jsx(gt.div,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.25},children:c.jsx(QD,{})},"splash"):c.jsx(gt.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.25},style:{minHeight:"100vh"},children:c.jsx(zk,{children:c.jsx(IL,{})})},"app")})}function UL(){const n=BL?TC:pC;return c.jsx(AC,{children:c.jsx(CC,{children:c.jsx(n,{children:c.jsx(zL,{})})})})}tT.createRoot(document.getElementById("root")).render(c.jsx(b.StrictMode,{children:c.jsx(UL,{})}));

package/dist/index.html

@@ -10,7 +10,7 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/manifest.json" />
-    <script type="module" crossorigin src="/assets/index-CzTBbCGx.js"></script>
+    <script type="module" crossorigin src="/assets/index-C0E_jps0.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/markdown-gcy1Jmzi.js">
     <link rel="modulepreload" crossorigin href="/assets/dagview-EHk2VaeR.js">
     <link rel="stylesheet" crossorigin href="/assets/index-Ini4xe5_.css">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web",
-  "version": "0.55.0",
+  "version": "0.56.1",
   "description": "React web UI for the Grackle multi-agent coordination platform",
   "license": "MIT",
   "repository": {
@@ -31,7 +31,7 @@
     "rehype-prism-plus": "^2.0.0",
     "remark-gfm": "^4.0.0",
     "react-router": "^7.0.0",
-    "@grackle-ai/common": "0.55.0"
+    "@grackle-ai/common": "0.56.1"
   },
   "devDependencies": {
     "@rushstack/heft": "1.2.4",