feat(web): Workers roster at /workers and a worker page at /workers/:id (CL-9565)

apps/web/src/pages/worker-page.tsx

@@ -0,0 +1,227 @@
+// One worker: its instructions (editable), its model, and the workbench it
+// lives on. Permissions and delete arrive with their own screens.
+
+import { useState } from "react";
+import { Button, Card, CardDescription, CardTitle, PageShell, toast } from "@corbits/react-ui";
+import { reportError } from "@corbits/error-sink";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { WorkbenchAvatar } from "@/chat/avatar";
+import { isMyraAgent, listChatAgents, type ChatAgent } from "@/chat/threads-api";
+import { ChatCircle } from "@/lib/icons";
+import { QueryView, describeApiError } from "@/lib/api-query";
+import { agentSlugFromSourceAssetName, deployAgentSource } from "../agent-deploy";
+import { readAgentMcpHandles, readAgentSource } from "../agent-source-read";
+import { useBench } from "../bench-context";
+import { Link } from "../navigation";
+import { tenantKeys } from "../query-client";
+import { useTenantQuery } from "../routines-api";
+import { StageTopBar } from "../shell/stage-top-bar";
+import { WORKERS_PATH_PREFIX } from "../path-ids";
+import { workbenchPath } from "../workbench-path";
+import { StatusPill, workerStatus } from "./workers-page";
+
+function sourceKey(tenantId: string, agentId: string) {
+  return [...tenantKeys.agents(tenantId), "source", agentId] as const;
+}
+
+function InstructionsCard({
+  tenantId,
+  agent,
+}: {
+  readonly tenantId: string;
+  readonly agent: ChatAgent;
+}) {
+  const queryClient = useQueryClient();
+  const editable = !isMyraAgent(agent);
+  const source = useQuery({
+    queryKey: sourceKey(tenantId, agent.id),
+    queryFn: () => readAgentSource(tenantId, agent.id, agent.assetName),
+  });
+  const [draft, setDraft] = useState<string | null>(null);
+  const saved = source.data?.systemPrompt ?? "";
+  const value = draft ?? saved;
+  const dirty = draft !== null && draft !== saved;
+
+  // Editing means republishing the agent's source and redeploying it, the
+  // same pipeline that created it; the stock hub has no in-place prompt edit.
+  const save = useMutation({
+    mutationFn: async (systemPrompt: string) => {
+      const slug = agentSlugFromSourceAssetName(agent.assetName);
+      if (slug === null) throw new Error(`${agent.assetName} is not an editable worker`);
+      const mcpHandles = await readAgentMcpHandles(tenantId, agent.id, agent.assetName);
+      await deployAgentSource({
+        tenantId,
+        input: { name: agent.name, systemPrompt, slug, mcpHandles },
+      });
+    },
+    onSuccess: async () => {
+      setDraft(null);
+      toast("Instructions saved");
+      await queryClient.invalidateQueries({
+        queryKey: tenantKeys.agents(tenantId),
+      });
+    },
+    onError: (cause) => {
+      reportError(cause, { operation: "worker_instructions_save", tenantId });
+      toast(describeApiError(cause, "save these instructions"));
+    },
+  });
+
+  return (
+    <Card className="p-5">
+      <CardTitle>Instructions</CardTitle>
+      <CardDescription>
+        How this worker should behave. It reads these at the start of every run.
+      </CardDescription>
+      {source.isPending ? (
+        <p className="mt-3 text-[13px] text-(--ink-3)">Loading instructions…</p>
+      ) : source.isError ? (
+        <p role="alert" className="mt-3 text-[13px] text-(--danger-ink)">
+          {describeApiError(source.error, "load these instructions")}
+        </p>
+      ) : (
+        <>
+          <textarea
+            aria-label="Instructions"
+            rows={8}
+            value={value}
+            readOnly={!editable}
+            onChange={(event) => setDraft(event.target.value)}
+            className="mt-3 w-full resize-y rounded-(--r-md) border border-(--line) bg-(--card) p-3 text-[13.5px] leading-relaxed"
+          />
+          {editable ? (
+            <div className="mt-3 flex items-center gap-3">
+              <Button
+                size="sm"
+                disabled={!dirty || value.trim() === "" || save.isPending}
+                onClick={() => save.mutate(value.trim())}
+              >
+                {save.isPending ? "Saving…" : "Save changes"}
+              </Button>
+              <span className="text-[12.5px] text-(--ink-3)">
+                {save.isPending
+                  ? "Restarting with the new instructions"
+                  : dirty
+                    ? "Unsaved changes"
+                    : "Saved"}
+              </span>
+            </div>
+          ) : (
+            <p className="mt-3 text-[12.5px] text-(--ink-3)">
+              Myra's instructions ship with Workbench and can't be edited here.
+            </p>
+          )}
+        </>
+      )}
+    </Card>
+  );
+}
+
+function DetailsCard({
+  tenantId,
+  agent,
+}: {
+  readonly tenantId: string;
+  readonly agent: ChatAgent;
+}) {
+  const source = useQuery({
+    queryKey: sourceKey(tenantId, agent.id),
+    queryFn: () => readAgentSource(tenantId, agent.id, agent.assetName),
+  });
+  const first = source.data?.declaredSources[0];
+  return (
+    <Card className="p-5">
+      <CardTitle className="text-[14px]">Details</CardTitle>
+      <dl className="mt-3 grid grid-cols-[90px_1fr] gap-y-2 text-[13.5px]">
+        <dt className="text-(--ink-3)">Model</dt>
+        <dd>{first === undefined ? "…" : `${first.provider} · ${first.model}`}</dd>
+      </dl>
+    </Card>
+  );
+}
+
+export function WorkerRoute({ agentId }: { readonly agentId: string }) {
+  const { selectedTenantId, benchMemberships } = useBench();
+  const agentsQuery = useTenantQuery(
+    tenantKeys.agents(selectedTenantId ?? "none"),
+    selectedTenantId !== null,
+    () => listChatAgents(selectedTenantId as string),
+  );
+  const benchName =
+    benchMemberships.find((member) => member.tenantId === selectedTenantId)?.tenantName ??
+    "workbench";
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <QueryView query={agentsQuery} label="this worker" skeleton="rows">
+        {(agents) => {
+          const agent = agents.find((candidate) => candidate.id === agentId);
+          if (agent === undefined || selectedTenantId === null) {
+            return (
+              <>
+                <StageTopBar
+                  crumbs={[{ label: "Workers", href: WORKERS_PATH_PREFIX }, { label: "Not found" }]}
+                />
+                <p className="p-7 text-[14px] text-(--ink-3)">
+                  This workbench has no worker with that id.
+                </p>
+              </>
+            );
+          }
+          const status = workerStatus(agent);
+          return (
+            <>
+              <StageTopBar
+                crumbs={[{ label: "Workers", href: WORKERS_PATH_PREFIX }, { label: agent.name }]}
+              />
+              <div className="min-h-0 flex-1 overflow-auto">
+                <PageShell width="full" className="page-fill">
+                  <div className="mx-auto w-full max-w-4xl px-4 pb-8 sm:px-7">
+                    <div className="mb-6 flex items-center gap-4">
+                      <WorkbenchAvatar
+                        kind="worker"
+                        name={agent.name}
+                        size={56}
+                        status={status.tone}
+                      />
+                      <div className="min-w-0 flex-1">
+                        <h1 className="text-[24px] font-extrabold">{agent.name}</h1>
+                        <p className="mt-1 flex items-center gap-2 text-[14px] text-(--ink-2)">
+                          <StatusPill tone={status.tone} />
+                          {status.text}
+                        </p>
+                      </div>
+                      <Link
+                        to={workbenchPath(selectedTenantId)}
+                        className="inline-flex h-9 items-center gap-2 rounded-(--r-md) bg-(--primary) px-4 text-[14px] font-bold text-(--primary-foreground)"
+                      >
+                        <ChatCircle />
+                        Open {benchName}
+                      </Link>
+                    </div>
+                    <div className="grid items-start gap-6 md:grid-cols-[minmax(0,1fr)_300px]">
+                      <InstructionsCard tenantId={selectedTenantId} agent={agent} />
+                      <aside className="flex flex-col gap-4">
+                        <DetailsCard tenantId={selectedTenantId} agent={agent} />
+                        <Card className="p-5">
+                          <CardTitle className="text-[14px]">Workbench</CardTitle>
+                          <Link
+                            to={workbenchPath(selectedTenantId)}
+                            className="mt-2 block text-[13.5px] font-semibold underline-offset-2 hover:underline"
+                          >
+                            {benchName}
+                          </Link>
+                        </Card>
+                      </aside>
+                    </div>
+                  </div>
+                </PageShell>
+              </div>
+            </>
+          );
+        }}
+      </QueryView>
+    </div>
+  );
+}