@grackle-ai/web 0.57.1 → 0.58.0

package/dist/assets/{index-BmoxdPk-.js → index-BIXjqVsn.js}

@@ -97,4 +97,4 @@ const grackle = await host.mcpServer({
   url: env.vars.GRACKLE_MCP_URL,
 });
 
-$\`Summarize the current tasks.\`;`,rows:20,className:Fe.scriptEditor,required:!0,"data-testid":"persona-script-editor"})]})]}),c.jsxs("div",{className:Fe.formActions,children:[c.jsx("button",{type:"submit",className:Fe.btnPrimary,children:u?"Save":"Create"}),c.jsx("button",{type:"button",onClick:ne,className:Fe.btnSecondary,children:"Cancel"})]})]});return c.jsxs("div",{className:Fe.container,children:[c.jsxs("div",{className:Fe.header,children:[c.jsx("h2",{children:"Personas"}),c.jsx("button",{onClick:re,className:Fe.btnPrimary,children:"+ New Persona"})]}),(m||u)&&oe(),n.length===0&&!m?c.jsx("p",{className:Fe.empty,children:"No personas yet. Create one to get started."}):c.jsx("div",{className:Fe.list,children:n.map(z=>{const J=r===z.id,Se=z.type==="script";return c.jsxs("div",{className:`${Fe.card} ${(u==null?void 0:u.id)===z.id?Fe.active:""}`,"data-testid":`persona-card-${z.id}`,children:[c.jsxs("div",{className:Fe.cardHeader,children:[c.jsxs("span",{className:Fe.cardTitle,children:[c.jsx("strong",{children:z.name}),c.jsx("span",{className:Fe.typeBadge,"data-testid":`persona-type-badge-${z.id}`,children:Se?"Script":"Agent"}),J&&c.jsx("span",{className:Fe.defaultBadge,"data-testid":`persona-default-badge-${z.id}`,children:"App Default"})]}),c.jsxs("div",{className:Fe.cardActions,children:[!J&&c.jsx("button",{onClick:()=>f(z.id),className:Fe.btnSmall,"data-testid":`persona-set-default-${z.id}`,title:"Set as app default persona",children:"Set Default"}),c.jsx("button",{onClick:()=>Q(z),className:Fe.btnSmall,children:"Edit"}),y===z.id?c.jsxs(c.Fragment,{children:[c.jsx("button",{onClick:()=>D(z.id),className:Fe.btnDanger,children:"Confirm"}),c.jsx("button",{onClick:()=>v(null),className:Fe.btnSmall,children:"Cancel"})]}):c.jsx("button",{onClick:()=>v(z.id),className:Fe.btnSmall,children:"Delete"})]})]}),z.description&&c.jsx("p",{className:Fe.description,children:z.description}),c.jsxs("div",{className:Fe.meta,children:[z.runtime&&c.jsxs("span",{children:["Runtime: ",z.runtime]}),z.model&&c.jsxs("span",{children:["Model: ",z.model]}),z.maxTurns>0&&c.jsxs("span",{children:["Max turns: ",z.maxTurns]})]}),Se?c.jsxs("details",{className:Fe.promptDetails,children:[c.jsx("summary",{children:"Script"}),c.jsx("pre",{className:Fe.promptText,children:z.script})]}):c.jsxs("details",{className:Fe.promptDetails,children:[c.jsx("summary",{children:"System Prompt"}),c.jsx("pre",{className:Fe.promptText,children:z.systemPrompt})]})]},z.id)})})]})}function dI(){return c.jsx(uI,{})}function fI(){const{themeId:n,resolvedThemeId:a,setTheme:i,preferSystem:o,setPreferSystem:r}=bb();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:vc.filter(f=>!f.hidden).map(f=>{const u=!!(f.variantLightId&&f.variantDarkId),p=u?n===f.id||n===f.variantLightId||n===f.variantDarkId:n===f.id,m=u&&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})]}),u&&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:o,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 hI(){return c.jsx(fI,{})}function pI(){const{connected:n,environments:a,sessions:i}=ut(),o=a.filter(u=>u.status==="connected").length,r=a.length,f=i.filter(u=>["running","idle"].includes(u.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:[o,"/",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.57.0"})]})]})]})}function mI(){return c.jsx(pI,{})}const gI="_wizard_1260s_1",vI="_container_1260s_10",yI="_stepContent_1260s_19",bI="_logoArea_1260s_28",xI="_logoImage_1260s_32",_I="_heading_1260s_41",SI="_tagline_1260s_49",TI="_subtitle_1260s_56",CI="_featureList_1260s_64",kI="_runtimeGrid_1260s_89",EI="_runtimeCard_1260s_101",NI="_runtimeName_1260s_133",AI="_runtimeDescription_1260s_139",jI="_buttonRow_1260s_144",wI="_primaryButton_1260s_151",DI="_ghostButton_1260s_185",MI="_dots_1260s_213",RI="_dot_1260s_213",st={wizard:gI,container:vI,stepContent:yI,logoArea:bI,logoImage:xI,heading:_I,tagline:SI,subtitle:TI,featureList:CI,runtimeGrid:kI,runtimeCard:EI,runtimeName:NI,runtimeDescription:AI,buttonRow:jI,primaryButton:wI,ghostButton:DI,dots:MI,dot:RI};function OI({onNext:n}){return c.jsxs("div",{className:st.stepContent,"data-testid":"setup-welcome",children:[c.jsx("div",{className:st.logoArea,children:c.jsx("img",{src:"/grackle-logo.png",alt:"Grackle",className:st.logoImage})}),c.jsx("h1",{className:st.heading,children:"Welcome to Grackle"}),c.jsx("p",{className:st.tagline,children:"Multi-agent orchestration for software teams"}),c.jsx("button",{type:"button",className:st.primaryButton,onClick:n,"data-testid":"setup-get-started",children:"Get Started"})]})}function BI({onNext:n,onBack:a}){return c.jsxs("div",{className:st.stepContent,"data-testid":"setup-about",children:[c.jsx("h2",{className:st.heading,children:"What is Grackle?"}),c.jsxs("ul",{className:st.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:st.buttonRow,children:[c.jsx("button",{type:"button",className:st.ghostButton,onClick:a,children:"Back"}),c.jsx("button",{type:"button",className:st.primaryButton,onClick:n,"data-testid":"setup-about-next",children:"Next"})]})]})}const II=[{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 LI({currentRuntime:n,onFinish:a,onBack:i,finishDisabled:o}){const[r,f]=_.useState(n||"claude-code");return _.useEffect(()=>{n&&f(n)},[n]),c.jsxs("div",{className:st.stepContent,"data-testid":"setup-runtime",children:[c.jsx("h2",{className:st.heading,children:"Choose Your Runtime"}),c.jsx("p",{className:st.subtitle,children:"Select the primary agent runtime for your workspace. You can change this later."}),c.jsx("div",{className:st.runtimeGrid,children:II.map(u=>c.jsxs("button",{type:"button",className:st.runtimeCard,"data-selected":r===u.id,"aria-pressed":r===u.id,"data-testid":`runtime-card-${u.id}`,onClick:()=>f(u.id),children:[c.jsx("span",{className:st.runtimeName,children:u.name}),c.jsx("span",{className:st.runtimeDescription,children:u.description})]},u.id))}),c.jsxs("div",{className:st.buttonRow,children:[c.jsx("button",{type:"button",className:st.ghostButton,onClick:i,children:"Back"}),c.jsx("button",{type:"button",className:st.primaryButton,onClick:()=>a(r),disabled:o,"data-testid":"setup-finish",children:"Finish"})]})]})}const UI=3,$0={"claude-code":"sonnet",copilot:"gpt-4o",codex:"o3"};function zI(){const{personas:n,updatePersona:a,completeOnboarding:i,onboardingCompleted:o}=ut(),r=$t(),[f,u]=_.useState(0),p=n.find(g=>g.id==="claude-code"),m=_.useCallback(g=>{if(p&&g!==p.runtime){const v=$0[g]??"sonnet";a(p.id,void 0,void 0,void 0,g,v)}const y=n.find(v=>v.id===k0);if(y&&g!==y.runtime){const v=$0[g]??"sonnet";a(k0,void 0,void 0,void 0,g,v)}i(),r("/",{replace:!0})},[p,n,a,i,r]);return o===!0?c.jsx(es,{to:"/",replace:!0}):c.jsx("div",{className:st.wizard,"data-testid":"setup-wizard",children:c.jsxs("div",{className:st.container,children:[c.jsx(Wn,{mode:"wait",children:c.jsxs(Nt.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(OI,{onNext:()=>u(1)}),f===1&&c.jsx(BI,{onNext:()=>u(2),onBack:()=>u(0)}),f===2&&c.jsx(LI,{currentRuntime:(p==null?void 0:p.runtime)??"claude-code",onFinish:m,onBack:()=>u(1),finishDisabled:!p})]},f)}),c.jsx("div",{className:st.dots,children:Array.from({length:UI},(g,y)=>c.jsx("span",{className:st.dot,"data-active":y===f},y))})]})})}const VI="_root_zndgp_1",HI="_body_zndgp_7",GI="_main_zndgp_19",PI="_sidebarWrapper_zndgp_26",FI="_overlay_zndgp_51",$l={root:VI,body:HI,main:GI,sidebarWrapper:PI,overlay:FI},$I=typeof window<"u"&&new URLSearchParams(window.location.search).has("mock");function qI(){const{lastSpawnedId:n,environments:a,connected:i,onboardingCompleted:o}=ut(),{showToast:r}=Fi();GM(a,r);const f=$t(),u=Rt(),[p,m]=_.useState(!1),g=_.useCallback(()=>m(y=>!y),[]);return _.useEffect(()=>{m(!1)},[u.pathname]),_.useEffect(()=>{if(!p)return;const y=v=>{v.key==="Escape"&&m(!1)};return document.addEventListener("keydown",y),()=>{document.removeEventListener("keydown",y)}},[p]),_.useEffect(()=>{n&&!u.pathname.includes("/tasks/")&&f(db(n),{replace:!0})},[n,f,u.pathname]),i&&o===!1?c.jsx(es,{to:"/setup",replace:!0}):c.jsxs("div",{className:$l.root,children:[c.jsx(Dk,{onToggleSidebar:g,sidebarOpen:p}),c.jsx(Lk,{}),c.jsxs("div",{className:$l.body,children:[c.jsx("div",{className:$l.sidebarWrapper,"data-sidebar-open":p,children:c.jsx(tD,{})}),p&&c.jsx("div",{className:$l.overlay,"data-testid":"drawer-overlay",onClick:()=>m(!1)}),c.jsxs("div",{className:$l.main,children:[c.jsx(Jf,{}),c.jsx(mD,{})]})]}),c.jsx(AD,{})]})}function YI(){return c.jsxs(sC,{children:[c.jsx(Ie,{path:"setup",element:c.jsx(zI,{})}),c.jsxs(Ie,{element:c.jsx(qI,{}),children:[c.jsx(Ie,{index:!0,element:c.jsx(mO,{})}),c.jsx(Ie,{path:"chat",element:c.jsx(OO,{})}),c.jsx(Ie,{path:"tasks",element:c.jsx(hO,{})}),c.jsx(Ie,{path:"tasks/new",element:c.jsx(D6,{})}),c.jsx(Ie,{path:"tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"tasks/:taskId/edit",element:c.jsx(G0,{})}),c.jsx(Ie,{path:"workspaces",element:c.jsx(es,{to:"/environments",replace:!0})}),c.jsx(Ie,{path:"workspaces/:workspaceId",element:c.jsx(c6,{})}),c.jsx(Ie,{path:"workspaces/:workspaceId/tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"workspaces/:workspaceId/tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"workspaces/:workspaceId/tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"workspaces/:workspaceId/tasks/:taskId/edit",element:c.jsx(G0,{})}),c.jsx(Ie,{path:"sessions/new",element:c.jsx(HO,{})}),c.jsx(Ie,{path:"sessions/:sessionId",element:c.jsx(FO,{})}),c.jsxs(Ie,{path:"environments",element:c.jsx(b4,{}),children:[c.jsx(Ie,{index:!0,element:c.jsx(pO,{})}),c.jsx(Ie,{path:"new",element:c.jsx(p4,{})}),c.jsx(Ie,{path:":environmentId",element:c.jsx(Z4,{})}),c.jsx(Ie,{path:":environmentId/edit",element:c.jsx(m4,{})})]}),c.jsxs(Ie,{path:"settings",element:c.jsx(W4,{}),children:[c.jsx(Ie,{index:!0,element:c.jsx(es,{to:"credentials",replace:!0})}),c.jsx(Ie,{path:"environments",element:c.jsx(es,{to:"/environments",replace:!0})}),c.jsx(Ie,{path:"credentials",element:c.jsx(z5,{})}),c.jsx(Ie,{path:"tokens",element:c.jsx(es,{to:"../credentials",replace:!0})}),c.jsx(Ie,{path:"personas",element:c.jsx(dI,{})}),c.jsx(Ie,{path:"appearance",element:c.jsx(hI,{})}),c.jsx(Ie,{path:"about",element:c.jsx(mI,{})})]}),c.jsx(Ie,{path:"*",element:c.jsx(es,{to:"/",replace:!0})})]})]})}const KI=1e4;function ZI(){const{onboardingCompleted:n}=ut(),[a,i]=_.useState(!1);_.useEffect(()=>{if(n!==void 0)return;const r=setTimeout(()=>i(!0),KI);return()=>clearTimeout(r)},[n]);const o=n===void 0&&!a;return c.jsx(Wn,{mode:"wait",children:o?c.jsx(Nt.div,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.25},children:c.jsx(HM,{})},"splash"):c.jsx(Nt.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.25},style:{minHeight:"100vh"},children:c.jsx(jC,{children:c.jsx(YI,{})})},"app")})}function XI(){const n=$I?mk:lk;return c.jsx(_k,{children:c.jsx(vk,{children:c.jsx(n,{children:c.jsx(ZI,{})})})})}qS.createRoot(document.getElementById("root")).render(c.jsx(_.StrictMode,{children:c.jsx(XI,{})}));
+$\`Summarize the current tasks.\`;`,rows:20,className:Fe.scriptEditor,required:!0,"data-testid":"persona-script-editor"})]})]}),c.jsxs("div",{className:Fe.formActions,children:[c.jsx("button",{type:"submit",className:Fe.btnPrimary,children:u?"Save":"Create"}),c.jsx("button",{type:"button",onClick:ne,className:Fe.btnSecondary,children:"Cancel"})]})]});return c.jsxs("div",{className:Fe.container,children:[c.jsxs("div",{className:Fe.header,children:[c.jsx("h2",{children:"Personas"}),c.jsx("button",{onClick:re,className:Fe.btnPrimary,children:"+ New Persona"})]}),(m||u)&&oe(),n.length===0&&!m?c.jsx("p",{className:Fe.empty,children:"No personas yet. Create one to get started."}):c.jsx("div",{className:Fe.list,children:n.map(z=>{const J=r===z.id,Se=z.type==="script";return c.jsxs("div",{className:`${Fe.card} ${(u==null?void 0:u.id)===z.id?Fe.active:""}`,"data-testid":`persona-card-${z.id}`,children:[c.jsxs("div",{className:Fe.cardHeader,children:[c.jsxs("span",{className:Fe.cardTitle,children:[c.jsx("strong",{children:z.name}),c.jsx("span",{className:Fe.typeBadge,"data-testid":`persona-type-badge-${z.id}`,children:Se?"Script":"Agent"}),J&&c.jsx("span",{className:Fe.defaultBadge,"data-testid":`persona-default-badge-${z.id}`,children:"App Default"})]}),c.jsxs("div",{className:Fe.cardActions,children:[!J&&c.jsx("button",{onClick:()=>f(z.id),className:Fe.btnSmall,"data-testid":`persona-set-default-${z.id}`,title:"Set as app default persona",children:"Set Default"}),c.jsx("button",{onClick:()=>Q(z),className:Fe.btnSmall,children:"Edit"}),y===z.id?c.jsxs(c.Fragment,{children:[c.jsx("button",{onClick:()=>D(z.id),className:Fe.btnDanger,children:"Confirm"}),c.jsx("button",{onClick:()=>v(null),className:Fe.btnSmall,children:"Cancel"})]}):c.jsx("button",{onClick:()=>v(z.id),className:Fe.btnSmall,children:"Delete"})]})]}),z.description&&c.jsx("p",{className:Fe.description,children:z.description}),c.jsxs("div",{className:Fe.meta,children:[z.runtime&&c.jsxs("span",{children:["Runtime: ",z.runtime]}),z.model&&c.jsxs("span",{children:["Model: ",z.model]}),z.maxTurns>0&&c.jsxs("span",{children:["Max turns: ",z.maxTurns]})]}),Se?c.jsxs("details",{className:Fe.promptDetails,children:[c.jsx("summary",{children:"Script"}),c.jsx("pre",{className:Fe.promptText,children:z.script})]}):c.jsxs("details",{className:Fe.promptDetails,children:[c.jsx("summary",{children:"System Prompt"}),c.jsx("pre",{className:Fe.promptText,children:z.systemPrompt})]})]},z.id)})})]})}function dI(){return c.jsx(uI,{})}function fI(){const{themeId:n,resolvedThemeId:a,setTheme:i,preferSystem:o,setPreferSystem:r}=bb();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:vc.filter(f=>!f.hidden).map(f=>{const u=!!(f.variantLightId&&f.variantDarkId),p=u?n===f.id||n===f.variantLightId||n===f.variantDarkId:n===f.id,m=u&&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})]}),u&&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:o,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 hI(){return c.jsx(fI,{})}function pI(){const{connected:n,environments:a,sessions:i}=ut(),o=a.filter(u=>u.status==="connected").length,r=a.length,f=i.filter(u=>["running","idle"].includes(u.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:[o,"/",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.57.1"})]})]})]})}function mI(){return c.jsx(pI,{})}const gI="_wizard_1260s_1",vI="_container_1260s_10",yI="_stepContent_1260s_19",bI="_logoArea_1260s_28",xI="_logoImage_1260s_32",_I="_heading_1260s_41",SI="_tagline_1260s_49",TI="_subtitle_1260s_56",CI="_featureList_1260s_64",kI="_runtimeGrid_1260s_89",EI="_runtimeCard_1260s_101",NI="_runtimeName_1260s_133",AI="_runtimeDescription_1260s_139",jI="_buttonRow_1260s_144",wI="_primaryButton_1260s_151",DI="_ghostButton_1260s_185",MI="_dots_1260s_213",RI="_dot_1260s_213",st={wizard:gI,container:vI,stepContent:yI,logoArea:bI,logoImage:xI,heading:_I,tagline:SI,subtitle:TI,featureList:CI,runtimeGrid:kI,runtimeCard:EI,runtimeName:NI,runtimeDescription:AI,buttonRow:jI,primaryButton:wI,ghostButton:DI,dots:MI,dot:RI};function OI({onNext:n}){return c.jsxs("div",{className:st.stepContent,"data-testid":"setup-welcome",children:[c.jsx("div",{className:st.logoArea,children:c.jsx("img",{src:"/grackle-logo.png",alt:"Grackle",className:st.logoImage})}),c.jsx("h1",{className:st.heading,children:"Welcome to Grackle"}),c.jsx("p",{className:st.tagline,children:"Multi-agent orchestration for software teams"}),c.jsx("button",{type:"button",className:st.primaryButton,onClick:n,"data-testid":"setup-get-started",children:"Get Started"})]})}function BI({onNext:n,onBack:a}){return c.jsxs("div",{className:st.stepContent,"data-testid":"setup-about",children:[c.jsx("h2",{className:st.heading,children:"What is Grackle?"}),c.jsxs("ul",{className:st.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:st.buttonRow,children:[c.jsx("button",{type:"button",className:st.ghostButton,onClick:a,children:"Back"}),c.jsx("button",{type:"button",className:st.primaryButton,onClick:n,"data-testid":"setup-about-next",children:"Next"})]})]})}const II=[{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 LI({currentRuntime:n,onFinish:a,onBack:i,finishDisabled:o}){const[r,f]=_.useState(n||"claude-code");return _.useEffect(()=>{n&&f(n)},[n]),c.jsxs("div",{className:st.stepContent,"data-testid":"setup-runtime",children:[c.jsx("h2",{className:st.heading,children:"Choose Your Runtime"}),c.jsx("p",{className:st.subtitle,children:"Select the primary agent runtime for your workspace. You can change this later."}),c.jsx("div",{className:st.runtimeGrid,children:II.map(u=>c.jsxs("button",{type:"button",className:st.runtimeCard,"data-selected":r===u.id,"aria-pressed":r===u.id,"data-testid":`runtime-card-${u.id}`,onClick:()=>f(u.id),children:[c.jsx("span",{className:st.runtimeName,children:u.name}),c.jsx("span",{className:st.runtimeDescription,children:u.description})]},u.id))}),c.jsxs("div",{className:st.buttonRow,children:[c.jsx("button",{type:"button",className:st.ghostButton,onClick:i,children:"Back"}),c.jsx("button",{type:"button",className:st.primaryButton,onClick:()=>a(r),disabled:o,"data-testid":"setup-finish",children:"Finish"})]})]})}const UI=3,$0={"claude-code":"sonnet",copilot:"gpt-4o",codex:"o3"};function zI(){const{personas:n,updatePersona:a,completeOnboarding:i,onboardingCompleted:o}=ut(),r=$t(),[f,u]=_.useState(0),p=n.find(g=>g.id==="claude-code"),m=_.useCallback(g=>{if(p&&g!==p.runtime){const v=$0[g]??"sonnet";a(p.id,void 0,void 0,void 0,g,v)}const y=n.find(v=>v.id===k0);if(y&&g!==y.runtime){const v=$0[g]??"sonnet";a(k0,void 0,void 0,void 0,g,v)}i(),r("/",{replace:!0})},[p,n,a,i,r]);return o===!0?c.jsx(es,{to:"/",replace:!0}):c.jsx("div",{className:st.wizard,"data-testid":"setup-wizard",children:c.jsxs("div",{className:st.container,children:[c.jsx(Wn,{mode:"wait",children:c.jsxs(Nt.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(OI,{onNext:()=>u(1)}),f===1&&c.jsx(BI,{onNext:()=>u(2),onBack:()=>u(0)}),f===2&&c.jsx(LI,{currentRuntime:(p==null?void 0:p.runtime)??"claude-code",onFinish:m,onBack:()=>u(1),finishDisabled:!p})]},f)}),c.jsx("div",{className:st.dots,children:Array.from({length:UI},(g,y)=>c.jsx("span",{className:st.dot,"data-active":y===f},y))})]})})}const VI="_root_zndgp_1",HI="_body_zndgp_7",GI="_main_zndgp_19",PI="_sidebarWrapper_zndgp_26",FI="_overlay_zndgp_51",$l={root:VI,body:HI,main:GI,sidebarWrapper:PI,overlay:FI},$I=typeof window<"u"&&new URLSearchParams(window.location.search).has("mock");function qI(){const{lastSpawnedId:n,environments:a,connected:i,onboardingCompleted:o}=ut(),{showToast:r}=Fi();GM(a,r);const f=$t(),u=Rt(),[p,m]=_.useState(!1),g=_.useCallback(()=>m(y=>!y),[]);return _.useEffect(()=>{m(!1)},[u.pathname]),_.useEffect(()=>{if(!p)return;const y=v=>{v.key==="Escape"&&m(!1)};return document.addEventListener("keydown",y),()=>{document.removeEventListener("keydown",y)}},[p]),_.useEffect(()=>{n&&!u.pathname.includes("/tasks/")&&f(db(n),{replace:!0})},[n,f,u.pathname]),i&&o===!1?c.jsx(es,{to:"/setup",replace:!0}):c.jsxs("div",{className:$l.root,children:[c.jsx(Dk,{onToggleSidebar:g,sidebarOpen:p}),c.jsx(Lk,{}),c.jsxs("div",{className:$l.body,children:[c.jsx("div",{className:$l.sidebarWrapper,"data-sidebar-open":p,children:c.jsx(tD,{})}),p&&c.jsx("div",{className:$l.overlay,"data-testid":"drawer-overlay",onClick:()=>m(!1)}),c.jsxs("div",{className:$l.main,children:[c.jsx(Jf,{}),c.jsx(mD,{})]})]}),c.jsx(AD,{})]})}function YI(){return c.jsxs(sC,{children:[c.jsx(Ie,{path:"setup",element:c.jsx(zI,{})}),c.jsxs(Ie,{element:c.jsx(qI,{}),children:[c.jsx(Ie,{index:!0,element:c.jsx(mO,{})}),c.jsx(Ie,{path:"chat",element:c.jsx(OO,{})}),c.jsx(Ie,{path:"tasks",element:c.jsx(hO,{})}),c.jsx(Ie,{path:"tasks/new",element:c.jsx(D6,{})}),c.jsx(Ie,{path:"tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"tasks/:taskId/edit",element:c.jsx(G0,{})}),c.jsx(Ie,{path:"workspaces",element:c.jsx(es,{to:"/environments",replace:!0})}),c.jsx(Ie,{path:"workspaces/:workspaceId",element:c.jsx(c6,{})}),c.jsx(Ie,{path:"workspaces/:workspaceId/tasks/:taskId",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"workspaces/:workspaceId/tasks/:taskId/stream",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"workspaces/:workspaceId/tasks/:taskId/findings",element:c.jsx(Ni,{})}),c.jsx(Ie,{path:"workspaces/:workspaceId/tasks/:taskId/edit",element:c.jsx(G0,{})}),c.jsx(Ie,{path:"sessions/new",element:c.jsx(HO,{})}),c.jsx(Ie,{path:"sessions/:sessionId",element:c.jsx(FO,{})}),c.jsxs(Ie,{path:"environments",element:c.jsx(b4,{}),children:[c.jsx(Ie,{index:!0,element:c.jsx(pO,{})}),c.jsx(Ie,{path:"new",element:c.jsx(p4,{})}),c.jsx(Ie,{path:":environmentId",element:c.jsx(Z4,{})}),c.jsx(Ie,{path:":environmentId/edit",element:c.jsx(m4,{})})]}),c.jsxs(Ie,{path:"settings",element:c.jsx(W4,{}),children:[c.jsx(Ie,{index:!0,element:c.jsx(es,{to:"credentials",replace:!0})}),c.jsx(Ie,{path:"environments",element:c.jsx(es,{to:"/environments",replace:!0})}),c.jsx(Ie,{path:"credentials",element:c.jsx(z5,{})}),c.jsx(Ie,{path:"tokens",element:c.jsx(es,{to:"../credentials",replace:!0})}),c.jsx(Ie,{path:"personas",element:c.jsx(dI,{})}),c.jsx(Ie,{path:"appearance",element:c.jsx(hI,{})}),c.jsx(Ie,{path:"about",element:c.jsx(mI,{})})]}),c.jsx(Ie,{path:"*",element:c.jsx(es,{to:"/",replace:!0})})]})]})}const KI=1e4;function ZI(){const{onboardingCompleted:n}=ut(),[a,i]=_.useState(!1);_.useEffect(()=>{if(n!==void 0)return;const r=setTimeout(()=>i(!0),KI);return()=>clearTimeout(r)},[n]);const o=n===void 0&&!a;return c.jsx(Wn,{mode:"wait",children:o?c.jsx(Nt.div,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.25},children:c.jsx(HM,{})},"splash"):c.jsx(Nt.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.25},style:{minHeight:"100vh"},children:c.jsx(jC,{children:c.jsx(YI,{})})},"app")})}function XI(){const n=$I?mk:lk;return c.jsx(_k,{children:c.jsx(vk,{children:c.jsx(n,{children:c.jsx(ZI,{})})})})}qS.createRoot(document.getElementById("root")).render(c.jsx(_.StrictMode,{children:c.jsx(XI,{})}));

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-BmoxdPk-.js"></script>
+    <script type="module" crossorigin src="/assets/index-BIXjqVsn.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-DS7Viz-9.css">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web",
-  "version": "0.57.1",
+  "version": "0.58.0",
   "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.57.1"
+    "@grackle-ai/common": "0.58.0"
   },
   "devDependencies": {
     "@rushstack/heft": "1.2.4",