@grackle-ai/web 0.68.3 → 0.69.0

package/dist/assets/{index-OwJy7FWs.js → index-C05gZEug.js}

@@ -97,4 +97,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:d?"Save":"Create"}),c.jsx("button",{type:"button",onClick:z,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:ae,className:He.btnPrimary,children:"+ New Persona"})]}),(m||d)&&re(),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(B=>{const oe=r===B.id,fe=B.type==="script";return c.jsxs("div",{className:`${He.card} ${(d==null?void 0:d.id)===B.id?He.active:""}`,"data-testid":`persona-card-${B.id}`,children:[c.jsxs("div",{className:He.cardHeader,children:[c.jsxs("span",{className:He.cardTitle,children:[c.jsx("strong",{children:B.name}),c.jsx("span",{className:He.typeBadge,"data-testid":`persona-type-badge-${B.id}`,children:fe?"Script":"Agent"}),oe&&c.jsx("span",{className:He.defaultBadge,"data-testid":`persona-default-badge-${B.id}`,children:"App Default"})]}),c.jsxs("div",{className:He.cardActions,children:[!oe&&c.jsx("button",{onClick:()=>f(B.id),className:He.btnSmall,"data-testid":`persona-set-default-${B.id}`,title:"Set as app default persona",children:"Set Default"}),c.jsx("button",{onClick:()=>X(B),className:He.btnSmall,children:"Edit"}),y===B.id?c.jsxs(c.Fragment,{children:[c.jsx("button",{onClick:()=>H(B.id),className:He.btnDanger,children:"Confirm"}),c.jsx("button",{onClick:()=>v(null),className:He.btnSmall,children:"Cancel"})]}):c.jsx("button",{onClick:()=>v(B.id),className:He.btnSmall,children:"Delete"})]})]}),B.description&&c.jsx("p",{className:He.description,children:B.description}),c.jsxs("div",{className:He.meta,children:[B.runtime&&c.jsxs("span",{children:["Runtime: ",B.runtime]}),B.model&&c.jsxs("span",{children:["Model: ",B.model]}),B.maxTurns>0&&c.jsxs("span",{children:["Max turns: ",B.maxTurns]})]}),fe?c.jsxs("details",{className:He.promptDetails,children:[c.jsx("summary",{children:"Script"}),c.jsx("pre",{className:He.promptText,children:B.script})]}):c.jsxs("details",{className:He.promptDetails,children:[c.jsx("summary",{children:"System Prompt"}),c.jsx("pre",{className:He.promptText,children:B.systemPrompt})]})]},B.id)})})]})}function xI(){return c.jsx(bI,{})}function _I(){const{themeId:n,resolvedThemeId:a,setTheme:i,preferSystem:l,setPreferSystem:r}=xb();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:xc.filter(f=>!f.hidden).map(f=>{const d=!!(f.variantLightId&&f.variantDarkId),p=d?n===f.id||n===f.variantLightId||n===f.variantDarkId:n===f.id,m=d&&a===f.variantLightId;return c.jsxs("button",{type:"button",className:`${de.themeOption} ${p?de.themeOptionSelected:""}`,"aria-pressed":p,onClick:()=>i(f.id),children:[c.jsxs("span",{className:de.themeOptionHeader,children:[c.jsxs("span",{children:[c.jsx("span",{className:de.themeOptionLabel,children:f.label}),c.jsx("span",{className:de.themeOptionDesc,children:f.description})]}),d&&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(f.variantLightId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(f.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(f.variantDarkId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(f.variantDarkId))},"aria-label":"Dark variant","aria-pressed":p&&!m,children:"☾"})]})]}),f.swatches&&c.jsx("span",{className:de.themeSwatches,children:f.swatches.map((g,y)=>c.jsx("span",{className:de.themeSwatch,style:{background:g}},y))})]},f.id)})}),c.jsxs("label",{className:de.systemToggle,children:[c.jsx("input",{type:"checkbox",checked:l,onChange:f=>r(f.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 SI(){return c.jsx(_I,{})}function TI(){const{connected:n,environments:a,sessions:i}=Je(),l=a.filter(d=>d.status==="connected").length,r=a.length,f=i.filter(d=>["running","idle"].includes(d.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:f})]}),c.jsxs("div",{className:de.aboutItem,children:[c.jsx("span",{className:de.aboutLabel,children:"Version"}),c.jsx("span",{className:de.aboutValue,children:"0.68.2"})]})]})]})}function CI(){return c.jsx(TI,{})}const kI="_wizard_1260s_1",EI="_container_1260s_10",NI="_stepContent_1260s_19",AI="_logoArea_1260s_28",wI="_logoImage_1260s_32",jI="_heading_1260s_41",DI="_tagline_1260s_49",MI="_subtitle_1260s_56",RI="_featureList_1260s_64",OI="_runtimeGrid_1260s_89",BI="_runtimeCard_1260s_101",II="_runtimeName_1260s_133",LI="_runtimeDescription_1260s_139",zI="_buttonRow_1260s_144",UI="_primaryButton_1260s_151",VI="_ghostButton_1260s_185",HI="_dots_1260s_213",GI="_dot_1260s_213",We={wizard:kI,container:EI,stepContent:NI,logoArea:AI,logoImage:wI,heading:jI,tagline:DI,subtitle:MI,featureList:RI,runtimeGrid:OI,runtimeCard:BI,runtimeName:II,runtimeDescription:LI,buttonRow:zI,primaryButton:UI,ghostButton:VI,dots:HI,dot:GI};function PI({onNext:n}){return c.jsxs("div",{className:We.stepContent,"data-testid":"setup-welcome",children:[c.jsx("div",{className:We.logoArea,children:c.jsx("img",{src:"/grackle-logo.png",alt:"Grackle",className:We.logoImage})}),c.jsx("h1",{className:We.heading,children:"Welcome to Grackle"}),c.jsx("p",{className:We.tagline,children:"Multi-agent orchestration for software teams"}),c.jsx("button",{type:"button",className:We.primaryButton,onClick:n,"data-testid":"setup-get-started",children:"Get Started"})]})}function $I({onNext:n,onBack:a}){return c.jsxs("div",{className:We.stepContent,"data-testid":"setup-about",children:[c.jsx("h2",{className:We.heading,children:"What is Grackle?"}),c.jsxs("ul",{className:We.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:We.buttonRow,children:[c.jsx("button",{type:"button",className:We.ghostButton,onClick:a,children:"Back"}),c.jsx("button",{type:"button",className:We.primaryButton,onClick:n,"data-testid":"setup-about-next",children:"Next"})]})]})}const FI=[{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 qI({currentRuntime:n,onFinish:a,onBack:i,finishDisabled:l}){const[r,f]=b.useState(n||"claude-code");return b.useEffect(()=>{n&&f(n)},[n]),c.jsxs("div",{className:We.stepContent,"data-testid":"setup-runtime",children:[c.jsx("h2",{className:We.heading,children:"Choose Your Runtime"}),c.jsx("p",{className:We.subtitle,children:"Select the primary agent runtime for your workspace. You can change this later."}),c.jsx("div",{className:We.runtimeGrid,children:FI.map(d=>c.jsxs("button",{type:"button",className:We.runtimeCard,"data-selected":r===d.id,"aria-pressed":r===d.id,"data-testid":`runtime-card-${d.id}`,onClick:()=>f(d.id),children:[c.jsx("span",{className:We.runtimeName,children:d.name}),c.jsx("span",{className:We.runtimeDescription,children:d.description})]},d.id))}),c.jsxs("div",{className:We.buttonRow,children:[c.jsx("button",{type:"button",className:We.ghostButton,onClick:i,children:"Back"}),c.jsx("button",{type:"button",className:We.primaryButton,onClick:()=>a(r),disabled:l,"data-testid":"setup-finish",children:"Finish"})]})]})}const YI=3,q0={"claude-code":"sonnet",copilot:"gpt-4o",codex:"o3"};function KI(){const{personas:n,updatePersona:a,completeOnboarding:i,onboardingCompleted:l}=Je(),r=Ut(),[f,d]=b.useState(0),p=n.find(g=>g.id==="claude-code"),m=b.useCallback(g=>{if(p&&g!==p.runtime){const v=q0[g]??"sonnet";a(p.id,void 0,void 0,void 0,g,v)}const y=n.find(v=>v.id===E0);if(y&&g!==y.runtime){const v=q0[g]??"sonnet";a(E0,void 0,void 0,void 0,g,v)}i(),r("/",{replace:!0})},[p,n,a,i,r]);return l===!0?c.jsx(Ka,{to:"/",replace:!0}):c.jsx("div",{className:We.wizard,"data-testid":"setup-wizard",children:c.jsxs("div",{className:We.container,children:[c.jsx(qn,{mode:"wait",children:c.jsxs(St.div,{initial:{opacity:0,x:40},animate:{opacity:1,x:0},exit:{opacity:0,x:-40},transition:{duration:.2,ease:"easeInOut"},children:[f===0&&c.jsx(PI,{onNext:()=>d(1)}),f===1&&c.jsx($I,{onNext:()=>d(2),onBack:()=>d(0)}),f===2&&c.jsx(qI,{currentRuntime:(p==null?void 0:p.runtime)??"claude-code",onFinish:m,onBack:()=>d(1),finishDisabled:!p})]},f)}),c.jsx("div",{className:We.dots,children:Array.from({length:YI},(g,y)=>c.jsx("span",{className:We.dot,"data-active":y===f},y))})]})})}const ZI="_root_zndgp_1",XI="_body_zndgp_7",QI="_main_zndgp_19",WI="_sidebarWrapper_zndgp_26",JI="_overlay_zndgp_51",Yo={root:ZI,body:XI,main:QI,sidebarWrapper:WI,overlay:JI},eL=typeof window<"u"&&new URLSearchParams(window.location.search).has("mock");function tL(){const{lastSpawnedId:n,environments:a,connected:i,onboardingCompleted:l}=Je(),{showToast:r}=Pi();HM(a,r);const f=Ut(),d=At(),[p,m]=b.useState(!1),g=b.useCallback(()=>m(y=>!y),[]);return b.useEffect(()=>{m(!1)},[d.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&&!d.pathname.includes("/tasks/")&&f(fb(n),{replace:!0})},[n,f,d.pathname]),i&&l===!1?c.jsx(Ka,{to:"/setup",replace:!0}):c.jsxs("div",{className:Yo.root,children:[c.jsx(Rk,{onToggleSidebar:g,sidebarOpen:p}),c.jsx(Uk,{}),c.jsxs("div",{className:Yo.body,children:[c.jsx("div",{className:Yo.sidebarWrapper,"data-sidebar-open":p,children:c.jsx(aD,{})}),p&&c.jsx("div",{className:Yo.overlay,"data-testid":"drawer-overlay",onClick:()=>m(!1)}),c.jsxs("div",{className:Yo.main,children:[c.jsx(eh,{}),c.jsx(dD,{})]})]}),c.jsx(CD,{})]})}function nL(){return c.jsxs(oC,{children:[c.jsx(Be,{path:"setup",element:c.jsx(KI,{})}),c.jsxs(Be,{element:c.jsx(tL,{}),children:[c.jsx(Be,{index:!0,element:c.jsx(pO,{})}),c.jsx(Be,{path:"chat",element:c.jsx(PO,{})}),c.jsx(Be,{path:"tasks",element:c.jsx(fO,{})}),c.jsx(Be,{path:"tasks/new",element:c.jsx(V6,{})}),c.jsx(Be,{path:"tasks/:taskId",element:c.jsx(ki,{})}),c.jsx(Be,{path:"tasks/:taskId/stream",element:c.jsx(ki,{})}),c.jsx(Be,{path:"tasks/:taskId/findings",element:c.jsx(ki,{})}),c.jsx(Be,{path:"tasks/:taskId/edit",element:c.jsx(P0,{})}),c.jsx(Be,{path:"workspaces",element:c.jsx(Ka,{to:"/environments",replace:!0})}),c.jsx(Be,{path:"workspaces/:workspaceId",element:c.jsx(y6,{})}),c.jsx(Be,{path:"workspaces/:workspaceId/tasks/:taskId",element:c.jsx(ki,{})}),c.jsx(Be,{path:"workspaces/:workspaceId/tasks/:taskId/stream",element:c.jsx(ki,{})}),c.jsx(Be,{path:"workspaces/:workspaceId/tasks/:taskId/findings",element:c.jsx(ki,{})}),c.jsx(Be,{path:"workspaces/:workspaceId/tasks/:taskId/edit",element:c.jsx(P0,{})}),c.jsx(Be,{path:"sessions/new",element:c.jsx(XO,{})}),c.jsx(Be,{path:"sessions/:sessionId",element:c.jsx(JO,{})}),c.jsxs(Be,{path:"environments",element:c.jsx(A4,{}),children:[c.jsx(Be,{index:!0,element:c.jsx(hO,{})}),c.jsx(Be,{path:"new",element:c.jsx(T4,{})}),c.jsx(Be,{path:":environmentId",element:c.jsx(s5,{})}),c.jsx(Be,{path:":environmentId/edit",element:c.jsx(C4,{})})]}),c.jsxs(Be,{path:"settings",element:c.jsx(l5,{}),children:[c.jsx(Be,{index:!0,element:c.jsx(Ka,{to:"credentials",replace:!0})}),c.jsx(Be,{path:"environments",element:c.jsx(Ka,{to:"/environments",replace:!0})}),c.jsx(Be,{path:"credentials",element:c.jsx(K5,{})}),c.jsx(Be,{path:"tokens",element:c.jsx(Ka,{to:"../credentials",replace:!0})}),c.jsx(Be,{path:"personas",element:c.jsx(xI,{})}),c.jsx(Be,{path:"appearance",element:c.jsx(SI,{})}),c.jsx(Be,{path:"about",element:c.jsx(CI,{})})]}),c.jsx(Be,{path:"*",element:c.jsx(Ka,{to:"/",replace:!0})})]})]})}const aL=1e4;function sL(){const{onboardingCompleted:n}=Je(),[a,i]=b.useState(!1);b.useEffect(()=>{if(n!==void 0)return;const r=setTimeout(()=>i(!0),aL);return()=>clearTimeout(r)},[n]);const l=n===void 0&&!a;return c.jsx(qn,{mode:"wait",children:l?c.jsx(St.div,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.25},children:c.jsx(VM,{})},"splash"):c.jsx(St.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.25},style:{minHeight:"100vh"},children:c.jsx(DC,{children:c.jsx(nL,{})})},"app")})}function iL(){const n=eL?vk:rk;return c.jsx(Tk,{children:c.jsx(bk,{children:c.jsx(n,{children:c.jsx(sL,{})})})})}KS.createRoot(document.getElementById("root")).render(c.jsx(b.StrictMode,{children:c.jsx(iL,{})}));
+$\`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:d?"Save":"Create"}),c.jsx("button",{type:"button",onClick:z,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:ae,className:He.btnPrimary,children:"+ New Persona"})]}),(m||d)&&re(),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(B=>{const oe=r===B.id,fe=B.type==="script";return c.jsxs("div",{className:`${He.card} ${(d==null?void 0:d.id)===B.id?He.active:""}`,"data-testid":`persona-card-${B.id}`,children:[c.jsxs("div",{className:He.cardHeader,children:[c.jsxs("span",{className:He.cardTitle,children:[c.jsx("strong",{children:B.name}),c.jsx("span",{className:He.typeBadge,"data-testid":`persona-type-badge-${B.id}`,children:fe?"Script":"Agent"}),oe&&c.jsx("span",{className:He.defaultBadge,"data-testid":`persona-default-badge-${B.id}`,children:"App Default"})]}),c.jsxs("div",{className:He.cardActions,children:[!oe&&c.jsx("button",{onClick:()=>f(B.id),className:He.btnSmall,"data-testid":`persona-set-default-${B.id}`,title:"Set as app default persona",children:"Set Default"}),c.jsx("button",{onClick:()=>X(B),className:He.btnSmall,children:"Edit"}),y===B.id?c.jsxs(c.Fragment,{children:[c.jsx("button",{onClick:()=>H(B.id),className:He.btnDanger,children:"Confirm"}),c.jsx("button",{onClick:()=>v(null),className:He.btnSmall,children:"Cancel"})]}):c.jsx("button",{onClick:()=>v(B.id),className:He.btnSmall,children:"Delete"})]})]}),B.description&&c.jsx("p",{className:He.description,children:B.description}),c.jsxs("div",{className:He.meta,children:[B.runtime&&c.jsxs("span",{children:["Runtime: ",B.runtime]}),B.model&&c.jsxs("span",{children:["Model: ",B.model]}),B.maxTurns>0&&c.jsxs("span",{children:["Max turns: ",B.maxTurns]})]}),fe?c.jsxs("details",{className:He.promptDetails,children:[c.jsx("summary",{children:"Script"}),c.jsx("pre",{className:He.promptText,children:B.script})]}):c.jsxs("details",{className:He.promptDetails,children:[c.jsx("summary",{children:"System Prompt"}),c.jsx("pre",{className:He.promptText,children:B.systemPrompt})]})]},B.id)})})]})}function xI(){return c.jsx(bI,{})}function _I(){const{themeId:n,resolvedThemeId:a,setTheme:i,preferSystem:l,setPreferSystem:r}=xb();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:xc.filter(f=>!f.hidden).map(f=>{const d=!!(f.variantLightId&&f.variantDarkId),p=d?n===f.id||n===f.variantLightId||n===f.variantDarkId:n===f.id,m=d&&a===f.variantLightId;return c.jsxs("button",{type:"button",className:`${de.themeOption} ${p?de.themeOptionSelected:""}`,"aria-pressed":p,onClick:()=>i(f.id),children:[c.jsxs("span",{className:de.themeOptionHeader,children:[c.jsxs("span",{children:[c.jsx("span",{className:de.themeOptionLabel,children:f.label}),c.jsx("span",{className:de.themeOptionDesc,children:f.description})]}),d&&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(f.variantLightId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(f.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(f.variantDarkId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(f.variantDarkId))},"aria-label":"Dark variant","aria-pressed":p&&!m,children:"☾"})]})]}),f.swatches&&c.jsx("span",{className:de.themeSwatches,children:f.swatches.map((g,y)=>c.jsx("span",{className:de.themeSwatch,style:{background:g}},y))})]},f.id)})}),c.jsxs("label",{className:de.systemToggle,children:[c.jsx("input",{type:"checkbox",checked:l,onChange:f=>r(f.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 SI(){return c.jsx(_I,{})}function TI(){const{connected:n,environments:a,sessions:i}=Je(),l=a.filter(d=>d.status==="connected").length,r=a.length,f=i.filter(d=>["running","idle"].includes(d.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:f})]}),c.jsxs("div",{className:de.aboutItem,children:[c.jsx("span",{className:de.aboutLabel,children:"Version"}),c.jsx("span",{className:de.aboutValue,children:"0.68.3"})]})]})]})}function CI(){return c.jsx(TI,{})}const kI="_wizard_1260s_1",EI="_container_1260s_10",NI="_stepContent_1260s_19",AI="_logoArea_1260s_28",wI="_logoImage_1260s_32",jI="_heading_1260s_41",DI="_tagline_1260s_49",MI="_subtitle_1260s_56",RI="_featureList_1260s_64",OI="_runtimeGrid_1260s_89",BI="_runtimeCard_1260s_101",II="_runtimeName_1260s_133",LI="_runtimeDescription_1260s_139",zI="_buttonRow_1260s_144",UI="_primaryButton_1260s_151",VI="_ghostButton_1260s_185",HI="_dots_1260s_213",GI="_dot_1260s_213",We={wizard:kI,container:EI,stepContent:NI,logoArea:AI,logoImage:wI,heading:jI,tagline:DI,subtitle:MI,featureList:RI,runtimeGrid:OI,runtimeCard:BI,runtimeName:II,runtimeDescription:LI,buttonRow:zI,primaryButton:UI,ghostButton:VI,dots:HI,dot:GI};function PI({onNext:n}){return c.jsxs("div",{className:We.stepContent,"data-testid":"setup-welcome",children:[c.jsx("div",{className:We.logoArea,children:c.jsx("img",{src:"/grackle-logo.png",alt:"Grackle",className:We.logoImage})}),c.jsx("h1",{className:We.heading,children:"Welcome to Grackle"}),c.jsx("p",{className:We.tagline,children:"Multi-agent orchestration for software teams"}),c.jsx("button",{type:"button",className:We.primaryButton,onClick:n,"data-testid":"setup-get-started",children:"Get Started"})]})}function $I({onNext:n,onBack:a}){return c.jsxs("div",{className:We.stepContent,"data-testid":"setup-about",children:[c.jsx("h2",{className:We.heading,children:"What is Grackle?"}),c.jsxs("ul",{className:We.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:We.buttonRow,children:[c.jsx("button",{type:"button",className:We.ghostButton,onClick:a,children:"Back"}),c.jsx("button",{type:"button",className:We.primaryButton,onClick:n,"data-testid":"setup-about-next",children:"Next"})]})]})}const FI=[{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 qI({currentRuntime:n,onFinish:a,onBack:i,finishDisabled:l}){const[r,f]=b.useState(n||"claude-code");return b.useEffect(()=>{n&&f(n)},[n]),c.jsxs("div",{className:We.stepContent,"data-testid":"setup-runtime",children:[c.jsx("h2",{className:We.heading,children:"Choose Your Runtime"}),c.jsx("p",{className:We.subtitle,children:"Select the primary agent runtime for your workspace. You can change this later."}),c.jsx("div",{className:We.runtimeGrid,children:FI.map(d=>c.jsxs("button",{type:"button",className:We.runtimeCard,"data-selected":r===d.id,"aria-pressed":r===d.id,"data-testid":`runtime-card-${d.id}`,onClick:()=>f(d.id),children:[c.jsx("span",{className:We.runtimeName,children:d.name}),c.jsx("span",{className:We.runtimeDescription,children:d.description})]},d.id))}),c.jsxs("div",{className:We.buttonRow,children:[c.jsx("button",{type:"button",className:We.ghostButton,onClick:i,children:"Back"}),c.jsx("button",{type:"button",className:We.primaryButton,onClick:()=>a(r),disabled:l,"data-testid":"setup-finish",children:"Finish"})]})]})}const YI=3,q0={"claude-code":"sonnet",copilot:"gpt-4o",codex:"o3"};function KI(){const{personas:n,updatePersona:a,completeOnboarding:i,onboardingCompleted:l}=Je(),r=Ut(),[f,d]=b.useState(0),p=n.find(g=>g.id==="claude-code"),m=b.useCallback(g=>{if(p&&g!==p.runtime){const v=q0[g]??"sonnet";a(p.id,void 0,void 0,void 0,g,v)}const y=n.find(v=>v.id===E0);if(y&&g!==y.runtime){const v=q0[g]??"sonnet";a(E0,void 0,void 0,void 0,g,v)}i(),r("/",{replace:!0})},[p,n,a,i,r]);return l===!0?c.jsx(Ka,{to:"/",replace:!0}):c.jsx("div",{className:We.wizard,"data-testid":"setup-wizard",children:c.jsxs("div",{className:We.container,children:[c.jsx(qn,{mode:"wait",children:c.jsxs(St.div,{initial:{opacity:0,x:40},animate:{opacity:1,x:0},exit:{opacity:0,x:-40},transition:{duration:.2,ease:"easeInOut"},children:[f===0&&c.jsx(PI,{onNext:()=>d(1)}),f===1&&c.jsx($I,{onNext:()=>d(2),onBack:()=>d(0)}),f===2&&c.jsx(qI,{currentRuntime:(p==null?void 0:p.runtime)??"claude-code",onFinish:m,onBack:()=>d(1),finishDisabled:!p})]},f)}),c.jsx("div",{className:We.dots,children:Array.from({length:YI},(g,y)=>c.jsx("span",{className:We.dot,"data-active":y===f},y))})]})})}const ZI="_root_zndgp_1",XI="_body_zndgp_7",QI="_main_zndgp_19",WI="_sidebarWrapper_zndgp_26",JI="_overlay_zndgp_51",Yo={root:ZI,body:XI,main:QI,sidebarWrapper:WI,overlay:JI},eL=typeof window<"u"&&new URLSearchParams(window.location.search).has("mock");function tL(){const{lastSpawnedId:n,environments:a,connected:i,onboardingCompleted:l}=Je(),{showToast:r}=Pi();HM(a,r);const f=Ut(),d=At(),[p,m]=b.useState(!1),g=b.useCallback(()=>m(y=>!y),[]);return b.useEffect(()=>{m(!1)},[d.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&&!d.pathname.includes("/tasks/")&&f(fb(n),{replace:!0})},[n,f,d.pathname]),i&&l===!1?c.jsx(Ka,{to:"/setup",replace:!0}):c.jsxs("div",{className:Yo.root,children:[c.jsx(Rk,{onToggleSidebar:g,sidebarOpen:p}),c.jsx(Uk,{}),c.jsxs("div",{className:Yo.body,children:[c.jsx("div",{className:Yo.sidebarWrapper,"data-sidebar-open":p,children:c.jsx(aD,{})}),p&&c.jsx("div",{className:Yo.overlay,"data-testid":"drawer-overlay",onClick:()=>m(!1)}),c.jsxs("div",{className:Yo.main,children:[c.jsx(eh,{}),c.jsx(dD,{})]})]}),c.jsx(CD,{})]})}function nL(){return c.jsxs(oC,{children:[c.jsx(Be,{path:"setup",element:c.jsx(KI,{})}),c.jsxs(Be,{element:c.jsx(tL,{}),children:[c.jsx(Be,{index:!0,element:c.jsx(pO,{})}),c.jsx(Be,{path:"chat",element:c.jsx(PO,{})}),c.jsx(Be,{path:"tasks",element:c.jsx(fO,{})}),c.jsx(Be,{path:"tasks/new",element:c.jsx(V6,{})}),c.jsx(Be,{path:"tasks/:taskId",element:c.jsx(ki,{})}),c.jsx(Be,{path:"tasks/:taskId/stream",element:c.jsx(ki,{})}),c.jsx(Be,{path:"tasks/:taskId/findings",element:c.jsx(ki,{})}),c.jsx(Be,{path:"tasks/:taskId/edit",element:c.jsx(P0,{})}),c.jsx(Be,{path:"workspaces",element:c.jsx(Ka,{to:"/environments",replace:!0})}),c.jsx(Be,{path:"workspaces/:workspaceId",element:c.jsx(y6,{})}),c.jsx(Be,{path:"workspaces/:workspaceId/tasks/:taskId",element:c.jsx(ki,{})}),c.jsx(Be,{path:"workspaces/:workspaceId/tasks/:taskId/stream",element:c.jsx(ki,{})}),c.jsx(Be,{path:"workspaces/:workspaceId/tasks/:taskId/findings",element:c.jsx(ki,{})}),c.jsx(Be,{path:"workspaces/:workspaceId/tasks/:taskId/edit",element:c.jsx(P0,{})}),c.jsx(Be,{path:"sessions/new",element:c.jsx(XO,{})}),c.jsx(Be,{path:"sessions/:sessionId",element:c.jsx(JO,{})}),c.jsxs(Be,{path:"environments",element:c.jsx(A4,{}),children:[c.jsx(Be,{index:!0,element:c.jsx(hO,{})}),c.jsx(Be,{path:"new",element:c.jsx(T4,{})}),c.jsx(Be,{path:":environmentId",element:c.jsx(s5,{})}),c.jsx(Be,{path:":environmentId/edit",element:c.jsx(C4,{})})]}),c.jsxs(Be,{path:"settings",element:c.jsx(l5,{}),children:[c.jsx(Be,{index:!0,element:c.jsx(Ka,{to:"credentials",replace:!0})}),c.jsx(Be,{path:"environments",element:c.jsx(Ka,{to:"/environments",replace:!0})}),c.jsx(Be,{path:"credentials",element:c.jsx(K5,{})}),c.jsx(Be,{path:"tokens",element:c.jsx(Ka,{to:"../credentials",replace:!0})}),c.jsx(Be,{path:"personas",element:c.jsx(xI,{})}),c.jsx(Be,{path:"appearance",element:c.jsx(SI,{})}),c.jsx(Be,{path:"about",element:c.jsx(CI,{})})]}),c.jsx(Be,{path:"*",element:c.jsx(Ka,{to:"/",replace:!0})})]})]})}const aL=1e4;function sL(){const{onboardingCompleted:n}=Je(),[a,i]=b.useState(!1);b.useEffect(()=>{if(n!==void 0)return;const r=setTimeout(()=>i(!0),aL);return()=>clearTimeout(r)},[n]);const l=n===void 0&&!a;return c.jsx(qn,{mode:"wait",children:l?c.jsx(St.div,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.25},children:c.jsx(VM,{})},"splash"):c.jsx(St.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.25},style:{minHeight:"100vh"},children:c.jsx(DC,{children:c.jsx(nL,{})})},"app")})}function iL(){const n=eL?vk:rk;return c.jsx(Tk,{children:c.jsx(bk,{children:c.jsx(n,{children:c.jsx(sL,{})})})})}KS.createRoot(document.getElementById("root")).render(c.jsx(b.StrictMode,{children:c.jsx(iL,{})}));

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-OwJy7FWs.js"></script>
+    <script type="module" crossorigin src="/assets/index-C05gZEug.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.68.3",
+  "version": "0.69.0",
   "description": "React web UI for the Grackle multi-agent coordination platform",
   "license": "MIT",
   "repository": {
@@ -31,10 +31,10 @@
     "rehype-prism-plus": "^2.0.0",
     "remark-gfm": "^4.0.0",
     "react-router": "^7.0.0",
-    "@grackle-ai/common": "0.68.3"
+    "@grackle-ai/common": "0.69.0"
   },
   "devDependencies": {
-    "@rushstack/heft": "1.2.4",
+    "@rushstack/heft": "1.2.7",
     "@vitejs/plugin-react": "^4.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",