@schlenkr/ragents 0.1.18 → 0.1.20

package/apps/web/src/RunPreparationChat.tsx

@@ -99,7 +99,10 @@ export function RunPreparationChat({ initialPrompt, entry, registry, sessionRef
   return <section aria-label="Discuss task" className={cn(composerPlacement, messages.length === 0 && emptyComposerPlacement)} data-preparation={messages.length === 0 ? "empty" : "active"}>
     <ChatPanel composer={<div>
       <ChatInputToolbar {...attachments} disabled={operation === "starting"} sendDisabled={busy}
-        initialValue={initialPrompt} onDraftChange={setDraft} onAttachmentsChange={setHasAttachments} handleRef={composer}
+        initialValue={initialPrompt} onDraftChange={setDraft} onAttachmentsChange={(active) => {
+          setHasAttachments(active);
+          attachments.onAttachmentsChange(active);
+        }} handleRef={composer}
         rows={3} maxRows={8} running={operation === "preparing"} onStop={() => active.current?.abort()} onSend={discuss}
         texts={{ placeholder: "Additions or questions about the task ...", send: "Discuss task", stop: "Stop discussion" }}
         toolbarLeft={<ChatViewSwitches settings={chatView} />}

package/apps/web/src/host-modules.ts

@@ -1,3 +1,4 @@
+import * as webRunApps from "@ragents/web/run-apps";
 import * as engineSrcDomainEvents from "@ragents/engine/src/domain/events";
 import * as engineSrcHttpContracts from "@ragents/engine/src/http/contracts";
 import * as engineSrcRpcContract from "@ragents/engine/src/rpc/contract";
@@ -70,6 +71,7 @@ export const hostModules: Readonly<Record<string, object>> = {
   "@ragents/web/product/ProductModelSettings": webProductProductModelSettings,
   "@ragents/web/product/start-options": webProductStartOptions,
   "@ragents/web/rpc": webRpc,
+  "@ragents/web/run-apps": webRunApps,
   "@ragents/web/run-panel/host": webRunPanelHost,
   "@ragents/web/run-panel/input-bridge": webRunPanelInputBridge,
   "@ragents/web/run-view": webRunView,

package/apps/web/src/main.tsx

@@ -4,9 +4,14 @@ import "./diff-view.css";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { Button } from "./ui";
-import { App } from "./App";
 import { AccessGate, AccessScreen } from "./AccessContext";
 import { QuasselHost } from "./chat/QuasselHost";
+import { installAccessToken } from "./access-token";
+import { installRunPanelInputBridge } from "./run-panel/input-bridge";
+import { RunPanelApp, HostLogin } from "./run-panel/RunPanelApp";
+import { parseRunPanelLocation } from "./run-panel/run-panel-location";
+import { RunPanelHostProvider, createRunPanelHost } from "./run-panel/host";
+import { PageOpenerProvider } from "./page-opener";
 import { initializeTheme } from "./theme";
 import { installHostModules } from "./host-modules";
 
@@ -16,16 +21,31 @@ if (!root) throw new Error("Root element is missing");
 
 const reactRoot = createRoot(root);
 try {
+  const location = parseRunPanelLocation(window.location.search);
+  if (location.access !== undefined) installAccessToken(location.access);
+  const host = createRunPanelHost(location.host, window);
+  if (location.host === "vscode") {
+    const disposeInput = installRunPanelInputBridge(window);
+    import.meta.hot?.dispose(disposeInput);
+  }
   const theme = initializeTheme(window);
+  if (location.theme !== undefined) theme.setPreference(location.theme);
+  host.onCommand((message) => { if (message.type === "theme") theme.setPreference(message.theme); });
   import.meta.hot?.dispose(() => theme.dispose());
   reactRoot.render(
     <StrictMode>
-      <QuasselHost><AccessGate><App /></AccessGate></QuasselHost>
+      <QuasselHost>
+        <RunPanelHostProvider value={host}>
+          <PageOpenerProvider value={location.host === "vscode" ? { open: host.openPage } : undefined}>
+            <AccessGate Login={location.host === "vscode" ? HostLogin : undefined}><RunPanelApp location={location} /></AccessGate>
+          </PageOpenerProvider>
+        </RunPanelHostProvider>
+      </QuasselHost>
     </StrictMode>,
   );
 } catch (cause) {
   reactRoot.render(<AccessScreen>
-    <h1 className="my-3 text-[1.5rem]">The view could not be loaded</h1>
+    <h1 className="my-3 text-[1.5rem]">The RAgents panel could not be loaded</h1>
     <p className="mb-6 leading-normal" role="alert">{cause instanceof Error ? cause.message : String(cause)}</p>
     <Button onClick={() => window.location.reload()} variant="outline">Reload</Button>
   </AccessScreen>);

package/apps/web/src/panel/RunLine.tsx

@@ -1,5 +1,5 @@
 import { cn } from "cn";
-import { CircleAlertIcon } from "lucide-react";
+import { CircleAlertIcon, CircleIcon } from "lucide-react";
 import type { ReactNode } from "react";
 import { Checkbox, longTime, RunStateIcon, shortTime } from "../ui";
 import type { ConnectionRun, ConnectionView } from "./contract";
@@ -23,7 +23,8 @@ export function RunList({ label, showConnection, selecting = false, children }:
 }
 
 /** One line per run, the same on Start and on Runs: state and title on the left, time and server on the right in the list columns. */
-export function RunLine({ connection, run, showConnection, selecting, selected, onOpen, onToggle }: {
+export function RunLine({ connection, run, showConnection, selecting, selected, onOpen, onToggle, details }: {
+  details?: ReactNode;
   connection: ConnectionView;
   run: ConnectionRun;
   showConnection: boolean;
@@ -41,10 +42,12 @@ export function RunLine({ connection, run, showConnection, selecting, selected,
       <RunStateIcon open={run.pendingActions} state={run.state} />
       <span className="flex min-w-0 items-center gap-1.5">
         <span className="min-w-0 truncate text-[0.8rem] font-medium">{run.title}</span>
+        {run.notice && !run.locked && <span className="text-primary" title={run.notice === "unseen" ? "Not viewed yet" : "New activity"}><CircleIcon aria-label={run.notice === "unseen" ? "Not viewed yet" : "New activity"} className="size-2 fill-current" /></span>}
         {problem !== undefined && <span className="flex flex-none text-destructive" title={problem}><CircleAlertIcon aria-hidden className="size-3.5" /><span className="sr-only">{problem}</span></span>}
       </span>
       <span className="w-[42px] text-right font-mono text-[0.62rem] text-muted-foreground" data-cell="time" title={longTime(run.updatedAt)}>{time}</span>
       {showConnection && <span className="max-w-[92px] truncate text-[0.64rem] font-semibold text-muted-foreground" data-cell="connection" title={connection.name}>{connection.name}</span>}
     </button>
+    {details && <div className="col-span-full flex flex-wrap gap-x-3 px-2 pb-1 text-[0.65rem] text-muted-foreground">{details}</div>}
   </li>;
 }

package/apps/web/src/panel/RunsPage.tsx

@@ -13,7 +13,7 @@ const matches = (connection: ConnectionView, run: ConnectionRun, query: string):
   `${run.title} ${connection.name}`.toLocaleLowerCase("en-US").includes(query);
 
 /** All runs of all servers as one list: search, hide ended, the server filter from the chip on Start, and a multi-selection for deleting. */
-export function RunsPage({ state, send }: PanelPageProps) {
+export function RunsPage({ state, send, runDetails }: PanelPageProps) {
   const [query, setQuery] = useState("");
   const [onlyConnection, setOnlyConnection] = useState(state.runsConnection);
   const [hideEnded, setHideEnded] = useState(false);
@@ -38,7 +38,7 @@ export function RunsPage({ state, send }: PanelPageProps) {
     return next;
   });
   const remove = () => {
-    for (const connection of state.connections) {
+    for (const connection of state.connections.filter((connection) => connection.canDelete !== false)) {
       const runIds = connection.runs.filter((run) => selected.has(keyOf(connection.name, run.id))).map((run) => run.id);
       if (runIds.length > 0) send({ action: "deleteRuns", name: connection.name, runIds });
     }
@@ -57,16 +57,16 @@ export function RunsPage({ state, send }: PanelPageProps) {
         {onlyConnection}<XIcon data-icon="inline-end" />
       </Toggle>}
       <Toggle onPressedChange={setHideEnded} pressed={hideEnded} size="sm" variant="outline">Hide ended</Toggle>
-      <Toggle onPressedChange={(next) => (next ? setSelecting(true) : leaveSelection())} pressed={selecting} size="sm" variant="outline">
+      {state.connections.some((connection) => connection.canDelete !== false) && <Toggle onPressedChange={(next) => (next ? setSelecting(true) : leaveSelection())} pressed={selecting} size="sm" variant="outline">
         <CheckSquareIcon data-icon="inline-start" />Select
-      </Toggle>
+      </Toggle>}
     </div>
     {shown.length === 0
       ? <p className="text-[0.75rem] text-muted-foreground" role="status">{all.length === 0 ? "No runs yet." : "No matching run."}</p>
       : <RunList label="Runs" selecting={selecting} showConnection={marked}>
-        {shown.map(({ connection, run }) => <RunLine connection={connection} key={keyOf(connection.name, run.id)}
+        {shown.map(({ connection, run }) => <RunLine details={runDetails?.(run.id, connection.name)} connection={connection} key={keyOf(connection.name, run.id)}
           onOpen={() => send({ action: "openRun", name: connection.name, runId: run.id })}
-          onToggle={() => toggle(keyOf(connection.name, run.id))} run={run} selected={selected.has(keyOf(connection.name, run.id))} selecting={selecting} showConnection={marked} />)}
+          onToggle={() => toggle(keyOf(connection.name, run.id))} run={run} selected={selected.has(keyOf(connection.name, run.id))} selecting={selecting && connection.canDelete !== false} showConnection={marked} />)}
       </RunList>}
     {selecting && <div className="sticky bottom-0 flex flex-wrap items-center gap-2 border-t border-border-soft bg-background py-2">
       <span className="flex-1 text-[0.72rem] text-muted-foreground" role="status">{selected.size} selected</span>

package/apps/web/src/panel/StartPage.tsx

@@ -85,7 +85,8 @@ function ConnectionChip({ connection, send, onLogin }: {
   const busy = busyState(connection);
   const detail = stateDetail(connection);
   useEffect(() => { if (!busy && detail === undefined) setFailure(undefined); }, [busy, detail]);
-  const canCreate = connection.state.kind === "connected" && connection.canCreate;
+  const canCreate = connection.state.kind === "connected" && connection.canCreate
+    && (connection.canCreateFree !== false || defaultEntryOf(connection) !== undefined);
   const route = routeLabel(connection);
   const starter = defaultEntryOf(connection);
   const plusLabel = starter ? `New run from ${starter.title} on ${connection.name}` : `New chat on ${connection.name}`;
@@ -115,19 +116,19 @@ function ConnectionOffers({ connection, marked, send }: { connection: Connection
   return <div className="grid grid-cols-1 gap-1.5">
     {marked && <h3 className="flex items-center gap-1.5 pt-1 text-[0.78rem] font-semibold"><ConnectionStateIcon state={connectionState(connection)} />{connection.name}</h3>}
     <StartTiles defaultEntry={connection.defaultEntry} entries={connection.entries} label={marked ? `Templates on ${connection.name}` : "Templates"}
-      onNewChat={() => send({ action: "newRun", name: connection.name })} onStart={(entryId) => send({ action: "newRun", name: connection.name, entryId })} />
+      onNewChat={connection.canCreateFree === false ? undefined : () => send({ action: "newRun", name: connection.name })} onStart={(entryId) => send({ action: "newRun", name: connection.name, entryId })} />
   </div>;
 }
 
 /** The start page: the servers as a block, below them the latest runs and, per reachable server, its templates, the default template or New chat first. */
-export function StartPage({ state, send }: PanelPageProps) {
+export function StartPage({ state, send, runDetails }: PanelPageProps) {
   const [login, setLogin] = useState<string>();
   const connections = state.connections;
   const marked = connections.length > 1;
   const runs = connections.flatMap((connection) => connection.runs.map((run) => ({ connection, run })))
     .sort((left, right) => right.run.updatedAt - left.run.updatedAt);
   const reachable = connections.filter((connection) => connection.state.kind === "connected" && connection.canCreate);
-  const tiles = reachable.reduce((count, connection) => count + startTileCount(connection.entries, connection.defaultEntry, true), 0);
+  const tiles = reachable.reduce((count, connection) => count + startTileCount(connection.entries, connection.defaultEntry, connection.canCreateFree !== false), 0);
   const loginConnection = connections.find((connection) => connection.name === login);
   return <div className="@container/panel grid grid-cols-1 gap-4">
     {state.problem && <p className="text-[0.8rem] leading-normal text-destructive [overflow-wrap:anywhere]" role="alert">{state.problem}</p>}
@@ -153,7 +154,7 @@ export function StartPage({ state, send }: PanelPageProps) {
           {runs.length === 0
             ? <p className="text-[0.75rem] text-muted-foreground">No runs yet.</p>
             : <RunList label="Recent" showConnection={marked}>
-              {runs.slice(0, RECENT_RUNS).map(({ connection, run }) => <RunLine connection={connection} key={`${connection.name}:${run.id}`} onOpen={() => send({ action: "openRun", name: connection.name, runId: run.id })} run={run} showConnection={marked} />)}
+              {runs.slice(0, RECENT_RUNS).map(({ connection, run }) => <RunLine details={runDetails?.(run.id, connection.name)} connection={connection} key={`${connection.name}:${run.id}`} onOpen={() => send({ action: "openRun", name: connection.name, runId: run.id })} run={run} showConnection={marked} />)}
             </RunList>}
         </section>
         {reachable.length > 0 && <section className="grid grid-cols-1 gap-1.5">

package/apps/web/src/panel/contract.ts

@@ -26,6 +26,7 @@ export interface ConnectionRun {
   readonly title: string;
   readonly state: "running" | "waiting" | "idle" | "ended";
   readonly pendingActions: number;
+  readonly notice?: "unseen" | "updated";
   readonly updatedAt: number;
   /** The extension could not read the run view; the row names the reason. */
   readonly problem?: string;
@@ -62,6 +63,8 @@ export interface ConnectionView {
   readonly defaultEntry?: string;
   /** New runs are allowed; without the right only the list remains. */
   readonly canCreate: boolean;
+  readonly canDelete?: boolean;
+  readonly canCreateFree?: boolean;
   /** The signed-in user, if the server manages users. */
   readonly user?: string;
   /** The most recently tried user name; the sign-in form takes it over. */

package/apps/web/src/panel/page-props.ts

@@ -1,6 +1,8 @@
+import type { ReactNode } from "react";
 import type { PanelAction, PanelState } from "./contract";
 
 export interface PanelPageProps {
+  readonly runDetails?: (runId: string, connection: string) => ReactNode;
   readonly state: PanelState;
   readonly send: (action: PanelAction) => void;
 }

package/apps/web/src/run-apps.ts

@@ -0,0 +1,34 @@
+import { createElement } from "react";
+import type { SessionContext, SessionNavigation, SurfaceElementContribution, SurfaceElementDefinition } from "./PluginRegistry";
+
+export interface RunApp {
+  readonly runId: string;
+  readonly definition: SurfaceElementDefinition;
+  readonly Element: SurfaceElementContribution["Element"];
+}
+
+export interface RunAppNavigation {
+  openApp(runId: string, elementId: string, title: string): void;
+}
+
+export function runApps(session: SessionContext, contributions: readonly SurfaceElementContribution[]): readonly RunApp[] {
+  const ids = new Set<string>();
+  return contributions.flatMap(({ Element, select }) => select(session).flatMap((definition) => {
+    if (ids.has(definition.id)) throw new Error(`Duplicate mini-app ID: ${definition.id}`);
+    ids.add(definition.id);
+    return definition.visible === false ? [] : [{ runId: session.session.id, definition, Element }];
+  }));
+}
+
+export function selectedRunApp(apps: readonly RunApp[], elementId: string | null | undefined): RunApp | undefined {
+  return apps.find(({ definition }) => definition.id === elementId);
+}
+
+export function RunAppView({ app, navigation, session }: {
+  app: RunApp;
+  navigation: SessionNavigation;
+  session: SessionContext;
+}) {
+  if (app.runId !== session.session.id) throw new Error("The mini-app belongs to another run.");
+  return createElement(app.Element, { definition: app.definition, navigation, session });
+}

package/apps/web/src/run-overview.ts

@@ -1,32 +1,5 @@
 import type { SessionInfo } from "./api";
 
-export interface RunDayGroup {
-  date: string;
-  label: string;
-  sessions: SessionInfo[];
-}
-
-const dayKey = (date: Date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
-
-export function groupRunsByActivity(sessions: readonly SessionInfo[], now = new Date()): RunDayGroup[] {
-  const today = dayKey(now);
-  const yesterday = new Date(now);
-  yesterday.setDate(yesterday.getDate() - 1);
-  const groups = new Map<string, RunDayGroup>();
-  for (const session of [...sessions].sort((left, right) => right.updatedAt - left.updatedAt || left.id.localeCompare(right.id))) {
-    const date = new Date(session.updatedAt);
-    const key = dayKey(date);
-    const group = groups.get(key) ?? {
-      date: key,
-      label: key === today ? "Today" : key === dayKey(yesterday) ? "Yesterday" : date.toLocaleDateString(undefined, { weekday: "long", day: "numeric", month: "long", ...(date.getFullYear() === now.getFullYear() ? {} : { year: "numeric" }) }),
-      sessions: [],
-    };
-    group.sessions.push(session);
-    groups.set(key, group);
-  }
-  return [...groups.values()];
-}
-
 export function runActivityNotice(session: SessionInfo, seenRevision: number | undefined): "unseen" | "updated" | undefined {
   if (session.revision === undefined) return undefined;
   if (seenRevision === undefined) return "unseen";

package/apps/web/src/run-panel/PanelContributions.tsx

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState, type ComponentType } from "react";
+import { useAccess } from "../AccessContext";
+import { Overview } from "../Overview";
+import type { OverviewPanelContext, PluginRegistry } from "../PluginRegistry";
+import type { ChatUserLocation } from "../../../server/src/chat-context";
+import { Button } from "../ui";
+
+export function PanelContributions({ registry, userLocation, placement = "toolbar" }: { registry: PluginRegistry; userLocation: ChatUserLocation; placement?: "toolbar" | "idle" }) {
+  const access = useAccess();
+  const [open, setOpen] = useState<string>();
+  const [overviewActivated, setOverviewActivated] = useState(false);
+  const [busy, setBusy] = useState<ReadonlySet<string>>(() => new Set());
+  const reportBusy = useCallback((id: string, value: boolean) => setBusy((current) => {
+    if (current.has(id) === value) return current;
+    const next = new Set(current);
+    if (value) next.add(id);
+    else next.delete(id);
+    return next;
+  }), []);
+  const panels = registry.overviewPanels.filter((panel) => panel.readRight === undefined || access.can(panel.readRight));
+  const overview = placement === "idle" ? [] : panels.filter((panel) => (panel.placement ?? "overview") === "overview");
+  const openOverview = () => { setOverviewActivated(true); setOpen("overview"); };
+  return <>
+    {overview.length > 0 && <Button onClick={() => open === "overview" ? setOpen(undefined) : openOverview()} variant="ghost">{busy.size ? "Overview (working)" : "Overview"}</Button>}
+    {panels.filter((panel) => panel.placement === placement).slice(0, placement === "idle" ? 1 : undefined).map(({ id, Panel, placement }) =>
+      <Contribution id={id} key={id} onBusy={reportBusy} onClose={() => setOpen(undefined)} onOpen={() => setOpen(id)}
+        open={placement === "idle" || open === id} Panel={Panel} registry={registry} userLocation={userLocation} />)}
+    {overviewActivated && overview.length > 0 && <Overview onBusy={reportBusy} onClose={() => setOpen(undefined)} onOpen={openOverview}
+      open={open === "overview"} panels={overview} registry={registry} />}
+  </>;
+}
+
+function Contribution({ id, onBusy, Panel, ...context }: Omit<OverviewPanelContext, "onBusy"> & {
+  id: string;
+  onBusy: (id: string, busy: boolean) => void;
+  Panel: ComponentType<OverviewPanelContext>;
+}) {
+  const report = useCallback((busy: boolean) => onBusy(id, busy), [id, onBusy]);
+  useEffect(() => () => onBusy(id, false), [id, onBusy]);
+  return <Panel {...context} onBusy={report} />;
+}