@grackle-ai/web 0.70.2 → 0.70.3

package/dist/assets/{index-Dw97TeQS.js → index-C-CehJVA.js}

@@ -108,4 +108,4 @@ const grackle = await host.mcpServer({
   url: env.vars.GRACKLE_MCP_URL,
 });
 
-$\`Summarize the current tasks.\`;`,rows:20,className:He.scriptEditor,required:!0,"data-testid":"persona-script-editor"})]})]}),c.jsxs("div",{className:He.formActions,children:[c.jsx("button",{type:"submit",className:He.btnPrimary,children:f?"Save":"Create"}),c.jsx("button",{type:"button",onClick:ae,className:He.btnSecondary,children:"Cancel"})]})]});return c.jsxs("div",{className:He.container,children:[c.jsxs("div",{className:He.header,children:[c.jsx("h2",{children:"Personas"}),c.jsx("button",{onClick:le,className:He.btnPrimary,children:"+ New Persona"})]}),(m||f)&&G(),n.length===0&&!m?c.jsx("p",{className:He.empty,children:"No personas yet. Create one to get started."}):c.jsx("div",{className:He.list,children:n.map(O=>{const se=r===O.id,ye=O.type==="script";return c.jsxs("div",{className:`${He.card} ${(f==null?void 0:f.id)===O.id?He.active:""}`,"data-testid":`persona-card-${O.id}`,children:[c.jsxs("div",{className:He.cardHeader,children:[c.jsxs("span",{className:He.cardTitle,children:[c.jsx("strong",{children:O.name}),c.jsx("span",{className:He.typeBadge,"data-testid":`persona-type-badge-${O.id}`,children:ye?"Script":"Agent"}),se&&c.jsx("span",{className:He.defaultBadge,"data-testid":`persona-default-badge-${O.id}`,children:"App Default"})]}),c.jsxs("div",{className:He.cardActions,children:[!se&&c.jsx("button",{onClick:()=>u(O.id),className:He.btnSmall,"data-testid":`persona-set-default-${O.id}`,title:"Set as app default persona",children:"Set Default"}),c.jsx("button",{onClick:()=>F(O),className:He.btnSmall,children:"Edit"}),y===O.id?c.jsxs(c.Fragment,{children:[c.jsx("button",{onClick:()=>H(O.id),className:He.btnDanger,children:"Confirm"}),c.jsx("button",{onClick:()=>v(null),className:He.btnSmall,children:"Cancel"})]}):c.jsx("button",{onClick:()=>v(O.id),className:He.btnSmall,children:"Delete"})]})]}),O.description&&c.jsx("p",{className:He.description,children:O.description}),c.jsxs("div",{className:He.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]})]}),ye?c.jsxs("details",{className:He.promptDetails,children:[c.jsx("summary",{children:"Script"}),c.jsx("pre",{className:He.promptText,children:O.script})]}):c.jsxs("details",{className:He.promptDetails,children:[c.jsx("summary",{children:"System Prompt"}),c.jsx("pre",{className:He.promptText,children:O.systemPrompt})]})]},O.id)})})]})}function T5(){return c.jsx(S5,{})}function k5(){const{themeId:n,resolvedThemeId:a,setTheme:i,preferSystem:l,setPreferSystem:r}=Sb();return c.jsxs("section",{className:de.section,children:[c.jsx("h3",{className:de.sectionTitle,children:"Appearance"}),c.jsx("p",{className:de.sectionDescription,children:"Choose how Grackle looks across the app."}),c.jsx("div",{className:de.themeOptions,children:Sc.filter(u=>!u.hidden).map(u=>{const f=!!(u.variantLightId&&u.variantDarkId),p=f?n===u.id||n===u.variantLightId||n===u.variantDarkId:n===u.id,m=f&&a===u.variantLightId;return c.jsxs("button",{type:"button",className:`${de.themeOption} ${p?de.themeOptionSelected:""}`,"aria-pressed":p,onClick:()=>i(u.id),children:[c.jsxs("span",{className:de.themeOptionHeader,children:[c.jsxs("span",{children:[c.jsx("span",{className:de.themeOptionLabel,children:u.label}),c.jsx("span",{className:de.themeOptionDesc,children:u.description})]}),f&&c.jsxs("span",{className:de.variantToggle,children:[c.jsx("span",{role:"button",tabIndex:0,className:`${de.variantButton} ${p&&m?de.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(u.variantLightId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(u.variantLightId))},"aria-label":"Light variant","aria-pressed":p&&m,children:"☼"}),c.jsx("span",{role:"button",tabIndex:0,className:`${de.variantButton} ${p&&!m?de.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(u.variantDarkId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(u.variantDarkId))},"aria-label":"Dark variant","aria-pressed":p&&!m,children:"☾"})]})]}),u.swatches&&c.jsx("span",{className:de.themeSwatches,children:u.swatches.map((g,y)=>c.jsx("span",{className:de.themeSwatch,style:{background:g}},y))})]},u.id)})}),c.jsxs("label",{className:de.systemToggle,children:[c.jsx("input",{type:"checkbox",checked:l,onChange:u=>r(u.target.checked)}),c.jsx("span",{children:"Match system light/dark preference"})]}),c.jsx("p",{className:de.systemToggleHint,children:"Automatically switches between light and dark variants when available."}),c.jsxs("p",{className:de.themeActive,children:["Active theme: ",c.jsx("strong",{children:a})]})]})}function C5(){return c.jsx(k5,{})}function E5(){const{connected:n,environments:a,sessions:i}=We(),l=a.filter(f=>f.status==="connected").length,r=a.length,u=i.filter(f=>["running","idle"].includes(f.status)).length;return c.jsxs("section",{className:de.section,"data-testid":"about-panel",children:[c.jsx("h3",{className:de.sectionTitle,children:"About"}),c.jsx("p",{className:de.sectionDescription,children:"Connection status and application information."}),c.jsxs("div",{className:de.aboutGrid,children:[c.jsxs("div",{className:de.aboutItem,children:[c.jsx("span",{className:de.aboutLabel,children:"Connection"}),c.jsxs("span",{className:de.aboutValue,children:[c.jsx("span",{className:`${de.aboutDot} ${n?de.aboutDotConnected:de.aboutDotDisconnected}`}),n?"Connected":"Disconnected"]})]}),c.jsxs("div",{className:de.aboutItem,children:[c.jsx("span",{className:de.aboutLabel,children:"Environments"}),c.jsxs("span",{className:de.aboutValue,children:[l,"/",r," connected"]})]}),c.jsxs("div",{className:de.aboutItem,children:[c.jsx("span",{className:de.aboutLabel,children:"Active Sessions"}),c.jsx("span",{className:de.aboutValue,children:u})]}),c.jsxs("div",{className:de.aboutItem,children:[c.jsx("span",{className:de.aboutLabel,children:"Version"}),c.jsx("span",{className:de.aboutValue,children:"0.70.1"})]})]})]})}function N5(){return c.jsx(E5,{})}const A5="_wizard_1260s_1",w5="_container_1260s_10",j5="_stepContent_1260s_19",D5="_logoArea_1260s_28",M5="_logoImage_1260s_32",R5="_heading_1260s_41",O5="_tagline_1260s_49",B5="_subtitle_1260s_56",I5="_featureList_1260s_64",L5="_runtimeGrid_1260s_89",U5="_runtimeCard_1260s_101",z5="_runtimeName_1260s_133",V5="_runtimeDescription_1260s_139",H5="_buttonRow_1260s_144",G5="_primaryButton_1260s_151",P5="_ghostButton_1260s_185",$5="_dots_1260s_213",F5="_dot_1260s_213",et={wizard:A5,container:w5,stepContent:j5,logoArea:D5,logoImage:M5,heading:R5,tagline:O5,subtitle:B5,featureList:I5,runtimeGrid:L5,runtimeCard:U5,runtimeName:z5,runtimeDescription:V5,buttonRow:H5,primaryButton:G5,ghostButton:P5,dots:$5,dot:F5};function q5({onNext:n}){return c.jsxs("div",{className:et.stepContent,"data-testid":"setup-welcome",children:[c.jsx("div",{className:et.logoArea,children:c.jsx("img",{src:"/grackle-logo.png",alt:"Grackle",className:et.logoImage})}),c.jsx("h1",{className:et.heading,children:"Welcome to Grackle"}),c.jsx("p",{className:et.tagline,children:"Multi-agent orchestration for software teams"}),c.jsx("button",{type:"button",className:et.primaryButton,onClick:n,"data-testid":"setup-get-started",children:"Get Started"})]})}function Y5({onNext:n,onBack:a}){return c.jsxs("div",{className:et.stepContent,"data-testid":"setup-about",children:[c.jsx("h2",{className:et.heading,children:"What is Grackle?"}),c.jsxs("ul",{className:et.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:et.buttonRow,children:[c.jsx("button",{type:"button",className:et.ghostButton,onClick:a,children:"Back"}),c.jsx("button",{type:"button",className:et.primaryButton,onClick:n,"data-testid":"setup-about-next",children:"Next"})]})]})}const K5=[{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"},{id:"goose",name:"Goose",description:"Block's open-source AI coding agent"}];function Z5({currentRuntime:n,onFinish:a,onBack:i,finishDisabled:l}){const[r,u]=x.useState(n||"claude-code");return x.useEffect(()=>{n&&u(n)},[n]),c.jsxs("div",{className:et.stepContent,"data-testid":"setup-runtime",children:[c.jsx("h2",{className:et.heading,children:"Choose Your Runtime"}),c.jsx("p",{className:et.subtitle,children:"Select the primary agent runtime for your workspace. You can change this later."}),c.jsx("div",{className:et.runtimeGrid,children:K5.map(f=>c.jsxs("button",{type:"button",className:et.runtimeCard,"data-selected":r===f.id,"aria-pressed":r===f.id,"data-testid":`runtime-card-${f.id}`,onClick:()=>u(f.id),children:[c.jsx("span",{className:et.runtimeName,children:f.name}),c.jsx("span",{className:et.runtimeDescription,children:f.description})]},f.id))}),c.jsxs("div",{className:et.buttonRow,children:[c.jsx("button",{type:"button",className:et.ghostButton,onClick:i,children:"Back"}),c.jsx("button",{type:"button",className:et.primaryButton,onClick:()=>a(r),disabled:l,"data-testid":"setup-finish",children:"Finish"})]})]})}const X5=3,K0={"claude-code":"sonnet",copilot:"gpt-4o",codex:"o3",goose:""};function Q5(){const{personas:n,updatePersona:a,completeOnboarding:i,onboardingCompleted:l}=We(),r=Ht(),[u,f]=x.useState(0),p=n.find(g=>g.id==="claude-code"),m=x.useCallback(g=>{if(p&&g!==p.runtime){const v=K0[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=K0[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(Gn,{to:"/",replace:!0}):c.jsx("div",{className:et.wizard,"data-testid":"setup-wizard",children:c.jsxs("div",{className:et.container,children:[c.jsx(Zn,{mode:"wait",children:c.jsxs(kt.div,{initial:{opacity:0,x:40},animate:{opacity:1,x:0},exit:{opacity:0,x:-40},transition:{duration:.2,ease:"easeInOut"},children:[u===0&&c.jsx(q5,{onNext:()=>f(1)}),u===1&&c.jsx(Y5,{onNext:()=>f(2),onBack:()=>f(0)}),u===2&&c.jsx(Z5,{currentRuntime:(p==null?void 0:p.runtime)??"claude-code",onFinish:m,onBack:()=>f(1),finishDisabled:!p})]},u)}),c.jsx("div",{className:et.dots,children:Array.from({length:X5},(g,y)=>c.jsx("span",{className:et.dot,"data-active":y===u},y))})]})})}const W5="_root_zndgp_1",J5="_body_zndgp_7",eL="_main_zndgp_19",tL="_sidebarWrapper_zndgp_26",nL="_overlay_zndgp_51",Ko={root:W5,body:J5,main:eL,sidebarWrapper:tL,overlay:nL},aL=typeof window<"u"&&new URLSearchParams(window.location.search).has("mock");function sL(){const{lastSpawnedId:n,environments:a,connected:i,onboardingCompleted:l}=We(),{showToast:r}=$i();$M(a,r);const u=Ht(),f=Nt(),[p,m]=x.useState(!1),g=x.useCallback(()=>m(y=>!y),[]);return x.useEffect(()=>{m(!1)},[f.pathname]),x.useEffect(()=>{if(!p)return;const y=v=>{v.key==="Escape"&&m(!1)};return document.addEventListener("keydown",y),()=>{document.removeEventListener("keydown",y)}},[p]),x.useEffect(()=>{n&&!f.pathname.includes("/tasks/")&&u(pb(n),{replace:!0})},[n,u,f.pathname]),i&&l===!1?c.jsx(Gn,{to:"/setup",replace:!0}):c.jsxs("div",{className:Ko.root,children:[c.jsx(IC,{onToggleSidebar:g,sidebarOpen:p}),c.jsx(GC,{}),c.jsxs("div",{className:Ko.body,children:[c.jsx("div",{className:Ko.sidebarWrapper,"data-sidebar-open":p,children:c.jsx(oD,{})}),p&&c.jsx("div",{className:Ko.overlay,"data-testid":"drawer-overlay",onClick:()=>m(!1)}),c.jsxs("div",{className:Ko.main,children:[c.jsx(th,{}),c.jsx(pD,{})]})]}),c.jsx(ND,{})]})}function vf(){const{workspaceId:n}=ns(),{workspaces:a}=We(),i=Nt(),l=a.find(m=>m.id===n);if(!(l!=null&&l.environmentId))return a.length===0?void 0:c.jsx(Gn,{to:"/environments",replace:!0});const r=encodeURIComponent(n),u=`/workspaces/${r}`,f=i.pathname.startsWith(u)?i.pathname.slice(u.length):"",p=`/environments/${encodeURIComponent(l.environmentId)}/workspaces/${r}${f}${i.search}${i.hash}`;return c.jsx(Gn,{to:p,replace:!0})}function iL(){return c.jsxs(ck,{children:[c.jsx(je,{path:"setup",element:c.jsx(Q5,{})}),c.jsxs(je,{element:c.jsx(sL,{}),children:[c.jsx(je,{index:!0,element:c.jsx(vO,{})}),c.jsx(je,{path:"chat",element:c.jsx(qO,{})}),c.jsx(je,{path:"tasks",element:c.jsx(mO,{})}),c.jsx(je,{path:"tasks/new",element:c.jsx($0,{})}),c.jsx(je,{path:"tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(je,{path:"tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(je,{path:"tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(je,{path:"tasks/:taskId/edit",element:c.jsx(F0,{})}),c.jsx(je,{path:"workspaces",element:c.jsx(Gn,{to:"/environments",replace:!0})}),c.jsx(je,{path:"workspaces/:workspaceId",element:c.jsx(vf,{})}),c.jsx(je,{path:"workspaces/:workspaceId/tasks/:taskId",element:c.jsx(vf,{})}),c.jsx(je,{path:"workspaces/:workspaceId/tasks/:taskId/*",element:c.jsx(vf,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId",element:c.jsx(SB,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId/tasks/new",element:c.jsx($0,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId/tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId/tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId/tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId/tasks/:taskId/edit",element:c.jsx(F0,{})}),c.jsx(je,{path:"sessions/new",element:c.jsx(e6,{})}),c.jsx(je,{path:"sessions/:sessionId",element:c.jsx(a6,{})}),c.jsxs(je,{path:"environments",element:c.jsx(D4,{}),children:[c.jsx(je,{index:!0,element:c.jsx(gO,{})}),c.jsx(je,{path:"new",element:c.jsx(E4,{})}),c.jsx(je,{path:":environmentId",element:c.jsx(lI,{})}),c.jsx(je,{path:":environmentId/edit",element:c.jsx(N4,{})})]}),c.jsxs(je,{path:"settings",element:c.jsx(uI,{}),children:[c.jsx(je,{index:!0,element:c.jsx(Gn,{to:"credentials",replace:!0})}),c.jsx(je,{path:"environments",element:c.jsx(Gn,{to:"/environments",replace:!0})}),c.jsx(je,{path:"credentials",element:c.jsx(QI,{})}),c.jsx(je,{path:"tokens",element:c.jsx(Gn,{to:"../credentials",replace:!0})}),c.jsx(je,{path:"personas",element:c.jsx(T5,{})}),c.jsx(je,{path:"appearance",element:c.jsx(C5,{})}),c.jsx(je,{path:"about",element:c.jsx(N5,{})})]}),c.jsx(je,{path:"*",element:c.jsx(Gn,{to:"/",replace:!0})})]})]})}const oL=1e4;function lL(){const{onboardingCompleted:n}=We(),[a,i]=x.useState(!1);x.useEffect(()=>{if(n!==void 0)return;const r=setTimeout(()=>i(!0),oL);return()=>clearTimeout(r)},[n]);const l=n===void 0&&!a;return c.jsx(Zn,{mode:"wait",children:l?c.jsx(kt.div,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.25},children:c.jsx(PM,{})},"splash"):c.jsx(kt.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.25},style:{minHeight:"100vh"},children:c.jsx(Ok,{children:c.jsx(iL,{})})},"app")})}function rL(){const n=aL?xC:dC;return c.jsx(EC,{children:c.jsx(SC,{children:c.jsx(n,{children:c.jsx(lL,{})})})})}QS.createRoot(document.getElementById("root")).render(c.jsx(x.StrictMode,{children:c.jsx(rL,{})}));
+$\`Summarize the current tasks.\`;`,rows:20,className:He.scriptEditor,required:!0,"data-testid":"persona-script-editor"})]})]}),c.jsxs("div",{className:He.formActions,children:[c.jsx("button",{type:"submit",className:He.btnPrimary,children:f?"Save":"Create"}),c.jsx("button",{type:"button",onClick:ae,className:He.btnSecondary,children:"Cancel"})]})]});return c.jsxs("div",{className:He.container,children:[c.jsxs("div",{className:He.header,children:[c.jsx("h2",{children:"Personas"}),c.jsx("button",{onClick:le,className:He.btnPrimary,children:"+ New Persona"})]}),(m||f)&&G(),n.length===0&&!m?c.jsx("p",{className:He.empty,children:"No personas yet. Create one to get started."}):c.jsx("div",{className:He.list,children:n.map(O=>{const se=r===O.id,ye=O.type==="script";return c.jsxs("div",{className:`${He.card} ${(f==null?void 0:f.id)===O.id?He.active:""}`,"data-testid":`persona-card-${O.id}`,children:[c.jsxs("div",{className:He.cardHeader,children:[c.jsxs("span",{className:He.cardTitle,children:[c.jsx("strong",{children:O.name}),c.jsx("span",{className:He.typeBadge,"data-testid":`persona-type-badge-${O.id}`,children:ye?"Script":"Agent"}),se&&c.jsx("span",{className:He.defaultBadge,"data-testid":`persona-default-badge-${O.id}`,children:"App Default"})]}),c.jsxs("div",{className:He.cardActions,children:[!se&&c.jsx("button",{onClick:()=>u(O.id),className:He.btnSmall,"data-testid":`persona-set-default-${O.id}`,title:"Set as app default persona",children:"Set Default"}),c.jsx("button",{onClick:()=>F(O),className:He.btnSmall,children:"Edit"}),y===O.id?c.jsxs(c.Fragment,{children:[c.jsx("button",{onClick:()=>H(O.id),className:He.btnDanger,children:"Confirm"}),c.jsx("button",{onClick:()=>v(null),className:He.btnSmall,children:"Cancel"})]}):c.jsx("button",{onClick:()=>v(O.id),className:He.btnSmall,children:"Delete"})]})]}),O.description&&c.jsx("p",{className:He.description,children:O.description}),c.jsxs("div",{className:He.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]})]}),ye?c.jsxs("details",{className:He.promptDetails,children:[c.jsx("summary",{children:"Script"}),c.jsx("pre",{className:He.promptText,children:O.script})]}):c.jsxs("details",{className:He.promptDetails,children:[c.jsx("summary",{children:"System Prompt"}),c.jsx("pre",{className:He.promptText,children:O.systemPrompt})]})]},O.id)})})]})}function T5(){return c.jsx(S5,{})}function k5(){const{themeId:n,resolvedThemeId:a,setTheme:i,preferSystem:l,setPreferSystem:r}=Sb();return c.jsxs("section",{className:de.section,children:[c.jsx("h3",{className:de.sectionTitle,children:"Appearance"}),c.jsx("p",{className:de.sectionDescription,children:"Choose how Grackle looks across the app."}),c.jsx("div",{className:de.themeOptions,children:Sc.filter(u=>!u.hidden).map(u=>{const f=!!(u.variantLightId&&u.variantDarkId),p=f?n===u.id||n===u.variantLightId||n===u.variantDarkId:n===u.id,m=f&&a===u.variantLightId;return c.jsxs("button",{type:"button",className:`${de.themeOption} ${p?de.themeOptionSelected:""}`,"aria-pressed":p,onClick:()=>i(u.id),children:[c.jsxs("span",{className:de.themeOptionHeader,children:[c.jsxs("span",{children:[c.jsx("span",{className:de.themeOptionLabel,children:u.label}),c.jsx("span",{className:de.themeOptionDesc,children:u.description})]}),f&&c.jsxs("span",{className:de.variantToggle,children:[c.jsx("span",{role:"button",tabIndex:0,className:`${de.variantButton} ${p&&m?de.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(u.variantLightId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(u.variantLightId))},"aria-label":"Light variant","aria-pressed":p&&m,children:"☼"}),c.jsx("span",{role:"button",tabIndex:0,className:`${de.variantButton} ${p&&!m?de.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(u.variantDarkId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(u.variantDarkId))},"aria-label":"Dark variant","aria-pressed":p&&!m,children:"☾"})]})]}),u.swatches&&c.jsx("span",{className:de.themeSwatches,children:u.swatches.map((g,y)=>c.jsx("span",{className:de.themeSwatch,style:{background:g}},y))})]},u.id)})}),c.jsxs("label",{className:de.systemToggle,children:[c.jsx("input",{type:"checkbox",checked:l,onChange:u=>r(u.target.checked)}),c.jsx("span",{children:"Match system light/dark preference"})]}),c.jsx("p",{className:de.systemToggleHint,children:"Automatically switches between light and dark variants when available."}),c.jsxs("p",{className:de.themeActive,children:["Active theme: ",c.jsx("strong",{children:a})]})]})}function C5(){return c.jsx(k5,{})}function E5(){const{connected:n,environments:a,sessions:i}=We(),l=a.filter(f=>f.status==="connected").length,r=a.length,u=i.filter(f=>["running","idle"].includes(f.status)).length;return c.jsxs("section",{className:de.section,"data-testid":"about-panel",children:[c.jsx("h3",{className:de.sectionTitle,children:"About"}),c.jsx("p",{className:de.sectionDescription,children:"Connection status and application information."}),c.jsxs("div",{className:de.aboutGrid,children:[c.jsxs("div",{className:de.aboutItem,children:[c.jsx("span",{className:de.aboutLabel,children:"Connection"}),c.jsxs("span",{className:de.aboutValue,children:[c.jsx("span",{className:`${de.aboutDot} ${n?de.aboutDotConnected:de.aboutDotDisconnected}`}),n?"Connected":"Disconnected"]})]}),c.jsxs("div",{className:de.aboutItem,children:[c.jsx("span",{className:de.aboutLabel,children:"Environments"}),c.jsxs("span",{className:de.aboutValue,children:[l,"/",r," connected"]})]}),c.jsxs("div",{className:de.aboutItem,children:[c.jsx("span",{className:de.aboutLabel,children:"Active Sessions"}),c.jsx("span",{className:de.aboutValue,children:u})]}),c.jsxs("div",{className:de.aboutItem,children:[c.jsx("span",{className:de.aboutLabel,children:"Version"}),c.jsx("span",{className:de.aboutValue,children:"0.70.2"})]})]})]})}function N5(){return c.jsx(E5,{})}const A5="_wizard_1260s_1",w5="_container_1260s_10",j5="_stepContent_1260s_19",D5="_logoArea_1260s_28",M5="_logoImage_1260s_32",R5="_heading_1260s_41",O5="_tagline_1260s_49",B5="_subtitle_1260s_56",I5="_featureList_1260s_64",L5="_runtimeGrid_1260s_89",U5="_runtimeCard_1260s_101",z5="_runtimeName_1260s_133",V5="_runtimeDescription_1260s_139",H5="_buttonRow_1260s_144",G5="_primaryButton_1260s_151",P5="_ghostButton_1260s_185",$5="_dots_1260s_213",F5="_dot_1260s_213",et={wizard:A5,container:w5,stepContent:j5,logoArea:D5,logoImage:M5,heading:R5,tagline:O5,subtitle:B5,featureList:I5,runtimeGrid:L5,runtimeCard:U5,runtimeName:z5,runtimeDescription:V5,buttonRow:H5,primaryButton:G5,ghostButton:P5,dots:$5,dot:F5};function q5({onNext:n}){return c.jsxs("div",{className:et.stepContent,"data-testid":"setup-welcome",children:[c.jsx("div",{className:et.logoArea,children:c.jsx("img",{src:"/grackle-logo.png",alt:"Grackle",className:et.logoImage})}),c.jsx("h1",{className:et.heading,children:"Welcome to Grackle"}),c.jsx("p",{className:et.tagline,children:"Multi-agent orchestration for software teams"}),c.jsx("button",{type:"button",className:et.primaryButton,onClick:n,"data-testid":"setup-get-started",children:"Get Started"})]})}function Y5({onNext:n,onBack:a}){return c.jsxs("div",{className:et.stepContent,"data-testid":"setup-about",children:[c.jsx("h2",{className:et.heading,children:"What is Grackle?"}),c.jsxs("ul",{className:et.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:et.buttonRow,children:[c.jsx("button",{type:"button",className:et.ghostButton,onClick:a,children:"Back"}),c.jsx("button",{type:"button",className:et.primaryButton,onClick:n,"data-testid":"setup-about-next",children:"Next"})]})]})}const K5=[{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"},{id:"goose",name:"Goose",description:"Block's open-source AI coding agent"}];function Z5({currentRuntime:n,onFinish:a,onBack:i,finishDisabled:l}){const[r,u]=x.useState(n||"claude-code");return x.useEffect(()=>{n&&u(n)},[n]),c.jsxs("div",{className:et.stepContent,"data-testid":"setup-runtime",children:[c.jsx("h2",{className:et.heading,children:"Choose Your Runtime"}),c.jsx("p",{className:et.subtitle,children:"Select the primary agent runtime for your workspace. You can change this later."}),c.jsx("div",{className:et.runtimeGrid,children:K5.map(f=>c.jsxs("button",{type:"button",className:et.runtimeCard,"data-selected":r===f.id,"aria-pressed":r===f.id,"data-testid":`runtime-card-${f.id}`,onClick:()=>u(f.id),children:[c.jsx("span",{className:et.runtimeName,children:f.name}),c.jsx("span",{className:et.runtimeDescription,children:f.description})]},f.id))}),c.jsxs("div",{className:et.buttonRow,children:[c.jsx("button",{type:"button",className:et.ghostButton,onClick:i,children:"Back"}),c.jsx("button",{type:"button",className:et.primaryButton,onClick:()=>a(r),disabled:l,"data-testid":"setup-finish",children:"Finish"})]})]})}const X5=3,K0={"claude-code":"sonnet",copilot:"gpt-4o",codex:"o3",goose:""};function Q5(){const{personas:n,updatePersona:a,completeOnboarding:i,onboardingCompleted:l}=We(),r=Ht(),[u,f]=x.useState(0),p=n.find(g=>g.id==="claude-code"),m=x.useCallback(g=>{if(p&&g!==p.runtime){const v=K0[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=K0[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(Gn,{to:"/",replace:!0}):c.jsx("div",{className:et.wizard,"data-testid":"setup-wizard",children:c.jsxs("div",{className:et.container,children:[c.jsx(Zn,{mode:"wait",children:c.jsxs(kt.div,{initial:{opacity:0,x:40},animate:{opacity:1,x:0},exit:{opacity:0,x:-40},transition:{duration:.2,ease:"easeInOut"},children:[u===0&&c.jsx(q5,{onNext:()=>f(1)}),u===1&&c.jsx(Y5,{onNext:()=>f(2),onBack:()=>f(0)}),u===2&&c.jsx(Z5,{currentRuntime:(p==null?void 0:p.runtime)??"claude-code",onFinish:m,onBack:()=>f(1),finishDisabled:!p})]},u)}),c.jsx("div",{className:et.dots,children:Array.from({length:X5},(g,y)=>c.jsx("span",{className:et.dot,"data-active":y===u},y))})]})})}const W5="_root_zndgp_1",J5="_body_zndgp_7",eL="_main_zndgp_19",tL="_sidebarWrapper_zndgp_26",nL="_overlay_zndgp_51",Ko={root:W5,body:J5,main:eL,sidebarWrapper:tL,overlay:nL},aL=typeof window<"u"&&new URLSearchParams(window.location.search).has("mock");function sL(){const{lastSpawnedId:n,environments:a,connected:i,onboardingCompleted:l}=We(),{showToast:r}=$i();$M(a,r);const u=Ht(),f=Nt(),[p,m]=x.useState(!1),g=x.useCallback(()=>m(y=>!y),[]);return x.useEffect(()=>{m(!1)},[f.pathname]),x.useEffect(()=>{if(!p)return;const y=v=>{v.key==="Escape"&&m(!1)};return document.addEventListener("keydown",y),()=>{document.removeEventListener("keydown",y)}},[p]),x.useEffect(()=>{n&&!f.pathname.includes("/tasks/")&&u(pb(n),{replace:!0})},[n,u,f.pathname]),i&&l===!1?c.jsx(Gn,{to:"/setup",replace:!0}):c.jsxs("div",{className:Ko.root,children:[c.jsx(IC,{onToggleSidebar:g,sidebarOpen:p}),c.jsx(GC,{}),c.jsxs("div",{className:Ko.body,children:[c.jsx("div",{className:Ko.sidebarWrapper,"data-sidebar-open":p,children:c.jsx(oD,{})}),p&&c.jsx("div",{className:Ko.overlay,"data-testid":"drawer-overlay",onClick:()=>m(!1)}),c.jsxs("div",{className:Ko.main,children:[c.jsx(th,{}),c.jsx(pD,{})]})]}),c.jsx(ND,{})]})}function vf(){const{workspaceId:n}=ns(),{workspaces:a}=We(),i=Nt(),l=a.find(m=>m.id===n);if(!(l!=null&&l.environmentId))return a.length===0?void 0:c.jsx(Gn,{to:"/environments",replace:!0});const r=encodeURIComponent(n),u=`/workspaces/${r}`,f=i.pathname.startsWith(u)?i.pathname.slice(u.length):"",p=`/environments/${encodeURIComponent(l.environmentId)}/workspaces/${r}${f}${i.search}${i.hash}`;return c.jsx(Gn,{to:p,replace:!0})}function iL(){return c.jsxs(ck,{children:[c.jsx(je,{path:"setup",element:c.jsx(Q5,{})}),c.jsxs(je,{element:c.jsx(sL,{}),children:[c.jsx(je,{index:!0,element:c.jsx(vO,{})}),c.jsx(je,{path:"chat",element:c.jsx(qO,{})}),c.jsx(je,{path:"tasks",element:c.jsx(mO,{})}),c.jsx(je,{path:"tasks/new",element:c.jsx($0,{})}),c.jsx(je,{path:"tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(je,{path:"tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(je,{path:"tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(je,{path:"tasks/:taskId/edit",element:c.jsx(F0,{})}),c.jsx(je,{path:"workspaces",element:c.jsx(Gn,{to:"/environments",replace:!0})}),c.jsx(je,{path:"workspaces/:workspaceId",element:c.jsx(vf,{})}),c.jsx(je,{path:"workspaces/:workspaceId/tasks/:taskId",element:c.jsx(vf,{})}),c.jsx(je,{path:"workspaces/:workspaceId/tasks/:taskId/*",element:c.jsx(vf,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId",element:c.jsx(SB,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId/tasks/new",element:c.jsx($0,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId/tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId/tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId/tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(je,{path:"environments/:environmentId/workspaces/:workspaceId/tasks/:taskId/edit",element:c.jsx(F0,{})}),c.jsx(je,{path:"sessions/new",element:c.jsx(e6,{})}),c.jsx(je,{path:"sessions/:sessionId",element:c.jsx(a6,{})}),c.jsxs(je,{path:"environments",element:c.jsx(D4,{}),children:[c.jsx(je,{index:!0,element:c.jsx(gO,{})}),c.jsx(je,{path:"new",element:c.jsx(E4,{})}),c.jsx(je,{path:":environmentId",element:c.jsx(lI,{})}),c.jsx(je,{path:":environmentId/edit",element:c.jsx(N4,{})})]}),c.jsxs(je,{path:"settings",element:c.jsx(uI,{}),children:[c.jsx(je,{index:!0,element:c.jsx(Gn,{to:"credentials",replace:!0})}),c.jsx(je,{path:"environments",element:c.jsx(Gn,{to:"/environments",replace:!0})}),c.jsx(je,{path:"credentials",element:c.jsx(QI,{})}),c.jsx(je,{path:"tokens",element:c.jsx(Gn,{to:"../credentials",replace:!0})}),c.jsx(je,{path:"personas",element:c.jsx(T5,{})}),c.jsx(je,{path:"appearance",element:c.jsx(C5,{})}),c.jsx(je,{path:"about",element:c.jsx(N5,{})})]}),c.jsx(je,{path:"*",element:c.jsx(Gn,{to:"/",replace:!0})})]})]})}const oL=1e4;function lL(){const{onboardingCompleted:n}=We(),[a,i]=x.useState(!1);x.useEffect(()=>{if(n!==void 0)return;const r=setTimeout(()=>i(!0),oL);return()=>clearTimeout(r)},[n]);const l=n===void 0&&!a;return c.jsx(Zn,{mode:"wait",children:l?c.jsx(kt.div,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.25},children:c.jsx(PM,{})},"splash"):c.jsx(kt.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.25},style:{minHeight:"100vh"},children:c.jsx(Ok,{children:c.jsx(iL,{})})},"app")})}function rL(){const n=aL?xC:dC;return c.jsx(EC,{children:c.jsx(SC,{children:c.jsx(n,{children:c.jsx(lL,{})})})})}QS.createRoot(document.getElementById("root")).render(c.jsx(x.StrictMode,{children:c.jsx(rL,{})}));

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-Dw97TeQS.js"></script>
+    <script type="module" crossorigin src="/assets/index-C-CehJVA.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-BtTig1d5.css">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web",
-  "version": "0.70.2",
+  "version": "0.70.3",
   "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.70.2"
+    "@grackle-ai/common": "0.70.3"
   },
   "devDependencies": {
     "@rushstack/heft": "1.2.7",