@schlenkr/ragents 0.1.19 → 0.1.20

package/apps/web/dist/assets/runPanel-BjG5NBKm.js

@@ -1,26 +0,0 @@
-import{a as _,H as B,u as X,r as o,j as e,B as E,I as Fe,J as Me,K as De,v as Ue,l as W,m as Y,t as He,k as $e,P as Be,G as fe,L as Ve,p as Z,q as pe,i as qe,N as xe,O as le,T as Je,V as Ge,A as ce,Y as Ke,Z as Qe,_ as We,$ as Ye,s as Ze,a0 as Xe,e as et,a1 as tt,a2 as nt,x as st,y as rt,a3 as ot,a4 as at,a5 as it,z as lt,Q as ct,a6 as dt,a7 as ut,F as ht}from"./mermaid-HWGCJPDP-CSCkaArr.js";/**
- * @license lucide-react v1.46.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const me={name:"ellipsis-vertical",size:24,node:[["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["circle",{cx:"12",cy:"5",r:"1",key:"gxeob9"}],["circle",{cx:"12",cy:"19",r:"1",key:"lyex9k"}]],aliases:["more-vertical"]};me.node;const ft=_(me);/**
- * @license lucide-react v1.46.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const ve={name:"external-link",size:24,node:[["path",{d:"M15 3h6v6",key:"1q9fwt"}],["path",{d:"M10 14 21 3",key:"gplh6r"}],["path",{d:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6",key:"a6xqqp"}]]};ve.node;const pt=_(ve);/**
- * @license lucide-react v1.46.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const ge={name:"layout-grid",size:24,node:[["rect",{width:"7",height:"7",x:"3",y:"3",rx:"1",key:"1g98yp"}],["rect",{width:"7",height:"7",x:"14",y:"3",rx:"1",key:"6d4xhi"}],["rect",{width:"7",height:"7",x:"14",y:"14",rx:"1",key:"nxv5o0"}],["rect",{width:"7",height:"7",x:"3",y:"14",rx:"1",key:"1bb6yr"}]]};ge.node;const xt=_(ge);/**
- * @license lucide-react v1.46.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const we={name:"log-out",size:24,node:[["path",{d:"m16 17 5-5-5-5",key:"1bji2h"}],["path",{d:"M21 12H9",key:"dn1m92"}],["path",{d:"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4",key:"1uf3rs"}]]};we.node;const mt=_(we);/**
- * @license lucide-react v1.46.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const be={name:"play",size:24,node:[["path",{d:"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",key:"10ikf1"}]]};be.node;const vt=_(be),O="flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-left hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-2 disabled:cursor-default disabled:opacity-50 disabled:hover:bg-transparent [&>svg]:size-4 [&>svg]:flex-none [&>svg]:text-muted-foreground",K=t=>t instanceof Error?t.message:String(t);function Q({onOpenSettings:t,runId:a}){const r=B(),n=X(),[l,c]=o.useState(!1),[u,f]=o.useState(!1),[m,x]=o.useState(),[d,b]=o.useState(),k=o.useRef(null),R=o.useId(),P=i=>{var p;return i.reason==="outside-press"&&i.event.target instanceof Node&&((p=k.current)==null?void 0:p.contains(i.event.target))===!0},v=()=>{c(!1),b(void 0),x(void 0)},g=()=>{if(r.kind==="vscode"){r.requestLogout(),c(!1);return}f(!0),x(void 0),n.logout().then(()=>c(!1)).catch(i=>x(K(i))).finally(()=>f(!1))},V=i=>{b({kind:"loading"}),x(void 0),W.call(Y.runs.scripts,{runId:i}).then(p=>b({kind:"ready",scripts:p})).catch(p=>{b({kind:"ready",scripts:[]}),x(K(p))})},z=(i,p)=>{f(!0),x(void 0),W.call(Y.runs.startScript,{runId:i,entry:p,input:null}).then(v).catch(F=>x(K(F))).finally(()=>f(!1))},h=a!==void 0&&n.can("runs.write")?a:void 0;return e.jsxs(e.Fragment,{children:[e.jsx(E,{"aria-controls":l?R:void 0,"aria-expanded":l,"aria-haspopup":"dialog","aria-label":"Panel menu",className:"self-center",onClick:()=>l?v():c(!0),ref:k,size:"icon-lg",title:"Menu",variant:"ghost",children:e.jsx(ft,{})}),e.jsx(Fe,{onOpenChange:(i,p)=>{!i&&P(p)||(i?c(!0):v())},open:l,children:e.jsxs(Me,{align:"end",anchor:k,"aria-label":"Panel menu",className:"w-[260px] gap-0 p-1 text-[0.8rem]",collisionPadding:8,dim:!0,id:R,role:"dialog",side:"bottom",children:[d&&h!==void 0?e.jsxs(e.Fragment,{children:[e.jsxs("button",{className:O,onClick:()=>{b(void 0),x(void 0)},type:"button",children:[e.jsx(De,{}),"Run script"]}),e.jsxs("div",{"aria-label":"Run scripts",className:"grid max-h-[50vh] overflow-auto border-t border-border-soft pt-1",role:"list",children:[d.kind==="loading"&&e.jsx("p",{className:"px-2 py-1.5 text-muted-foreground",children:"Loading run scripts ..."}),d.kind==="ready"&&d.scripts.length===0&&!m&&e.jsx("p",{className:"px-2 py-1.5 text-muted-foreground",children:"This profile has no run scripts for you."}),d.kind==="ready"&&d.scripts.map(i=>e.jsx("button",{className:O,disabled:u||!i.available,onClick:()=>z(h,i.id),role:"listitem",title:i.reason??i.description,type:"button",children:e.jsxs("span",{className:"grid min-w-0",children:[e.jsx("span",{className:"truncate",children:i.title}),e.jsx("span",{className:"line-clamp-2 text-[0.68rem] text-muted-foreground",children:i.available?i.description:i.reason})]})},i.id))]})]}):e.jsxs(e.Fragment,{children:[e.jsxs("button",{className:O,onClick:()=>{v(),t()},type:"button",children:[e.jsx(Ue,{}),"Settings"]}),h!==void 0&&e.jsxs("button",{className:O,onClick:()=>V(h),type:"button",children:[e.jsx(vt,{}),"Run script"]}),r.kind==="vscode"&&e.jsxs("button",{className:O,onClick:()=>{v(),r.openExternal(new URL("/",window.location.href).toString())},type:"button",children:[e.jsx(pt,{}),"Open in browser"]}),n.enabled&&n.user&&e.jsxs("button",{className:O,disabled:u,onClick:g,title:n.user.id,type:"button",children:[e.jsx(mt,{}),e.jsxs("span",{className:"grid min-w-0",children:[e.jsx("span",{children:"Sign out"}),e.jsx("span",{className:"truncate text-[0.68rem] text-muted-foreground",children:n.user.label})]})]})]}),m&&e.jsx("p",{className:"px-2 py-1.5 text-[0.72rem] text-destructive",role:"alert",children:m})]})})]})}const gt=5e3;function je(t){const[a,r]=o.useState([]),[n,l]=o.useState(!1),c=o.useRef(void 0),u=o.useRef(!1),f=o.useCallback(()=>{if(!t)return Promise.resolve();if(c.current)return u.current=!0,c.current;const m=async()=>{do{u.current=!1;try{r(await He()),l(!1)}catch{l(!0)}}while(u.current)};return c.current=m().finally(()=>{c.current=void 0}),c.current},[t]);return o.useEffect(()=>{if(!t)return;f();const m=W.subscribe(Y.channels.runs,{},()=>void f()),x=setInterval(()=>void f(),gt);return()=>{m(),clearInterval(x)}},[t,f]),{sessions:a,unreachable:n,refresh:f}}const Se="relative z-[80] flex h-header flex-none items-stretch border-b border-border bg-shell shadow-bar",de="max-w-[120px] self-center truncate rounded-full bg-secondary px-2 py-0.5 text-[0.66rem] font-semibold text-muted-foreground",wt="min-w-0 flex-1 self-center truncate px-1.5 text-[0.82rem] font-semibold",bt="Stopped in the run panel",jt=5e3,S="New run",St="relative z-[80] flex h-header flex-none items-center gap-2 border-b border-border bg-shell px-3 shadow-bar",ye="m-auto max-w-[420px] p-6 text-center text-muted-foreground",yt=new Set,kt=()=>({id:crypto.randomUUID(),title:S,updatedAt:Date.now()}),ke=(t,a="Run")=>({id:t,title:a,updatedAt:Date.now()}),Nt={kind:"working",title:"Loading profile",detail:"Loading the server's interface."},Rt={kind:"working",title:"Starting run",detail:"Creating the new run."},ue={kind:"working",title:"Starting run",detail:"Starting the template."},Ct={kind:"waiting",title:"No run selected",detail:"On the Start page you start a new run or open an existing one."},Et={kind:"error",title:"No runs enabled",detail:"No runs are enabled for this user account."};function It({location:t}){const a=$e(),r=t.layout==="app";if(a.status==="loading")return e.jsx(y,{headless:r,state:Nt});if(a.status==="failed")return e.jsx(y,{headless:r,state:{kind:"error",title:"The profile could not be loaded",detail:a.error},children:e.jsx(E,{onClick:()=>window.location.reload(),size:"sm",variant:"outline",children:"Reload"})});const n=t.layout==="app"?e.jsx(Tt,{elementId:t.elementId,registry:a.registry,runId:t.runId}):e.jsx(Ot,{connection:t.connection,initialRunId:t.runId,registry:a.registry});return a.failures.length===0?n:e.jsxs("div",{className:"flex h-full flex-col",children:[e.jsx(Be,{failures:a.failures}),e.jsx("div",{className:"flex min-h-0 flex-1 flex-col",children:n})]})}function Ot({connection:t,initialRunId:a,registry:r}){var ie;const n=B(),l=X(),c=l.can("runs.read"),u=c&&l.can("runs.write"),f=u&&l.can("runs.create"),m=f||u&&r.scriptEntries.some(s=>pe(l,s.id)),x=qe((ie=l.user)==null?void 0:ie.id),[d,b]=o.useState(a),[k,R]=o.useState(),[P,v]=o.useState(),g=o.useCallback(()=>v(s=>s===d?void 0:s),[d]),[V,z]=o.useState(),[h,i]=o.useState(),[p,F]=o.useState(),q=o.useRef(void 0),j=o.useCallback(s=>{q.current=s==null?void 0:s.runId,F(s)},[]),[ee,J]=o.useState(),[L,te]=o.useState(!1),[ne,se]=o.useState(),G=o.useCallback(()=>te(!0),[]),{sessions:re,unreachable:Re,refresh:Ce}=je(c&&!h&&!p),[Ee,Ie]=o.useState(null),[Oe,Pe]=o.useState(null),T=o.useCallback((s,w)=>{var $;const N=($=r.startEntries.find(ze=>ze.id===w))==null?void 0:$.fixedStartOptions;i({session:kt(),startOptions:s&&xe(s,N),entryId:w})},[r]),Le=o.useCallback(()=>T(),[T]),A=o.useCallback((s,w)=>{i(void 0),j(void 0),z(w),b(s),v(n.kind==="vscode"?s:void 0)},[n.kind,j]),oe=o.useCallback(s=>{i(void 0),j(s),Pt(s,r,l).then(()=>{q.current===s.runId&&A(s.runId)},w=>{q.current===s.runId&&F({...s,error:w instanceof Error?w.message:String(w)})})},[l,A,r,j]),Te=o.useCallback(s=>{v(void 0),R(void 0),b(s)},[]),M=o.useCallback(()=>{v(void 0),i(void 0),j(void 0),J(void 0),n.kind==="vscode"?n.notify({type:"showStart"}):b(void 0)},[n,j]);o.useLayoutEffect(()=>{if(P){if(L||h){g();return}return window.addEventListener("pointerdown",g,!0),window.addEventListener("keydown",g,!0),window.addEventListener("blur",g),()=>{window.removeEventListener("pointerdown",g,!0),window.removeEventListener("keydown",g,!0),window.removeEventListener("blur",g)}}},[h,P,L,g]),o.useEffect(()=>n.onCommand(s=>{if(s.type==="selectRun"&&(v(void 0),i(void 0),j(void 0),J(void 0),z(void 0),R(void 0),b(s.runId??void 0)),s.type!=="newRun")return;if(n.kind!=="vscode"){m&&T(s.startOptions,s.entryId);return}const w=m?s.entryId===void 0&&!f?"Free runs are not enabled for this user account.":void 0:"New runs are not enabled for this user account.";if(J(w),w!==void 0)return;const N=r.startEntries.find($=>$.id===s.entryId);if(R((N==null?void 0:N.title)??S),s.entryId===void 0){A(crypto.randomUUID(),s.startOptions);return}if(N!==void 0&&r.guideFor(N)!==void 0){j(void 0),T(s.startOptions,N.id);return}oe({runId:crypto.randomUUID(),entryId:s.entryId,startOptions:s.startOptions})}),[m,f,n,A,r,j,T,oe]),o.useEffect(()=>{n.notify({type:"ready"})},[n]),o.useEffect(()=>{n.notify({type:"runChanged",runId:d??null})},[n,d]);const D=L&&e.jsx(Ze,{onClose:()=>te(!1),registry:r}),I=s=>e.jsxs(e.Fragment,{children:[e.jsx(E,{"aria-label":"Back to Start",className:"self-center",onClick:M,size:"icon-lg",title:"Back to Start",variant:"ghost",children:e.jsx(le,{})}),e.jsx("strong",{className:wt,children:s}),t&&e.jsx("span",{className:de,title:`Server ${t}`,children:t}),e.jsx(Q,{onOpenSettings:G})]}),U=e.jsx(E,{onClick:M,size:"sm",variant:"outline",children:"Back to Start"}),ae=h&&e.jsx(Z,{initialStartOptions:h.startOptions,onStarted:()=>{A(h.session.id),R(s=>s??S),Ce()},registry:r,session:h.session,startDialog:{onClose:n.kind==="vscode"?M:()=>i(void 0),initialEntryId:h.entryId}},h.session.id);if(p)return e.jsxs(e.Fragment,{children:[p.error===void 0?e.jsx(y,{header:I(k??S),state:ue}):e.jsx(y,{header:I(k??S),state:{kind:"error",title:"The run could not be started",detail:p.error},children:U}),D]});if(n.kind==="vscode"&&h)return e.jsxs(e.Fragment,{children:[e.jsx(y,{header:I(k??S),state:ue}),ae,D]});if(n.kind==="vscode"&&!(c&&d))return e.jsxs(e.Fragment,{children:[c?ee!==void 0?e.jsx(y,{header:I(S),state:{kind:"error",title:"No new run possible",detail:ee},children:U}):e.jsx(Lt,{header:I(S),children:U}):e.jsx(y,{header:I(S),state:Et,children:U}),D]});const H=re.find(s=>s.id===d),Ae=()=>{d!==void 0&&(se(void 0),Xe(d,bt).catch(s=>se(`Stop failed: ${s instanceof Error?s.message:String(s)}`)))},_e=c?e.jsx(et,{activeId:d,onCreate:m?Le:void 0,onSelect:Te,onToggleSelected:()=>{},registry:r,seenRevisions:x.revisions,selectMode:!1,selectedIds:yt,sessions:re}):e.jsx("p",{className:ye,children:"No runs are enabled for this user account."});return e.jsxs("div",{className:"flex h-full flex-col bg-[image:var(--surface-backdrop)]",children:[c&&d?e.jsxs(e.Fragment,{children:[e.jsxs("header",{className:Se,children:[e.jsx(E,{"aria-label":"Back to Start",className:"self-center",onClick:M,size:"icon-lg",title:"Back to Start",variant:"ghost",children:e.jsx(le,{})}),e.jsx("div",{"aria-label":"Run title bar",className:"flex min-w-0 flex-1 items-stretch overflow-x-auto no-scrollbar",ref:Ie,role:"region"}),t&&e.jsx("span",{className:de,title:`Server ${t}`,children:t}),e.jsx(Je,{className:"self-center px-1.5",state:H!=null&&H.running?"running":"idle"}),e.jsx(Ge,{className:"self-center",disabled:!u,label:"Stop run",onClick:Ae,size:"icon-lg",title:"Stop the run with all agents and flows"}),e.jsx("div",{"aria-label":"Panel tools",className:"flex flex-none items-center empty:hidden",ref:Pe,role:"toolbar"}),e.jsx(Q,{onOpenSettings:G,runId:d})]}),ne&&e.jsx(ce,{variant:"destructive",children:ne}),e.jsx("main",{className:"relative z-1 flex min-h-0 min-w-0 flex-1 @container/chat-content",children:e.jsx(Z,{autoFocusChat:P===d&&!L&&!h,onAutoFocusChatSettled:g,toolbarContainer:Oe,headerContainer:Ee,initialStartOptions:V,layout:"panel",onViewed:x.markViewed,registry:r,session:H??ke(d,k),viewing:!h&&!L},d)})]}):e.jsxs(e.Fragment,{children:[e.jsxs("header",{className:St,children:[e.jsx(xt,{"aria-hidden":!0,className:"size-4 flex-none text-muted-foreground"}),e.jsx("strong",{className:"min-w-0 flex-1 truncate text-[0.82rem] font-semibold",children:r.brand.title}),e.jsx(Q,{onOpenSettings:G})]}),e.jsxs("div",{className:"min-h-0 flex-1 overflow-auto p-3",children:[Re&&e.jsx(ce,{className:"mb-3",variant:"destructive",children:"The server is unreachable."}),_e]})]}),D,ae]})}async function Pt(t,a,r){const n=a.startEntries.find(l=>l.id===t.entryId);if(!n)throw new Error("This template does not exist in this profile.");if(!pe(r,n.id))throw new Error(`${n.title} is not enabled for this user account.`);if(t.startOptions){const l=await Ke(t.runId),c=xe(t.startOptions,n.fixedStartOptions);for(const[u,f]of Qe(l,c))await We(t.runId,u,f)}await Ye(t.runId,n,null)}function Lt({children:t,header:a}){const[r,n]=o.useState(!1);return o.useEffect(()=>{const l=window.setTimeout(()=>n(!0),jt);return()=>window.clearTimeout(l)},[]),r?e.jsx(y,{header:a,state:Ct,children:t}):e.jsx(y,{header:a,state:Rt})}function y({children:t,header:a,headless:r=!1,state:n}){return e.jsxs("div",{className:"flex h-full flex-col bg-[image:var(--surface-backdrop)]",children:[!r&&e.jsx("header",{className:Se,children:a}),e.jsx("main",{className:"grid min-h-0 flex-1 place-items-center overflow-hidden p-6",children:e.jsx(Ve,{state:n,children:t})})]})}function Tt({elementId:t,registry:a,runId:r}){const n=B(),l=X().can("runs.read"),{sessions:c}=je(l);return o.useEffect(()=>{n.notify({type:"ready"})},[n]),l?e.jsx("main",{className:"relative flex h-full min-h-0 min-w-0 flex-1 bg-background @container/chat-content",children:e.jsx(Z,{layout:{element:t},registry:a,session:c.find(u=>u.id===r)??ke(r)},r)}):e.jsx("p",{className:ye,children:"No runs are enabled for this user account."})}function At(){const t=B();return e.jsxs(fe,{children:[e.jsx("h1",{className:"my-3 text-[1.5rem]",children:"Sign-in required"}),e.jsx("p",{className:"mb-6 leading-normal text-muted-foreground",children:"Sign-in goes through VS Code. The panel then reloads."}),e.jsx(E,{className:"w-full",onClick:()=>t.requestLogin(),children:"Sign in with VS Code"})]})}const C=t=>t!=null&&t.trim()?t.trim():void 0,_t=t=>{if(t==="browser"||t==="vscode")return t;throw new Error(`Unknown host ${JSON.stringify(t)}. Allowed are browser and vscode.`)};function zt(t){const a=new URLSearchParams(t),r=C(a.get("layout"))??"panel";if(r!=="panel"&&r!=="app")throw new Error(`Unknown layout ${JSON.stringify(r)}. Allowed are panel and app.`);const n=C(a.get("theme"));if(n!==void 0&&!tt(n))throw new Error(`Unknown theme ${JSON.stringify(n)}. Allowed are light and dark.`);const l={host:_t(C(a.get("host"))??"browser"),connection:C(a.get("connection")),theme:n,access:C(a.get(nt))},c=C(a.get("run"));if(r==="panel")return{layout:r,runId:c,...l};const u=C(a.get("element"));if(!c||!u)throw new Error("The app layout needs run and element.");return{layout:r,runId:c,elementId:u,...l}}st();const Ne=document.getElementById("root");if(!Ne)throw new Error("Root element is missing");const he=rt.createRoot(Ne);try{const t=zt(window.location.search);t.access!==void 0&&ot(t.access);const a=at(t.host,window);if(t.host==="vscode"){const n=it(window)}const r=lt(window);t.theme!==void 0&&r.setPreference(t.theme),a.onCommand(n=>{n.type==="theme"&&r.setPreference(n.theme)}),he.render(e.jsx(o.StrictMode,{children:e.jsx(ct,{children:e.jsx(dt,{value:a,children:e.jsx(ut,{value:t.host==="vscode"?{open:a.openPage}:void 0,children:e.jsx(ht,{Login:t.host==="vscode"?At:void 0,children:e.jsx(It,{location:t})})})})})}))}catch(t){he.render(e.jsxs(fe,{children:[e.jsx("h1",{className:"my-3 text-[1.5rem]",children:"The RAgents panel could not be loaded"}),e.jsx("p",{className:"mb-6 leading-normal",role:"alert",children:t instanceof Error?t.message:String(t)}),e.jsx(E,{onClick:()=>window.location.reload(),variant:"outline",children:"Reload"})]}))}

package/apps/web/src/App.tsx

@@ -1,318 +0,0 @@
-import { canStartEntry } from "../../../packages/ragents/src/access";
-import { useAccess, UserMenu } from "./AccessContext";
-import { Alert, Button, Spinner } from "./ui";
-import { RunModalContext, WorkspaceModalContext } from "./ui/dialog";
-import { useCallback, useEffect, useRef, useState, type ComponentType } from "react";
-import { deleteSession, listSessions, type SessionInfo } from "./api";
-import { CircleHelpIcon, SettingsIcon, SparklesIcon } from "lucide-react";
-import { HelpDialog } from "./HelpDialog";
-import { Overview } from "./Overview";
-import type { OverviewPanelContext } from "./PluginRegistry";
-import { PluginChat } from "./PluginChat";
-import { chatUserLocation, type ChatRunLocation } from "./chat/user-location";
-import { coreContracts } from "@ragents/host/api/contracts";
-import { rpc } from "./rpc";
-import { SettingsModal } from "./SettingsModal";
-import { usePluginActivation } from "./PluginActivation";
-import { PluginFailureNotice } from "./PluginFailureNotice";
-import { useRunReadState } from "./run-read-state";
-
-const chatWorkspaceClass = "flex min-h-0 min-w-0 flex-1 flex-col";
-const headerSquareClass = "inline-flex w-header min-h-header items-center justify-center border-r border-border text-primary transition-colors duration-100 not-disabled:cursor-pointer hover:not-disabled:bg-accent focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-3 aria-expanded:bg-primary aria-expanded:text-primary-foreground aria-pressed:bg-primary aria-pressed:text-primary-foreground disabled:opacity-45";
-
-export function App() {
-  const access = useAccess();
-  const runReadState = useRunReadState(access.user?.id);
-  const readRuns = access.can("runs.read");
-  const writeRuns = readRuns && access.can("runs.write");
-  const inspectRuns = access.can("runs.inspect");
-  const deleteRuns = readRuns && access.can("runs.delete");
-  const pluginActivation = usePluginActivation();
-  const overviewButtonRef = useRef<HTMLButtonElement>(null);
-  const settingsButtonRef = useRef<HTMLButtonElement>(null);
-  const [runHeaderContainer, setRunHeaderContainer] = useState<HTMLDivElement | null>(null);
-  const [workspaceHeaderContainer, setWorkspaceHeaderContainer] = useState<HTMLDivElement | null>(null);
-  const [statusContainer, setStatusContainer] = useState<HTMLElement | null>(null);
-  const [workspaceModalContainer, setWorkspaceModalContainer] = useState<HTMLDivElement | null>(null);
-  const [runModalContainer, setRunModalContainer] = useState<HTMLDivElement | null>(null);
-  const [serverSessions, setServerSessions] = useState<SessionInfo[]>([]);
-  const [draft, setDraft] = useState<(SessionInfo & { startEntryId?: string }) | undefined>();
-  const [activeId, setActiveId] = useState<string | undefined>();
-  const [runLocation, setRunLocation] = useState<ChatRunLocation>();
-  const [settingsOpen, setSettingsOpen] = useState(false);
-  const [helpOpen, setHelpOpen] = useState(false);
-  const [overviewOpen, setOverviewOpen] = useState(false);
-  const [toolbarPanel, setToolbarPanel] = useState<string>();
-  const [overviewActivated, setOverviewActivated] = useState(false);
-  const [busyPanels, setBusyPanels] = useState<ReadonlySet<string>>(() => new Set());
-  const [sessionsUnreachable, setSessionsUnreachable] = useState(false);
-  const refreshing = useRef<Promise<void> | undefined>(undefined);
-  const refreshRequested = useRef(false);
-  const refresh = useCallback((): Promise<void> => {
-    if (!readRuns) return Promise.resolve();
-    if (refreshing.current) {
-      refreshRequested.current = true;
-      return refreshing.current;
-    }
-    const update = async () => {
-      do {
-        refreshRequested.current = false;
-        try {
-          setServerSessions(await listSessions());
-          setSessionsUnreachable(false);
-        } catch { setSessionsUnreachable(true); }
-      } while (refreshRequested.current);
-    };
-    refreshing.current = update().finally(() => { refreshing.current = undefined; });
-    return refreshing.current;
-  }, [readRuns]);
-
-  useEffect(() => {
-    if (!readRuns || draft) return;
-    void refresh();
-    const unsubscribe = rpc.subscribe(coreContracts.channels.runs, {}, () => void refresh());
-    const timer = setInterval(() => void refresh(), 5000);
-    return () => { unsubscribe(); clearInterval(timer); };
-  }, [draft, readRuns, refresh]);
-
-  const closeOverview = useCallback((restoreFocus = false) => {
-    setOverviewOpen(false);
-    if (restoreFocus) overviewButtonRef.current?.focus({ preventScroll: true });
-  }, []);
-
-  // Overview contributions keep their state after the first opening.
-  const openOverview = useCallback(() => {
-    setToolbarPanel(undefined);
-    setOverviewActivated(true);
-    setOverviewOpen(true);
-  }, []);
-
-  const toggleOverview = useCallback(() => {
-    if (overviewOpen) closeOverview(true);
-    else openOverview();
-  }, [closeOverview, openOverview, overviewOpen]);
-
-  useEffect(() => {
-    const handleShortcut = (event: KeyboardEvent) => {
-      if (event.defaultPrevented || event.repeat || event.altKey || event.shiftKey
-        || event.key.toLowerCase() !== "i" || event.metaKey === event.ctrlKey) return;
-      const button = overviewButtonRef.current;
-      if (!button || button.closest("[inert]")) return;
-      event.preventDefault();
-      toggleOverview();
-    };
-    window.addEventListener("keydown", handleShortcut);
-    return () => window.removeEventListener("keydown", handleShortcut);
-  }, [toggleOverview]);
-
-  const setPanelBusy = useCallback((id: string, busy: boolean) => setBusyPanels((current) => {
-    if (current.has(id) === busy) return current;
-    const next = new Set(current);
-    if (busy) next.add(id);
-    else next.delete(id);
-    return next;
-  }), []);
-
-  const sessions = serverSessions;
-  const activeSession = sessions.find((session) => session.id === activeId);
-  const openSettings = useCallback(() => { setToolbarPanel(undefined); setSettingsOpen(true); }, []);
-  const closeHelp = useCallback(() => setHelpOpen(false), []);
-  const closeSettings = useCallback(() => {
-    setSettingsOpen(false);
-    requestAnimationFrame(() => settingsButtonRef.current?.focus());
-  }, []);
-  const settingsAction = (
-    <Button aria-label="Open settings" onClick={openSettings} ref={settingsButtonRef} size="icon-lg" title="Settings" variant="ghost">
-      <SettingsIcon />
-    </Button>
-  );
-
-  const handleOpen = (id: string) => {
-    setActiveId(id);
-    closeOverview(true);
-  };
-
-  const handleCreate = () => {
-    setToolbarPanel(undefined);
-    closeOverview(true);
-    setDraft({ id: crypto.randomUUID(), title: "New run", updatedAt: Date.now() });
-  };
-
-  const handleDelete = async (ids: readonly string[]) => {
-    const results = await Promise.allSettled(ids.map((id) => deleteSession(id)));
-    const deleted = ids.filter((_, index) => results[index]!.status === "fulfilled");
-    if (activeId !== undefined && deleted.includes(activeId)) setActiveId(undefined);
-    await refresh();
-    const failure = results.find((result): result is PromiseRejectedResult => result.status === "rejected");
-    if (failure) throw failure.reason;
-  };
-
-  if (pluginActivation.status === "loading") {
-    return <div className="m-auto p-6 text-muted-foreground">Loading profile.</div>;
-  }
-  if (pluginActivation.status === "failed") {
-    return (
-      <div className="flex h-full">
-        <main className="relative z-1 flex min-h-0 min-w-0 flex-1 bg-[image:var(--surface-backdrop)]">
-          <div className={chatWorkspaceClass}>
-            <header className="flex min-h-[42px] flex-none items-center gap-3 border-b border-border-soft pr-0.5 pb-2 pl-2.5">
-              <div className="flex min-w-0 flex-1 items-center gap-3 text-[0.82rem] font-semibold text-foreground">Profile unavailable</div>
-            </header>
-            <Alert className="m-auto max-w-[560px] gap-3 p-6" variant="destructive">
-              <p>{pluginActivation.error}</p>
-              <Button variant="outline" onClick={() => window.location.reload()}>Reload</Button>
-            </Alert>
-          </div>
-        </main>
-      </div>
-    );
-  }
-
-  const registry = pluginActivation.registry;
-  const availablePanels = registry.overviewPanels.filter((panel) => panel.readRight === undefined || access.can(panel.readRight));
-  const panels = availablePanels.filter((panel) => (panel.placement ?? "overview") === "overview");
-  const toolbarPanels = availablePanels.filter((panel) => panel.placement === "toolbar");
-  const idlePanel = readRuns ? availablePanels.find((panel) => panel.placement === "idle") : undefined;
-  const overviewAvailable = readRuns || panels.length > 0;
-  const busy = panels.some((panel) => busyPanels.has(panel.id));
-  const userLocation = chatUserLocation(readRuns ? activeId : undefined, overviewOpen, runLocation);
-
-  return (
-    <div className="flex h-full flex-col">
-      <header className="relative z-[80] flex h-header flex-none items-stretch border-b border-border bg-shell shadow-bar">
-        {overviewAvailable && <div className="relative flex flex-none self-stretch">
-          <button
-            aria-controls="app-overview"
-            aria-expanded={overviewOpen}
-            aria-haspopup="dialog"
-            aria-keyshortcuts="Meta+I Control+I"
-            aria-label={overviewOpen ? "Close overview" : "Open overview"}
-            className={headerSquareClass}
-            onClick={toggleOverview}
-            ref={overviewButtonRef}
-            title={`Overview (Cmd+I / Ctrl+I)${busy ? ": processing" : ""}`}
-            type="button"
-          >
-            {busy ? <Spinner aria-hidden className="size-[18px]" /> : <SparklesIcon size={22} />}
-          </button>
-        </div>}
-        {toolbarPanels.map(({ id, Panel }) => <ToolbarPanelHost
-          id={id} key={id} onBusy={setPanelBusy}
-          onClose={() => setToolbarPanel(undefined)}
-          onOpen={() => { if (!settingsOpen && !helpOpen && !draft) { closeOverview(); setToolbarPanel(id); } }}
-          open={toolbarPanel === id} Panel={Panel} registry={registry}
-          userLocation={userLocation}
-        />)}
-        <div aria-label="Run title bar" className="flex min-w-0 flex-1 items-stretch overflow-x-auto no-scrollbar focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-3 max-md:in-[header:has([data-slot=overseer-toolbar][data-open=true])]:flex-[0_1_0]" ref={setRunHeaderContainer} role="region" tabIndex={0} />
-        <UserMenu />
-        <div className="flex min-w-0 flex-[0_1_auto] items-stretch bg-shell has-data-[workspace-state=expanded]:w-[var(--workspace-panel-width,560px)] has-data-[workspace-state=expanded]:border-l has-data-[workspace-state=expanded]:border-border">
-          <div className="flex min-w-0 flex-1 empty:hidden" ref={setWorkspaceHeaderContainer} />
-          <div className="flex flex-none items-center gap-1.5 px-2 max-md:gap-0.5 max-md:px-1">
-            {access.can("settings.read") && settingsAction}
-            {inspectRuns && <Button aria-haspopup="dialog" aria-label="Open help" onClick={() => { setToolbarPanel(undefined); setHelpOpen(true); }} size="icon-lg" title="Help" variant="ghost">
-              <CircleHelpIcon />
-            </Button>}
-          </div>
-        </div>
-      </header>
-    <PluginFailureNotice failures={pluginActivation.failures} />
-    <WorkspaceModalContext.Provider value={workspaceModalContainer}>
-    <div className="relative flex min-h-0 flex-1 flex-col" ref={setWorkspaceModalContainer}>
-    <RunModalContext.Provider value={runModalContainer}>
-    <div className="relative flex h-auto min-h-0 flex-1" ref={setRunModalContainer}>
-      <main className="relative z-1 flex min-h-0 min-w-0 flex-1 bg-[image:var(--surface-backdrop)] @container/chat-content">
-        {readRuns && activeId
-          ? (
-            <PluginChat
-              headerContainer={runHeaderContainer}
-              workspaceHeaderContainer={workspaceHeaderContainer}
-              statusContainer={statusContainer}
-              key={activeId}
-              onLocationChange={setRunLocation}
-              onViewed={runReadState.markViewed}
-              viewing={!overviewOpen && !settingsOpen && !helpOpen && !draft && !toolbarPanel}
-              registry={registry}
-              session={activeSession ?? { id: activeId, title: "New run", updatedAt: Date.now() }}
-            />
-          )
-          : idlePanel
-          ? (
-            <div className={chatWorkspaceClass}>
-              <ToolbarPanelHost
-                id={idlePanel.id} key={idlePanel.id} onBusy={setPanelBusy} onClose={() => {}} onOpen={() => {}}
-                open={!overviewOpen && !settingsOpen && !helpOpen && !draft && !toolbarPanel} Panel={idlePanel.Panel} registry={registry}
-                userLocation={userLocation}
-              />
-            </div>
-          )
-          : (
-            <div className={chatWorkspaceClass}>
-              <div className="m-auto text-center text-muted-foreground">{readRuns ? writeRuns ? "Open the overview at the top left to choose a run or start a new one." : "Open the overview at the top left to choose a run. You have read access." : "No runs are shared with this user account."}</div>
-            </div>
-          )}
-      </main>
-      {overviewActivated && (
-        <Overview
-          onOpen={openOverview}
-          onBusy={setPanelBusy}
-          onClose={() => closeOverview(true)}
-          open={overviewOpen}
-          panels={panels}
-          registry={registry}
-          runs={readRuns
-            ? {
-              activeId,
-              canCreate: writeRuns && (access.can("runs.create") || registry.scriptEntries.some((entry) => canStartEntry(access, entry.id))),
-              canDelete: deleteRuns,
-              onCreate: handleCreate,
-              onDelete: handleDelete,
-              onOpen: handleOpen,
-              registry,
-              sessions,
-              seenRevisions: runReadState.revisions,
-              unreachable: sessionsUnreachable,
-            }
-            : undefined}
-        />
-      )}
-      {draft && (
-        <PluginChat
-          key={draft.id}
-          onStarted={() => { setActiveId(draft.id); setDraft(undefined); void refresh(); }}
-          registry={registry}
-          session={draft}
-          startDialog={{ onClose: () => setDraft(undefined), initialEntryId: draft.startEntryId }}
-        />
-      )}
-      {settingsOpen && <SettingsModal onClose={closeSettings} registry={registry} />}
-      {inspectRuns && helpOpen && <HelpDialog onClose={closeHelp}
-        sampleEntries={registry.scriptEntries.filter((entry) => canStartEntry(access, entry.id)).map((entry) => entry.id)}
-        onStartSample={(entryId) => {
-          if (!canStartEntry(access, entryId) || !registry.scriptEntries.some((entry) => entry.id === entryId)) return;
-          setHelpOpen(false);
-          setToolbarPanel(undefined);
-          closeOverview();
-          setDraft({ id: crypto.randomUUID(), title: "New run", updatedAt: Date.now(), startEntryId: entryId });
-        }} />}
-    </div>
-    <footer
-      aria-label="Run status bar"
-      className="relative flex h-statusbar w-full flex-none items-stretch pl-3 before:pointer-events-none before:absolute before:inset-0 before:z-[2] before:border-t before:border-border before:bg-shell before:shadow-status before:backdrop-blur-[16px] before:content-['']"
-      ref={setStatusContainer}
-    />
-    </RunModalContext.Provider>
-    </div>
-    </WorkspaceModalContext.Provider>
-    </div>
-  );
-}
-
-function ToolbarPanelHost({ id, onBusy, Panel, ...context }: Omit<OverviewPanelContext, "onBusy"> & {
-  id: string;
-  onBusy: (id: string, busy: boolean) => void;
-  Panel: ComponentType<OverviewPanelContext>;
-}) {
-  const reportBusy = useCallback((busy: boolean) => onBusy(id, busy), [id, onBusy]);
-  useEffect(() => () => onBusy(id, false), [id, onBusy]);
-  return <Panel {...context} onBusy={reportBusy} />;
-}

package/apps/web/src/SessionList.tsx

@@ -1,157 +0,0 @@
-import { PlusIcon, Trash2Icon } from "lucide-react";
-import { cn } from "cn";
-import { Button, Empty, Spinner } from "./ui";
-import type { SessionInfo } from "./api";
-import { groupRunsByActivity, runActivityNotice } from "./run-overview";
-import type { RunReadRevisions } from "./run-read-state";
-import type { PluginRegistry } from "./PluginRegistry";
-
-interface SessionListProps {
-  sessions: SessionInfo[];
-  seenRevisions?: RunReadRevisions;
-  activeId: string | undefined;
-  onSelect: (id: string) => void;
-  onDelete?: (id: string) => void;
-  registry: PluginRegistry;
-  selectMode: boolean;
-  selectedIds: ReadonlySet<string>;
-  onToggleSelected: (id: string) => void;
-  /** With a handler, "New run" is the first card in the list instead of a button next to it. */
-  onCreate?: () => void;
-}
-
-const createCardClass = "flex min-h-[148px] min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-2 rounded-[12px] border border-dashed border-border-strong text-[0.9rem] font-semibold text-muted-foreground hover:border-primary hover:bg-[color-mix(in_srgb,var(--primary)_6%,var(--background))] hover:text-primary focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2";
-const gridClass = "grid list-none grid-cols-[repeat(auto-fill,minmax(min(100%,240px),1fr))] items-stretch gap-3";
-
-const formatTimestamp = (time: number): string => {
-  const date = new Date(time);
-  const today = new Date();
-  const sameDay = date.toDateString() === today.toDateString();
-  return sameDay
-    ? date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })
-    : date.toLocaleDateString(undefined, { day: "2-digit", month: "2-digit" });
-};
-
-/** Running, unread, locked and resting runs differ only in their accent color; the card layout stays the same. */
-const tones = {
-  locked: {
-    card: "border-[color-mix(in_srgb,var(--destructive)_55%,var(--border))]",
-    head: "border-t-destructive bg-destructive/8",
-    text: "text-destructive",
-  },
-  running: {
-    card: "border-[color-mix(in_srgb,var(--info)_55%,var(--border))]",
-    head: "border-t-info bg-info/8",
-    text: "text-info",
-  },
-  unread: {
-    card: "border-[color-mix(in_srgb,var(--primary)_55%,var(--border))]",
-    head: "border-t-primary bg-primary/8",
-    text: "text-primary",
-  },
-  idle: {
-    card: "border-border",
-    head: "border-t-muted-foreground bg-muted-foreground/8",
-    text: "text-muted-foreground",
-  },
-} as const;
-
-export function SessionList({
-  sessions,
-  seenRevisions = {},
-  activeId,
-  onSelect,
-  onDelete,
-  registry,
-  selectMode,
-  selectedIds,
-  onToggleSelected,
-  onCreate,
-}: SessionListProps) {
-  const createCard = onCreate && !selectMode && <li className="flex min-w-0">
-    <button className={createCardClass} onClick={onCreate} type="button"><PlusIcon aria-hidden className="size-5" />New run</button>
-  </li>;
-  if (sessions.length === 0) {
-    return createCard
-      ? <ul className={gridClass}>{createCard}</ul>
-      : <Empty className="py-16 text-[0.9rem] text-muted-foreground">No runs yet.</Empty>;
-  }
-  return (
-    <div className="grid gap-6.5">
-      {groupRunsByActivity(sessions).map((group, index) => <section key={group.date} aria-label={group.label}>
-        <h3 className="mb-3 flex items-center gap-2.5 text-[0.85rem] after:flex-1 after:border-t after:border-border-soft after:content-['']">
-          <time dateTime={group.date}>{group.label}</time><span className="text-[0.7rem] font-normal text-muted-foreground">{group.sessions.length}</span>
-        </h3>
-        <ul className={gridClass}>
-          {index === 0 && createCard}
-          {group.sessions.map((session) => {
-            const notice = session.locked === undefined ? runActivityNotice(session, seenRevisions[session.id]) : undefined;
-            const tone = tones[session.locked !== undefined ? "locked" : session.running ? "running" : notice ? "unread" : "idle"];
-            const picked = session.id === activeId || (selectMode && selectedIds.has(session.id));
-            return (
-              <li
-                className={cn(
-                  "relative flex min-w-0 rounded-[12px] border bg-background",
-                  picked
-                    ? "border-primary bg-[color-mix(in_srgb,var(--primary)_8%,var(--background))]"
-                    : cn(tone.card, "hover:border-muted-foreground hover:bg-[color-mix(in_srgb,var(--primary)_3%,var(--background))]"),
-                )}
-                key={session.id}
-              >
-                {selectMode && (
-                  <input
-                    aria-label={`Select ${session.title} for deletion`}
-                    checked={selectedIds.has(session.id)}
-                    className="absolute top-[17px] left-3.5 z-1 flex-none cursor-pointer accent-primary"
-                    onChange={() => onToggleSelected(session.id)}
-                    type="checkbox"
-                  />
-                )}
-                <button
-                  aria-current={session.id === activeId ? "true" : undefined}
-                  aria-pressed={selectMode ? selectedIds.has(session.id) : undefined}
-                  className={cn(
-                    "flex max-h-[240px] min-h-[148px] min-w-0 flex-1 cursor-pointer flex-col items-stretch gap-2.5 overflow-hidden rounded-[11px] px-4 pb-4 text-left focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 disabled:cursor-default",
-                    selectMode && "pl-9",
-                  )}
-                  disabled={session.locked !== undefined && !selectMode}
-                  onClick={() => (selectMode ? onToggleSelected(session.id) : onSelect(session.id))}
-                  type="button"
-                >
-                  <span className={cn("-mx-4 flex flex-col gap-2.5 rounded-t-[11px] border-t-[3px] px-4 pt-3.5 pb-3", tone.head, selectMode && "-ml-9 pl-9")}>
-                    <span className="line-clamp-2 pr-6 text-[0.9rem] leading-[1.45] font-semibold [overflow-wrap:anywhere]" title={session.title}>{session.title}</span>
-                    <span className="flex min-h-[18px] flex-wrap items-center gap-x-3.5 gap-y-1.5">
-                      <span className={cn("flex items-center gap-[7px] text-[0.75rem]", tone.text)}>
-                        {session.running ? <Spinner aria-hidden className="size-3" /> : <span aria-hidden className="size-[7px] flex-none rounded-full bg-current" />}
-                        {session.locked !== undefined ? "Locked" : session.running ? "Running" : session.id === activeId ? "Open" : "Idle"}
-                      </span>
-                      {notice && <span className="inline-flex items-center gap-1.5 text-[0.7rem] font-semibold text-primary" title={notice === "updated" ? "New journal activity since you last viewed this run" : "Not viewed in this browser yet"}>
-                        <span aria-hidden className="size-[7px] flex-none rounded-full bg-current" />{notice === "updated" ? "New activity" : "Not viewed"}
-                      </span>}
-                    </span>
-                  </span>
-                  {session.locked !== undefined
-                    ? <span className="line-clamp-3 text-[0.75rem] leading-[1.45] text-destructive [overflow-wrap:anywhere]" title={session.locked}>{session.locked}</span>
-                    : registry.sessionMetadata.map(({ id, Metadata }) => (
-                      <Metadata key={id} placement="list" session={session} />
-                    ))}
-                  <span className="mt-auto grid gap-0.5 text-muted-foreground">
-                    {session.createdAt !== undefined && <span className="text-[0.7rem] tabular-nums">Created <time dateTime={new Date(session.createdAt).toISOString()}>
-                      {new Date(session.createdAt).toLocaleString(undefined, { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" })}
-                    </time></span>}
-                    {session.ownerLabel !== undefined && <span className="text-[0.7rem] [overflow-wrap:anywhere]">Created by {session.ownerLabel}</span>}
-                    <span className="text-[0.7rem] tabular-nums">Last activity {formatTimestamp(session.updatedAt)}</span>
-                  </span>
-                </button>
-                {!selectMode && onDelete && (
-                  <Button aria-label={`Delete ${session.title}`} className="absolute top-2.5 right-2.5 text-destructive hover:bg-destructive/12 hover:text-destructive" onClick={() => onDelete(session.id)} size="icon-sm" title={`Delete ${session.title}`} variant="ghost">
-                    <Trash2Icon />
-                  </Button>
-                )}
-              </li>
-          ); })}
-        </ul>
-      </section>)}
-    </div>
-  );
-}

package/apps/web/src/SurfaceShortcuts.tsx

@@ -1,60 +0,0 @@
-import { useEffect, useId, useRef, useState, type ReactNode } from "react";
-import { ChevronLeftIcon } from "lucide-react";
-import { ToolbarItem } from "./Toolbar";
-
-export function SurfaceShortcuts({ children }: { children: ReactNode }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const viewportRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const id = useId();
-  const [scroll, setScroll] = useState({ overflow: false, left: false, right: false });
-
-  useEffect(() => {
-    const container = containerRef.current!;
-    const viewport = viewportRef.current!;
-    const content = contentRef.current!;
-    const measure = () => {
-      const next = {
-        overflow: content.scrollWidth > container.clientWidth + 1,
-        left: viewport.scrollLeft > 1,
-        right: viewport.scrollLeft + viewport.clientWidth < viewport.scrollWidth - 1,
-      };
-      setScroll((current) => current.overflow === next.overflow && current.left === next.left && current.right === next.right ? current : next);
-    };
-    const wheel = (event: WheelEvent) => {
-      if (event.defaultPrevented || event.ctrlKey || viewport.scrollWidth <= viewport.clientWidth + 1) return;
-      if (event.target instanceof Element && event.target.closest("[data-surface-scroll]")) return;
-      event.preventDefault();
-      const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
-      const unit = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? 16 : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? viewport.clientWidth : 1;
-      viewport.scrollLeft += delta * unit;
-    };
-    const observer = new ResizeObserver(measure);
-    observer.observe(container);
-    observer.observe(viewport);
-    observer.observe(content);
-    viewport.addEventListener("scroll", measure);
-    viewport.addEventListener("wheel", wheel, { passive: false });
-    measure();
-    return () => {
-      observer.disconnect();
-      viewport.removeEventListener("scroll", measure);
-      viewport.removeEventListener("wheel", wheel);
-    };
-  }, []);
-
-  const move = (direction: number) => {
-    const viewport = viewportRef.current!;
-    const item = Array.from(contentRef.current!.children).find((child) => child.getBoundingClientRect().width > 0);
-    const step = item ? item.getBoundingClientRect().width : viewport.clientWidth / 3;
-    viewport.scrollBy({ left: direction * step, behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth" });
-  };
-
-  return <div className="flex min-w-0 flex-1" ref={containerRef}>
-    {scroll.overflow && <ToolbarItem as="button" aria-controls={id} aria-label="Scroll apps and actors left" className="w-8 justify-center px-0" disabled={!scroll.left} onClick={() => move(-1)} title="Scroll left" type="button"><ChevronLeftIcon size={18} /></ToolbarItem>}
-    <div aria-label="Browse apps and actors" className="flex min-w-0 flex-1 items-stretch overflow-x-auto no-scrollbar focus-visible:outline-2 focus-visible:outline-ring/60 focus-visible:-outline-offset-3" id={id} ref={viewportRef} role="group" tabIndex={0}>
-      <div className="flex w-max flex-none items-stretch" ref={contentRef}>{children}</div>
-    </div>
-    {scroll.overflow && <ToolbarItem as="button" aria-controls={id} aria-label="Scroll apps and actors right" className="w-8 justify-center border-r-0 border-l border-border px-0 [&>svg]:rotate-180" disabled={!scroll.right} onClick={() => move(1)} title="Scroll right" type="button"><ChevronLeftIcon size={18} /></ToolbarItem>}
-  </div>;
-}