@grackle-ai/web 0.52.0 → 0.52.1

package/dist/assets/{index-CNaDywfU.js → index-C0pxaDOv.js}

@@ -97,4 +97,4 @@ const grackle = await host.mcpServer({
   url: env.vars.GRACKLE_MCP_URL,
 });
 
-$\`Summarize the current tasks.\`;`,rows:20,className:Ke.scriptEditor,required:!0,"data-testid":"persona-script-editor"})]})]}),f.jsxs("div",{className:Ke.formActions,children:[f.jsx("button",{type:"submit",className:Ke.btnPrimary,children:d?"Save":"Create"}),f.jsx("button",{type:"button",onClick:K,className:Ke.btnSecondary,children:"Cancel"})]})]});return f.jsxs("div",{className:Ke.container,children:[f.jsxs("div",{className:Ke.header,children:[f.jsx("h2",{children:"Personas"}),f.jsx("button",{onClick:ie,className:Ke.btnPrimary,children:"+ New Persona"})]}),(m||d)&&de(),n.length===0&&!m?f.jsx("p",{className:Ke.empty,children:"No personas yet. Create one to get started."}):f.jsx("div",{className:Ke.list,children:n.map(Y=>{const je=r===Y.id,Re=Y.type==="script";return f.jsxs("div",{className:`${Ke.card} ${(d==null?void 0:d.id)===Y.id?Ke.active:""}`,"data-testid":`persona-card-${Y.id}`,children:[f.jsxs("div",{className:Ke.cardHeader,children:[f.jsxs("span",{className:Ke.cardTitle,children:[f.jsx("strong",{children:Y.name}),f.jsx("span",{className:Ke.typeBadge,"data-testid":`persona-type-badge-${Y.id}`,children:Re?"Script":"Agent"}),je&&f.jsx("span",{className:Ke.defaultBadge,"data-testid":`persona-default-badge-${Y.id}`,children:"App Default"})]}),f.jsxs("div",{className:Ke.cardActions,children:[!je&&f.jsx("button",{onClick:()=>c(Y.id),className:Ke.btnSmall,"data-testid":`persona-set-default-${Y.id}`,title:"Set as app default persona",children:"Set Default"}),f.jsx("button",{onClick:()=>he(Y),className:Ke.btnSmall,children:"Edit"}),y===Y.id?f.jsxs(f.Fragment,{children:[f.jsx("button",{onClick:()=>Z(Y.id),className:Ke.btnDanger,children:"Confirm"}),f.jsx("button",{onClick:()=>v(null),className:Ke.btnSmall,children:"Cancel"})]}):f.jsx("button",{onClick:()=>v(Y.id),className:Ke.btnSmall,children:"Delete"})]})]}),Y.description&&f.jsx("p",{className:Ke.description,children:Y.description}),f.jsxs("div",{className:Ke.meta,children:[Y.runtime&&f.jsxs("span",{children:["Runtime: ",Y.runtime]}),Y.model&&f.jsxs("span",{children:["Model: ",Y.model]}),Y.maxTurns>0&&f.jsxs("span",{children:["Max turns: ",Y.maxTurns]})]}),Re?f.jsxs("details",{className:Ke.promptDetails,children:[f.jsx("summary",{children:"Script"}),f.jsx("pre",{className:Ke.promptText,children:Y.script})]}):f.jsxs("details",{className:Ke.promptDetails,children:[f.jsx("summary",{children:"System Prompt"}),f.jsx("pre",{className:Ke.promptText,children:Y.systemPrompt})]})]},Y.id)})})]})}function I4(){return f.jsx(L4,{})}function U4(){const{themeId:n,resolvedThemeId:a,setTheme:i,preferSystem:l,setPreferSystem:r}=hb();return f.jsxs("section",{className:ce.section,children:[f.jsx("h3",{className:ce.sectionTitle,children:"Appearance"}),f.jsx("p",{className:ce.sectionDescription,children:"Choose how Grackle looks across the app."}),f.jsx("div",{className:ce.themeOptions,children:dc.filter(c=>!c.hidden).map(c=>{const d=!!(c.variantLightId&&c.variantDarkId),p=d?n===c.id||n===c.variantLightId||n===c.variantDarkId:n===c.id,m=d&&a===c.variantLightId;return f.jsxs("button",{type:"button",className:`${ce.themeOption} ${p?ce.themeOptionSelected:""}`,"aria-pressed":p,onClick:()=>i(c.id),children:[f.jsxs("span",{className:ce.themeOptionHeader,children:[f.jsxs("span",{children:[f.jsx("span",{className:ce.themeOptionLabel,children:c.label}),f.jsx("span",{className:ce.themeOptionDesc,children:c.description})]}),d&&f.jsxs("span",{className:ce.variantToggle,children:[f.jsx("span",{role:"button",tabIndex:0,className:`${ce.variantButton} ${p&&m?ce.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(c.variantLightId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(c.variantLightId))},"aria-label":"Light variant","aria-pressed":p&&m,children:"☼"}),f.jsx("span",{role:"button",tabIndex:0,className:`${ce.variantButton} ${p&&!m?ce.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(c.variantDarkId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(c.variantDarkId))},"aria-label":"Dark variant","aria-pressed":p&&!m,children:"☾"})]})]}),c.swatches&&f.jsx("span",{className:ce.themeSwatches,children:c.swatches.map((g,y)=>f.jsx("span",{className:ce.themeSwatch,style:{background:g}},y))})]},c.id)})}),f.jsxs("label",{className:ce.systemToggle,children:[f.jsx("input",{type:"checkbox",checked:l,onChange:c=>r(c.target.checked)}),f.jsx("span",{children:"Match system light/dark preference"})]}),f.jsx("p",{className:ce.systemToggleHint,children:"Automatically switches between light and dark variants when available."}),f.jsxs("p",{className:ce.themeActive,children:["Active theme: ",f.jsx("strong",{children:a})]})]})}function z4(){return f.jsx(U4,{})}function V4(){const{connected:n,environments:a,sessions:i}=Rt(),l=a.filter(d=>d.status==="connected").length,r=a.length,c=i.filter(d=>["running","idle"].includes(d.status)).length;return f.jsxs("section",{className:ce.section,"data-testid":"about-panel",children:[f.jsx("h3",{className:ce.sectionTitle,children:"About"}),f.jsx("p",{className:ce.sectionDescription,children:"Connection status and application information."}),f.jsxs("div",{className:ce.aboutGrid,children:[f.jsxs("div",{className:ce.aboutItem,children:[f.jsx("span",{className:ce.aboutLabel,children:"Connection"}),f.jsxs("span",{className:ce.aboutValue,children:[f.jsx("span",{className:`${ce.aboutDot} ${n?ce.aboutDotConnected:ce.aboutDotDisconnected}`}),n?"Connected":"Disconnected"]})]}),f.jsxs("div",{className:ce.aboutItem,children:[f.jsx("span",{className:ce.aboutLabel,children:"Environments"}),f.jsxs("span",{className:ce.aboutValue,children:[l,"/",r," connected"]})]}),f.jsxs("div",{className:ce.aboutItem,children:[f.jsx("span",{className:ce.aboutLabel,children:"Active Sessions"}),f.jsx("span",{className:ce.aboutValue,children:c})]}),f.jsxs("div",{className:ce.aboutItem,children:[f.jsx("span",{className:ce.aboutLabel,children:"Version"}),f.jsx("span",{className:ce.aboutValue,children:"0.51.0"})]})]})]})}function H4(){return f.jsx(V4,{})}const G4="_wizard_1260s_1",P4="_container_1260s_10",$4="_stepContent_1260s_19",F4="_logoArea_1260s_28",Y4="_logoImage_1260s_32",q4="_heading_1260s_41",K4="_tagline_1260s_49",Z4="_subtitle_1260s_56",X4="_featureList_1260s_64",Q4="_runtimeGrid_1260s_89",W4="_runtimeCard_1260s_101",J4="_runtimeName_1260s_133",e8="_runtimeDescription_1260s_139",t8="_buttonRow_1260s_144",n8="_primaryButton_1260s_151",a8="_ghostButton_1260s_185",s8="_dots_1260s_213",i8="_dot_1260s_213",ut={wizard:G4,container:P4,stepContent:$4,logoArea:F4,logoImage:Y4,heading:q4,tagline:K4,subtitle:Z4,featureList:X4,runtimeGrid:Q4,runtimeCard:W4,runtimeName:J4,runtimeDescription:e8,buttonRow:t8,primaryButton:n8,ghostButton:a8,dots:s8,dot:i8};function o8({onNext:n}){return f.jsxs("div",{className:ut.stepContent,"data-testid":"setup-welcome",children:[f.jsx("div",{className:ut.logoArea,children:f.jsx("img",{src:"/grackle-logo.png",alt:"Grackle",className:ut.logoImage})}),f.jsx("h1",{className:ut.heading,children:"Welcome to Grackle"}),f.jsx("p",{className:ut.tagline,children:"Multi-agent orchestration for software teams"}),f.jsx("button",{type:"button",className:ut.primaryButton,onClick:n,"data-testid":"setup-get-started",children:"Get Started"})]})}function l8({onNext:n,onBack:a}){return f.jsxs("div",{className:ut.stepContent,"data-testid":"setup-about",children:[f.jsx("h2",{className:ut.heading,children:"What is Grackle?"}),f.jsxs("ul",{className:ut.featureList,children:[f.jsx("li",{children:"Run Claude, Copilot, and Codex agents side by side"}),f.jsx("li",{children:"Provision and control dev environments — SSH, Codespaces, or local"}),f.jsx("li",{children:"Organize work into workspaces with agent-executable tasks"}),f.jsx("li",{children:"Customize agent behavior with personas, tools, and MCP servers"}),f.jsx("li",{children:"Live-stream agent sessions with full terminal replay"})]}),f.jsxs("div",{className:ut.buttonRow,children:[f.jsx("button",{type:"button",className:ut.ghostButton,onClick:a,children:"Back"}),f.jsx("button",{type:"button",className:ut.primaryButton,onClick:n,"data-testid":"setup-about-next",children:"Next"})]})]})}const r8=[{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 c8({currentRuntime:n,onFinish:a,onBack:i,finishDisabled:l}){const[r,c]=x.useState(n||"claude-code");return x.useEffect(()=>{n&&c(n)},[n]),f.jsxs("div",{className:ut.stepContent,"data-testid":"setup-runtime",children:[f.jsx("h2",{className:ut.heading,children:"Choose Your Runtime"}),f.jsx("p",{className:ut.subtitle,children:"Select the primary agent runtime for your workspace. You can change this later."}),f.jsx("div",{className:ut.runtimeGrid,children:r8.map(d=>f.jsxs("button",{type:"button",className:ut.runtimeCard,"data-selected":r===d.id,"aria-pressed":r===d.id,"data-testid":`runtime-card-${d.id}`,onClick:()=>c(d.id),children:[f.jsx("span",{className:ut.runtimeName,children:d.name}),f.jsx("span",{className:ut.runtimeDescription,children:d.description})]},d.id))}),f.jsxs("div",{className:ut.buttonRow,children:[f.jsx("button",{type:"button",className:ut.ghostButton,onClick:i,children:"Back"}),f.jsx("button",{type:"button",className:ut.primaryButton,onClick:()=>a(r),disabled:l,"data-testid":"setup-finish",children:"Finish"})]})]})}const u8=3,V0={"claude-code":"sonnet",copilot:"gpt-4o",codex:"o3"};function d8(){const{personas:n,updatePersona:a,completeOnboarding:i,onboardingCompleted:l}=Rt(),r=hn(),[c,d]=x.useState(0),p=n.find(g=>g.id==="claude-code"),m=x.useCallback(g=>{if(p&&g!==p.runtime){const v=V0[g]??"sonnet";a(p.id,void 0,void 0,void 0,g,v)}const y=n.find(v=>v.id===b0);if(y&&g!==y.runtime){const v=V0[g]??"sonnet";a(b0,void 0,void 0,void 0,g,v)}i(),r("/",{replace:!0})},[p,n,a,i,r]);return l===!0?f.jsx(Li,{to:"/",replace:!0}):f.jsx("div",{className:ut.wizard,"data-testid":"setup-wizard",children:f.jsxs("div",{className:ut.container,children:[f.jsx(Vn,{mode:"wait",children:f.jsxs(Et.div,{initial:{opacity:0,x:40},animate:{opacity:1,x:0},exit:{opacity:0,x:-40},transition:{duration:.2,ease:"easeInOut"},children:[c===0&&f.jsx(o8,{onNext:()=>d(1)}),c===1&&f.jsx(l8,{onNext:()=>d(2),onBack:()=>d(0)}),c===2&&f.jsx(c8,{currentRuntime:(p==null?void 0:p.runtime)??"claude-code",onFinish:m,onBack:()=>d(1),finishDisabled:!p})]},c)}),f.jsx("div",{className:ut.dots,children:Array.from({length:u8},(g,y)=>f.jsx("span",{className:ut.dot,"data-active":y===c},y))})]})})}const f8="_root_h353j_1",h8="_body_h353j_7",p8="_main_h353j_19",m8="_sidebarWrapper_h353j_26",g8="_overlay_h353j_56",Fo={root:f8,body:h8,main:p8,sidebarWrapper:m8,overlay:g8},v8=typeof window<"u"&&new URLSearchParams(window.location.search).has("mock");function y8(){const{lastSpawnedId:n,environments:a,connected:i,onboardingCompleted:l}=Rt(),{showToast:r}=hl();wM(a,r);const c=hn(),d=en(),p=d.pathname.startsWith(Is),[m,g]=x.useState(!1),y=x.useCallback(()=>g(v=>!v),[]);return x.useEffect(()=>{g(!1)},[d.pathname]),x.useEffect(()=>{if(!m)return;const v=_=>{_.key==="Escape"&&g(!1)};return document.addEventListener("keydown",v),()=>{document.removeEventListener("keydown",v)}},[m]),x.useEffect(()=>{n&&!d.pathname.startsWith("/tasks/")&&c(Xf(n),{replace:!0})},[n,c,d.pathname]),i&&l===!1?f.jsx(Li,{to:"/setup",replace:!0}):f.jsxs("div",{className:Fo.root,children:[f.jsx(vE,{onToggleSidebar:p?void 0:y,sidebarOpen:m}),f.jsxs("div",{className:Fo.body,children:[f.jsx("div",{className:Fo.sidebarWrapper,"data-sidebar-open":m,"data-settings":p,children:p?f.jsx(H6,{}):f.jsx(KD,{})}),m&&!p&&f.jsx("div",{className:Fo.overlay,"data-testid":"drawer-overlay",onClick:()=>g(!1)}),f.jsxs("div",{className:Fo.main,children:[f.jsx(tb,{}),f.jsx(hM,{})]})]}),f.jsx(kM,{})]})}function b8(){return f.jsxs(OT,{children:[f.jsx(gt,{path:"setup",element:f.jsx(d8,{})}),f.jsxs(gt,{element:f.jsx(y8,{}),children:[f.jsx(gt,{index:!0,element:f.jsx(R0,{})}),f.jsx(gt,{path:"chat",element:f.jsx(j3,{})}),f.jsx(gt,{path:"sessions/new",element:f.jsx(TB,{})}),f.jsx(gt,{path:"sessions/:sessionId",element:f.jsx(kB,{})}),f.jsx(gt,{path:"workspaces",element:f.jsx(R0,{})}),f.jsx(gt,{path:"workspaces/:workspaceId",element:f.jsx(FO,{})}),f.jsx(gt,{path:"tasks/new",element:f.jsx(h6,{})}),f.jsx(gt,{path:"tasks/:taskId",element:f.jsx(lf,{})}),f.jsx(gt,{path:"tasks/:taskId/stream",element:f.jsx(lf,{})}),f.jsx(gt,{path:"tasks/:taskId/findings",element:f.jsx(lf,{})}),f.jsx(gt,{path:"tasks/:taskId/edit",element:f.jsx(p6,{})}),f.jsx(gt,{path:"environments/new",element:f.jsx(D6,{})}),f.jsxs(gt,{path:"settings",element:f.jsx(L6,{}),children:[f.jsx(gt,{index:!0,element:f.jsx(Li,{to:"environments",replace:!0})}),f.jsx(gt,{path:"environments",element:f.jsx(C5,{})}),f.jsx(gt,{path:"credentials",element:f.jsx(d4,{})}),f.jsx(gt,{path:"tokens",element:f.jsx(Li,{to:"../credentials",replace:!0})}),f.jsx(gt,{path:"personas",element:f.jsx(I4,{})}),f.jsx(gt,{path:"appearance",element:f.jsx(z4,{})}),f.jsx(gt,{path:"about",element:f.jsx(H4,{})})]}),f.jsx(gt,{path:"*",element:f.jsx(Li,{to:"/",replace:!0})})]})]})}const x8=1e4;function _8(){const{onboardingCompleted:n}=Rt(),[a,i]=x.useState(!1);x.useEffect(()=>{if(n!==void 0)return;const r=setTimeout(()=>i(!0),x8);return()=>clearTimeout(r)},[n]);const l=n===void 0&&!a;return f.jsx(Vn,{mode:"wait",children:l?f.jsx(Et.div,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.25},children:f.jsx(Gj,{})},"splash"):f.jsx(Et.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.25},style:{minHeight:"100vh"},children:f.jsx(oC,{children:f.jsx(b8,{})})},"app")})}function S8(){const n=v8?tE:YC;return f.jsx(lE,{children:f.jsx(aE,{children:f.jsx(n,{children:f.jsx(_8,{})})})})}I1.createRoot(document.getElementById("root")).render(f.jsx(x.StrictMode,{children:f.jsx(S8,{})}));
+$\`Summarize the current tasks.\`;`,rows:20,className:Ke.scriptEditor,required:!0,"data-testid":"persona-script-editor"})]})]}),f.jsxs("div",{className:Ke.formActions,children:[f.jsx("button",{type:"submit",className:Ke.btnPrimary,children:d?"Save":"Create"}),f.jsx("button",{type:"button",onClick:K,className:Ke.btnSecondary,children:"Cancel"})]})]});return f.jsxs("div",{className:Ke.container,children:[f.jsxs("div",{className:Ke.header,children:[f.jsx("h2",{children:"Personas"}),f.jsx("button",{onClick:ie,className:Ke.btnPrimary,children:"+ New Persona"})]}),(m||d)&&de(),n.length===0&&!m?f.jsx("p",{className:Ke.empty,children:"No personas yet. Create one to get started."}):f.jsx("div",{className:Ke.list,children:n.map(Y=>{const je=r===Y.id,Re=Y.type==="script";return f.jsxs("div",{className:`${Ke.card} ${(d==null?void 0:d.id)===Y.id?Ke.active:""}`,"data-testid":`persona-card-${Y.id}`,children:[f.jsxs("div",{className:Ke.cardHeader,children:[f.jsxs("span",{className:Ke.cardTitle,children:[f.jsx("strong",{children:Y.name}),f.jsx("span",{className:Ke.typeBadge,"data-testid":`persona-type-badge-${Y.id}`,children:Re?"Script":"Agent"}),je&&f.jsx("span",{className:Ke.defaultBadge,"data-testid":`persona-default-badge-${Y.id}`,children:"App Default"})]}),f.jsxs("div",{className:Ke.cardActions,children:[!je&&f.jsx("button",{onClick:()=>c(Y.id),className:Ke.btnSmall,"data-testid":`persona-set-default-${Y.id}`,title:"Set as app default persona",children:"Set Default"}),f.jsx("button",{onClick:()=>he(Y),className:Ke.btnSmall,children:"Edit"}),y===Y.id?f.jsxs(f.Fragment,{children:[f.jsx("button",{onClick:()=>Z(Y.id),className:Ke.btnDanger,children:"Confirm"}),f.jsx("button",{onClick:()=>v(null),className:Ke.btnSmall,children:"Cancel"})]}):f.jsx("button",{onClick:()=>v(Y.id),className:Ke.btnSmall,children:"Delete"})]})]}),Y.description&&f.jsx("p",{className:Ke.description,children:Y.description}),f.jsxs("div",{className:Ke.meta,children:[Y.runtime&&f.jsxs("span",{children:["Runtime: ",Y.runtime]}),Y.model&&f.jsxs("span",{children:["Model: ",Y.model]}),Y.maxTurns>0&&f.jsxs("span",{children:["Max turns: ",Y.maxTurns]})]}),Re?f.jsxs("details",{className:Ke.promptDetails,children:[f.jsx("summary",{children:"Script"}),f.jsx("pre",{className:Ke.promptText,children:Y.script})]}):f.jsxs("details",{className:Ke.promptDetails,children:[f.jsx("summary",{children:"System Prompt"}),f.jsx("pre",{className:Ke.promptText,children:Y.systemPrompt})]})]},Y.id)})})]})}function I4(){return f.jsx(L4,{})}function U4(){const{themeId:n,resolvedThemeId:a,setTheme:i,preferSystem:l,setPreferSystem:r}=hb();return f.jsxs("section",{className:ce.section,children:[f.jsx("h3",{className:ce.sectionTitle,children:"Appearance"}),f.jsx("p",{className:ce.sectionDescription,children:"Choose how Grackle looks across the app."}),f.jsx("div",{className:ce.themeOptions,children:dc.filter(c=>!c.hidden).map(c=>{const d=!!(c.variantLightId&&c.variantDarkId),p=d?n===c.id||n===c.variantLightId||n===c.variantDarkId:n===c.id,m=d&&a===c.variantLightId;return f.jsxs("button",{type:"button",className:`${ce.themeOption} ${p?ce.themeOptionSelected:""}`,"aria-pressed":p,onClick:()=>i(c.id),children:[f.jsxs("span",{className:ce.themeOptionHeader,children:[f.jsxs("span",{children:[f.jsx("span",{className:ce.themeOptionLabel,children:c.label}),f.jsx("span",{className:ce.themeOptionDesc,children:c.description})]}),d&&f.jsxs("span",{className:ce.variantToggle,children:[f.jsx("span",{role:"button",tabIndex:0,className:`${ce.variantButton} ${p&&m?ce.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(c.variantLightId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(c.variantLightId))},"aria-label":"Light variant","aria-pressed":p&&m,children:"☼"}),f.jsx("span",{role:"button",tabIndex:0,className:`${ce.variantButton} ${p&&!m?ce.variantActive:""}`,onClick:g=>{g.stopPropagation(),r(!1),i(c.variantDarkId)},onKeyDown:g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),g.stopPropagation(),r(!1),i(c.variantDarkId))},"aria-label":"Dark variant","aria-pressed":p&&!m,children:"☾"})]})]}),c.swatches&&f.jsx("span",{className:ce.themeSwatches,children:c.swatches.map((g,y)=>f.jsx("span",{className:ce.themeSwatch,style:{background:g}},y))})]},c.id)})}),f.jsxs("label",{className:ce.systemToggle,children:[f.jsx("input",{type:"checkbox",checked:l,onChange:c=>r(c.target.checked)}),f.jsx("span",{children:"Match system light/dark preference"})]}),f.jsx("p",{className:ce.systemToggleHint,children:"Automatically switches between light and dark variants when available."}),f.jsxs("p",{className:ce.themeActive,children:["Active theme: ",f.jsx("strong",{children:a})]})]})}function z4(){return f.jsx(U4,{})}function V4(){const{connected:n,environments:a,sessions:i}=Rt(),l=a.filter(d=>d.status==="connected").length,r=a.length,c=i.filter(d=>["running","idle"].includes(d.status)).length;return f.jsxs("section",{className:ce.section,"data-testid":"about-panel",children:[f.jsx("h3",{className:ce.sectionTitle,children:"About"}),f.jsx("p",{className:ce.sectionDescription,children:"Connection status and application information."}),f.jsxs("div",{className:ce.aboutGrid,children:[f.jsxs("div",{className:ce.aboutItem,children:[f.jsx("span",{className:ce.aboutLabel,children:"Connection"}),f.jsxs("span",{className:ce.aboutValue,children:[f.jsx("span",{className:`${ce.aboutDot} ${n?ce.aboutDotConnected:ce.aboutDotDisconnected}`}),n?"Connected":"Disconnected"]})]}),f.jsxs("div",{className:ce.aboutItem,children:[f.jsx("span",{className:ce.aboutLabel,children:"Environments"}),f.jsxs("span",{className:ce.aboutValue,children:[l,"/",r," connected"]})]}),f.jsxs("div",{className:ce.aboutItem,children:[f.jsx("span",{className:ce.aboutLabel,children:"Active Sessions"}),f.jsx("span",{className:ce.aboutValue,children:c})]}),f.jsxs("div",{className:ce.aboutItem,children:[f.jsx("span",{className:ce.aboutLabel,children:"Version"}),f.jsx("span",{className:ce.aboutValue,children:"0.52.0"})]})]})]})}function H4(){return f.jsx(V4,{})}const G4="_wizard_1260s_1",P4="_container_1260s_10",$4="_stepContent_1260s_19",F4="_logoArea_1260s_28",Y4="_logoImage_1260s_32",q4="_heading_1260s_41",K4="_tagline_1260s_49",Z4="_subtitle_1260s_56",X4="_featureList_1260s_64",Q4="_runtimeGrid_1260s_89",W4="_runtimeCard_1260s_101",J4="_runtimeName_1260s_133",e8="_runtimeDescription_1260s_139",t8="_buttonRow_1260s_144",n8="_primaryButton_1260s_151",a8="_ghostButton_1260s_185",s8="_dots_1260s_213",i8="_dot_1260s_213",ut={wizard:G4,container:P4,stepContent:$4,logoArea:F4,logoImage:Y4,heading:q4,tagline:K4,subtitle:Z4,featureList:X4,runtimeGrid:Q4,runtimeCard:W4,runtimeName:J4,runtimeDescription:e8,buttonRow:t8,primaryButton:n8,ghostButton:a8,dots:s8,dot:i8};function o8({onNext:n}){return f.jsxs("div",{className:ut.stepContent,"data-testid":"setup-welcome",children:[f.jsx("div",{className:ut.logoArea,children:f.jsx("img",{src:"/grackle-logo.png",alt:"Grackle",className:ut.logoImage})}),f.jsx("h1",{className:ut.heading,children:"Welcome to Grackle"}),f.jsx("p",{className:ut.tagline,children:"Multi-agent orchestration for software teams"}),f.jsx("button",{type:"button",className:ut.primaryButton,onClick:n,"data-testid":"setup-get-started",children:"Get Started"})]})}function l8({onNext:n,onBack:a}){return f.jsxs("div",{className:ut.stepContent,"data-testid":"setup-about",children:[f.jsx("h2",{className:ut.heading,children:"What is Grackle?"}),f.jsxs("ul",{className:ut.featureList,children:[f.jsx("li",{children:"Run Claude, Copilot, and Codex agents side by side"}),f.jsx("li",{children:"Provision and control dev environments — SSH, Codespaces, or local"}),f.jsx("li",{children:"Organize work into workspaces with agent-executable tasks"}),f.jsx("li",{children:"Customize agent behavior with personas, tools, and MCP servers"}),f.jsx("li",{children:"Live-stream agent sessions with full terminal replay"})]}),f.jsxs("div",{className:ut.buttonRow,children:[f.jsx("button",{type:"button",className:ut.ghostButton,onClick:a,children:"Back"}),f.jsx("button",{type:"button",className:ut.primaryButton,onClick:n,"data-testid":"setup-about-next",children:"Next"})]})]})}const r8=[{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 c8({currentRuntime:n,onFinish:a,onBack:i,finishDisabled:l}){const[r,c]=x.useState(n||"claude-code");return x.useEffect(()=>{n&&c(n)},[n]),f.jsxs("div",{className:ut.stepContent,"data-testid":"setup-runtime",children:[f.jsx("h2",{className:ut.heading,children:"Choose Your Runtime"}),f.jsx("p",{className:ut.subtitle,children:"Select the primary agent runtime for your workspace. You can change this later."}),f.jsx("div",{className:ut.runtimeGrid,children:r8.map(d=>f.jsxs("button",{type:"button",className:ut.runtimeCard,"data-selected":r===d.id,"aria-pressed":r===d.id,"data-testid":`runtime-card-${d.id}`,onClick:()=>c(d.id),children:[f.jsx("span",{className:ut.runtimeName,children:d.name}),f.jsx("span",{className:ut.runtimeDescription,children:d.description})]},d.id))}),f.jsxs("div",{className:ut.buttonRow,children:[f.jsx("button",{type:"button",className:ut.ghostButton,onClick:i,children:"Back"}),f.jsx("button",{type:"button",className:ut.primaryButton,onClick:()=>a(r),disabled:l,"data-testid":"setup-finish",children:"Finish"})]})]})}const u8=3,V0={"claude-code":"sonnet",copilot:"gpt-4o",codex:"o3"};function d8(){const{personas:n,updatePersona:a,completeOnboarding:i,onboardingCompleted:l}=Rt(),r=hn(),[c,d]=x.useState(0),p=n.find(g=>g.id==="claude-code"),m=x.useCallback(g=>{if(p&&g!==p.runtime){const v=V0[g]??"sonnet";a(p.id,void 0,void 0,void 0,g,v)}const y=n.find(v=>v.id===b0);if(y&&g!==y.runtime){const v=V0[g]??"sonnet";a(b0,void 0,void 0,void 0,g,v)}i(),r("/",{replace:!0})},[p,n,a,i,r]);return l===!0?f.jsx(Li,{to:"/",replace:!0}):f.jsx("div",{className:ut.wizard,"data-testid":"setup-wizard",children:f.jsxs("div",{className:ut.container,children:[f.jsx(Vn,{mode:"wait",children:f.jsxs(Et.div,{initial:{opacity:0,x:40},animate:{opacity:1,x:0},exit:{opacity:0,x:-40},transition:{duration:.2,ease:"easeInOut"},children:[c===0&&f.jsx(o8,{onNext:()=>d(1)}),c===1&&f.jsx(l8,{onNext:()=>d(2),onBack:()=>d(0)}),c===2&&f.jsx(c8,{currentRuntime:(p==null?void 0:p.runtime)??"claude-code",onFinish:m,onBack:()=>d(1),finishDisabled:!p})]},c)}),f.jsx("div",{className:ut.dots,children:Array.from({length:u8},(g,y)=>f.jsx("span",{className:ut.dot,"data-active":y===c},y))})]})})}const f8="_root_h353j_1",h8="_body_h353j_7",p8="_main_h353j_19",m8="_sidebarWrapper_h353j_26",g8="_overlay_h353j_56",Fo={root:f8,body:h8,main:p8,sidebarWrapper:m8,overlay:g8},v8=typeof window<"u"&&new URLSearchParams(window.location.search).has("mock");function y8(){const{lastSpawnedId:n,environments:a,connected:i,onboardingCompleted:l}=Rt(),{showToast:r}=hl();wM(a,r);const c=hn(),d=en(),p=d.pathname.startsWith(Is),[m,g]=x.useState(!1),y=x.useCallback(()=>g(v=>!v),[]);return x.useEffect(()=>{g(!1)},[d.pathname]),x.useEffect(()=>{if(!m)return;const v=_=>{_.key==="Escape"&&g(!1)};return document.addEventListener("keydown",v),()=>{document.removeEventListener("keydown",v)}},[m]),x.useEffect(()=>{n&&!d.pathname.startsWith("/tasks/")&&c(Xf(n),{replace:!0})},[n,c,d.pathname]),i&&l===!1?f.jsx(Li,{to:"/setup",replace:!0}):f.jsxs("div",{className:Fo.root,children:[f.jsx(vE,{onToggleSidebar:p?void 0:y,sidebarOpen:m}),f.jsxs("div",{className:Fo.body,children:[f.jsx("div",{className:Fo.sidebarWrapper,"data-sidebar-open":m,"data-settings":p,children:p?f.jsx(H6,{}):f.jsx(KD,{})}),m&&!p&&f.jsx("div",{className:Fo.overlay,"data-testid":"drawer-overlay",onClick:()=>g(!1)}),f.jsxs("div",{className:Fo.main,children:[f.jsx(tb,{}),f.jsx(hM,{})]})]}),f.jsx(kM,{})]})}function b8(){return f.jsxs(OT,{children:[f.jsx(gt,{path:"setup",element:f.jsx(d8,{})}),f.jsxs(gt,{element:f.jsx(y8,{}),children:[f.jsx(gt,{index:!0,element:f.jsx(R0,{})}),f.jsx(gt,{path:"chat",element:f.jsx(j3,{})}),f.jsx(gt,{path:"sessions/new",element:f.jsx(TB,{})}),f.jsx(gt,{path:"sessions/:sessionId",element:f.jsx(kB,{})}),f.jsx(gt,{path:"workspaces",element:f.jsx(R0,{})}),f.jsx(gt,{path:"workspaces/:workspaceId",element:f.jsx(FO,{})}),f.jsx(gt,{path:"tasks/new",element:f.jsx(h6,{})}),f.jsx(gt,{path:"tasks/:taskId",element:f.jsx(lf,{})}),f.jsx(gt,{path:"tasks/:taskId/stream",element:f.jsx(lf,{})}),f.jsx(gt,{path:"tasks/:taskId/findings",element:f.jsx(lf,{})}),f.jsx(gt,{path:"tasks/:taskId/edit",element:f.jsx(p6,{})}),f.jsx(gt,{path:"environments/new",element:f.jsx(D6,{})}),f.jsxs(gt,{path:"settings",element:f.jsx(L6,{}),children:[f.jsx(gt,{index:!0,element:f.jsx(Li,{to:"environments",replace:!0})}),f.jsx(gt,{path:"environments",element:f.jsx(C5,{})}),f.jsx(gt,{path:"credentials",element:f.jsx(d4,{})}),f.jsx(gt,{path:"tokens",element:f.jsx(Li,{to:"../credentials",replace:!0})}),f.jsx(gt,{path:"personas",element:f.jsx(I4,{})}),f.jsx(gt,{path:"appearance",element:f.jsx(z4,{})}),f.jsx(gt,{path:"about",element:f.jsx(H4,{})})]}),f.jsx(gt,{path:"*",element:f.jsx(Li,{to:"/",replace:!0})})]})]})}const x8=1e4;function _8(){const{onboardingCompleted:n}=Rt(),[a,i]=x.useState(!1);x.useEffect(()=>{if(n!==void 0)return;const r=setTimeout(()=>i(!0),x8);return()=>clearTimeout(r)},[n]);const l=n===void 0&&!a;return f.jsx(Vn,{mode:"wait",children:l?f.jsx(Et.div,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.25},children:f.jsx(Gj,{})},"splash"):f.jsx(Et.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.25},style:{minHeight:"100vh"},children:f.jsx(oC,{children:f.jsx(b8,{})})},"app")})}function S8(){const n=v8?tE:YC;return f.jsx(lE,{children:f.jsx(aE,{children:f.jsx(n,{children:f.jsx(_8,{})})})})}I1.createRoot(document.getElementById("root")).render(f.jsx(x.StrictMode,{children:f.jsx(S8,{})}));

package/dist/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Grackle</title>
-    <script type="module" crossorigin src="/assets/index-CNaDywfU.js"></script>
+    <script type="module" crossorigin src="/assets/index-C0pxaDOv.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-B4yb_tor.css">

package/package.json

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