@talgent/workbench-ui 0.0.0 → 0.1.2

package/lib/work-projection.ts

@@ -0,0 +1,122 @@
+import { Code, ConnectError } from "@connectrpc/connect";
+import type { StartupProgress } from "@talgent/workbench-contracts/agent/public/v1/startup_pb";
+import { isTerminalWorkLifecycle } from "./work-state-presentation";
+import { newestStartupProgress } from "./startup-progress";
+
+// The Work aggregate is the authority; the page shows a projection of it built
+// from GetWork snapshots and live frames. Frames travel without delivery
+// guarantees, so a delayed one must never replace a newer state.
+
+export interface LiveWorkLifecycle {
+  agentWorkId: string | null;
+  lifecycle: string;
+  updatedAt?: Date;
+  generation: number;
+  startupProgress?: StartupProgress;
+}
+
+export interface LiveWorkFrame {
+  lifecycle: string;
+  updatedAt?: Date;
+  startupProgress?: StartupProgress;
+}
+
+/** Applies a live frame for agentWorkId. A frame older than the live state
+ * already shown keeps that state; startup progress keeps its own revision order. */
+export function nextLiveWorkLifecycle(state: LiveWorkLifecycle, agentWorkId: string | null, frame: LiveWorkFrame): LiveWorkLifecycle {
+  const sameWork = state.agentWorkId === agentWorkId;
+  const startupProgress = newestStartupProgress(sameWork ? state.startupProgress : undefined, frame.startupProgress);
+  if (sameWork && frame.updatedAt && state.updatedAt && frame.updatedAt.getTime() < state.updatedAt.getTime()) {
+    return startupProgress === state.startupProgress ? state : { ...state, startupProgress };
+  }
+  return {
+    agentWorkId,
+    lifecycle: frame.lifecycle,
+    startupProgress,
+    updatedAt: frame.updatedAt ?? (sameWork ? state.updatedAt : undefined),
+    generation: sameWork && !isTerminalWorkLifecycle(frame.lifecycle)
+      ? state.generation + 1
+      : sameWork ? state.generation : 0,
+  };
+}
+
+export type WorkSnapshotFreshness =
+  | { status: "current" }
+  | { status: "not_found" }
+  | { status: "denied" }
+  | { status: "unavailable" }
+  | { status: "stale"; lastUpdatedAt: Date };
+
+interface SnapshotQueryState {
+  data: unknown;
+  error: unknown;
+  dataUpdatedAt: number;
+}
+
+/** Classifies the snapshot query behind the page. A refresh that fails after
+ * a successful read keeps the last state and marks it stale; it never changes
+ * the Work's lifecycle. Only an authoritative reader of the Work itself
+ * (GetWork) answering NotFound means the Work does not exist. */
+export function workSnapshotFreshness(query: SnapshotQueryState, authoritative = true): WorkSnapshotFreshness {
+  if (!query.error) return { status: "current" };
+  const code = ConnectError.from(query.error).code;
+  if (authoritative && code === Code.NotFound) return { status: "not_found" };
+  if (query.data === undefined) return code === Code.PermissionDenied ? { status: "denied" } : { status: "unavailable" };
+  return { status: "stale", lastUpdatedAt: new Date(query.dataUpdatedAt) };
+}
+
+/** Work controls carry the version the caller observed; Agent answers Aborted
+ * when the Work has changed since, so nothing is applied to a state the user
+ * did not see. */
+export function isStaleWorkControl(cause: unknown) {
+  return ConnectError.from(cause).code === Code.Aborted;
+}
+
+export const staleWorkControlMessage = "This Work changed since you last saw it. Review its current state and try again.";
+
+export const withdrawnModelMessage = "This Work's model is no longer offered, so it can't resume. Ask your administrator to restore the model, then try again.";
+
+// Agent refuses Resume and Restart of a Work whose Model Configuration is withdrawn.
+function isWithdrawnModel(cause: unknown) {
+  const error = ConnectError.from(cause);
+  return error.code === Code.FailedPrecondition && error.rawMessage.includes("model configuration is withdrawn");
+}
+
+export const turnRunningMessage = "This Work is in the middle of a turn. Cancel the turn, then stop the Work.";
+
+// Agent stops a Work only between Turns.
+export function isTurnRunning(cause: unknown) {
+  const error = ConnectError.from(cause);
+  return error.code === Code.FailedPrecondition && error.rawMessage.includes("a Turn is running");
+}
+
+export const inputPendingMessage = "This Work still has messages to finish. Try again once they are handled.";
+
+// Agent closes a Work only once its accepted input is finished.
+export function isInputPending(cause: unknown) {
+  const error = ConnectError.from(cause);
+  return error.code === Code.FailedPrecondition && error.rawMessage.includes("still has accepted input to finish");
+}
+
+export const computerOfflineMessage = "This Work's computer is offline. Try again once it reconnects.";
+
+// Agent refuses a start while the Work's Managed Computer is unreachable.
+function isComputerUnreachable(cause: unknown) {
+  const error = ConnectError.from(cause);
+  return error.code === Code.FailedPrecondition && error.rawMessage.includes("the Computer is unreachable");
+}
+
+/** What a Work whose Resume is owed on reconnection says while its Managed
+ * Computer is away: the messages sent meanwhile wait for the machine. */
+export function awaitingReconnectionNotice(computerName: string | undefined) {
+  return `${computerName || "This Work's computer"} is offline. Your messages are kept, and the Work resumes with them when it reconnects.`;
+}
+
+export function workControlErrorMessage(cause: unknown) {
+  if (isStaleWorkControl(cause)) return staleWorkControlMessage;
+  if (isComputerUnreachable(cause)) return computerOfflineMessage;
+  if (isWithdrawnModel(cause)) return withdrawnModelMessage;
+  if (isTurnRunning(cause)) return turnRunningMessage;
+  if (isInputPending(cause)) return inputPendingMessage;
+  return cause instanceof Error ? cause.message : "Work action failed.";
+}

package/lib/work-questions.ts

@@ -0,0 +1,18 @@
+export interface WorkQuestion {
+  question: string;
+  options?: { label: string; description?: string }[];
+  multiSelect?: boolean;
+}
+
+export function parseWorkQuestions(json: string): { input: Record<string, unknown>; questions: WorkQuestion[] } | null {
+  try {
+    const input = JSON.parse(json);
+    if (!input || typeof input !== "object" || !Array.isArray(input.questions) || !input.questions.length) return null;
+    if (!input.questions.every((question: unknown) => {
+      if (!question || typeof question !== "object" || !("question" in question) || typeof question.question !== "string") return false;
+      if (!("options" in question)) return true;
+      return Array.isArray(question.options) && question.options.every(option => option && typeof option === "object" && typeof option.label === "string");
+    })) return null;
+    return { input, questions: input.questions };
+  } catch { return null; }
+}

package/lib/work-start-draft.ts

@@ -0,0 +1,61 @@
+import { skipToken, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import type { ParameterDrafts } from "./plugin-parameters";
+import type { WorkStartInput } from "./start-work-request";
+
+// Per-Work choices recorded as differences from the personal defaults. None of
+// them is ever written back to a personal installation.
+export interface WorkPluginChoice {
+  /** Undefined keeps the default inclusion; true adds, false removes. */
+  include?: boolean;
+  values: ParameterDrafts;
+}
+
+export interface WorkStartDraft {
+  instruction: string;
+  model?: WorkStartInput["model"];
+  thinkingLevel?: string;
+  repositories: string[];
+  plugins: Record<string, WorkPluginChoice>;
+  /** Per-Work Connector inclusion that differs from the default. */
+  connectors: Record<string, boolean>;
+  agent: string;
+  /** The chosen Computer; empty keeps the default, the first Cloud. */
+  computer: string;
+  /** The Harness choices for a Managed Computer; unset keeps their defaults. */
+  harness?: WorkStartInput["harness"];
+  files: Array<{ id: string; file: File; uploaded: boolean }>;
+  submitting: boolean;
+}
+
+/** What a draft is for: one per `key`, starting from `instruction`. */
+export type WorkStartDraftScope = { key: string; instruction: string };
+
+// The session QueryClient is cleared on logout. Files remain in memory only;
+// every entry point of one scope observes the same draft and in-flight
+// submission guard.
+export function useWorkStartDraft(scope: WorkStartDraftScope) {
+  const client = useQueryClient();
+  const key = ["work-start-draft", scope.key] as const;
+  const { data } = useQuery<WorkStartDraft>({
+    queryKey: key,
+    queryFn: skipToken,
+    initialData: () => ({ instruction: scope.instruction, repositories: [], plugins: {}, connectors: {}, agent: "", computer: "", files: [], submitting: false }),
+    enabled: false,
+    staleTime: Infinity,
+    gcTime: Infinity,
+    structuralSharing: false,
+  });
+  // The cache notifies observers on a later tick, but a controlled textarea must
+  // take each keystroke at once: a value React restores even briefly ends an
+  // input method's composition and commits the raw keystrokes. The instruction is
+  // therefore held locally as well, and follows the cache when it changes elsewhere.
+  const [instruction, setInstruction] = useState(data!.instruction);
+  const [observed, setObserved] = useState(data!.instruction);
+  if (data!.instruction !== observed) { setObserved(data!.instruction); setInstruction(data!.instruction); }
+  function update(change: Partial<WorkStartDraft> | ((draft: WorkStartDraft) => WorkStartDraft)) {
+    const next = client.setQueryData<WorkStartDraft>(key, previous => previous && (typeof change === "function" ? change(previous) : { ...previous, ...change }));
+    if (next) { setObserved(next.instruction); setInstruction(next.instruction); }
+  }
+  return { draft: { ...data!, instruction }, update, current: () => client.getQueryData<WorkStartDraft>(key)! };
+}

package/lib/work-start-loadout.ts

@@ -0,0 +1,100 @@
+import type { JsonObject } from "@bufbuild/protobuf";
+import type { WorkStartConnector, WorkStartPlugin } from "@talgent/workbench-contracts/agent/public/v1/work_start_options_pb";
+import type { Connector, InstalledPlugin, PluginRelease, PluginSummary } from "@talgent/workbench-contracts/marketplace/public/v1/marketplace_pb";
+import { pluginDisplayName, pluginPresentation } from "./marketplace-plugins";
+import { missingRequired, parseParameters, parameterLabel } from "./plugin-parameters";
+import type { WorkStartDraft } from "./work-start-draft";
+
+export type Difference = "required" | "default" | "added" | "removed";
+export const differenceLabel: Record<Difference, string> = { required: "Always included", default: "Your default", added: "Added for this Work", removed: "Removed for this Work" };
+
+export interface Capability { name: string; description: string; argumentHint: string; plugin: string }
+export interface LoadoutRow {
+  slug: string;
+  name: string;
+  difference: Difference;
+  included: boolean;
+  release?: PluginSummary;
+  installed?: InstalledPlugin;
+  skills: Capability[];
+  agents: Capability[];
+  /** Settings changed for this Work only. */
+  edited: string[];
+  /** A blocking problem, such as a required setting nobody provided. */
+  problem: string;
+}
+
+// The Plugins of this Work: required ones, the starter's enabled defaults and
+// per-Work additions, each marked by how it differs from the defaults. Agent
+// reports the Skills and Agents of the defaults; an addition's come from its
+// full release (`details`), since the catalog lists summaries.
+export function pluginLoadout(options: WorkStartPlugin[], catalog: PluginSummary[], installed: Map<string, InstalledPlugin> | undefined, draft: WorkStartDraft, details: Map<string, PluginRelease> = new Map()): LoadoutRow[] {
+  const releases = new Map(catalog.map(release => [release.slug, release]));
+  const rows = new Map<string, LoadoutRow>();
+  const row = (slug: string, base: "required" | "default" | "added", option?: WorkStartPlugin): LoadoutRow => {
+    const release = releases.get(slug), choice = draft.plugins[slug], mine = installed?.get(slug);
+    const included = base === "required" || (base === "added" ? true : choice?.include !== false);
+    const name = release ? pluginPresentation(release).name : option?.displayName && option.displayName !== slug ? option.displayName : pluginDisplayName(slug);
+    const capability = (items: Array<{ name: string; description: string; argumentHint?: string }>) => items.map(item => ({ name: item.name, description: item.description, argumentHint: item.argumentHint ?? "", plugin: name }));
+    const edited = Object.entries(choice?.values ?? {}).filter(([, value]) => value.trim()).map(([key]) => key);
+    // Saved settings are unknown until the installations load; nothing is flagged before.
+    const missing = release && base !== "required" && installed ? missingRequired(release.parameters, { configuration: mine?.configuration, redacted: mine?.redactedParameters }, choice?.values) : [];
+    return {
+      slug, name, release, installed: mine, included, edited,
+      difference: base === "default" && !included ? "removed" : base,
+      skills: capability(option?.skills ?? details.get(slug)?.skills ?? []), agents: capability(option?.agents ?? details.get(slug)?.agents ?? []),
+      problem: included && missing.length ? `Needs ${missing.map(key => parameterLabel(key, release!.parameters[key]).toLowerCase()).join(", ")}` : "",
+    };
+  };
+  for (const option of options) rows.set(option.name, row(option.name, option.required ? "required" : "default", option));
+  for (const [slug, choice] of Object.entries(draft.plugins)) if (choice.include && !rows.has(slug)) rows.set(slug, row(slug, "added"));
+  return [...rows.values()];
+}
+
+// Explicit per-Work differences sent at creation. Parameter overrides are
+// validated against the release; they never change personal settings.
+export function pluginChoices(rows: LoadoutRow[], draft: WorkStartDraft) {
+  const plugins: Array<{ name: string; include: boolean; configuration: JsonObject }> = [];
+  const errors: Record<string, Record<string, string>> = {};
+  for (const row of rows) {
+    if (row.difference === "required") continue;
+    const choice = draft.plugins[row.slug];
+    if (!row.included) { plugins.push({ name: row.slug, include: false, configuration: {} }); continue; }
+    if (row.difference === "default" && !row.edited.length) continue;
+    const parsed = row.release ? parseParameters(row.release.parameters, choice?.values ?? {}, { configuration: row.installed?.configuration, redacted: row.installed?.redactedParameters }) : { values: {}, errors: {} };
+    if (Object.keys(parsed.errors).length) errors[row.slug] = parsed.errors;
+    plugins.push({ name: row.slug, include: true, configuration: parsed.values });
+  }
+  return { plugins, errors };
+}
+
+export interface ConnectorRow {
+  name: string;
+  difference: Difference;
+  included: boolean;
+  /** Marketplace presentation and Provider connection, when listed. */
+  connector?: Connector;
+  /** Left out of a Work on the chosen Managed Computer, as Agent reports;
+   * never included or sent. */
+  unavailable: boolean;
+}
+
+// Agent reports the default selection (required entries and enabled
+// installations); this Work may remove defaults or add other offered entries.
+// On a Managed Computer, Agent says which Connectors its Work leaves out.
+export function connectorLoadout(options: WorkStartConnector[], catalog: Connector[], draft: WorkStartDraft, managed = false): ConnectorRow[] {
+  const presentation = new Map(catalog.map(connector => [connector.name, connector]));
+  return options.map(option => {
+    const base: Difference = option.required ? "required" : option.includedByDefault ? "default" : "added";
+    const connector = presentation.get(option.name);
+    const unavailable = managed && option.unavailableOnManaged;
+    const choice = draft.connectors[option.name];
+    const included = !unavailable && (base === "required" || (choice ?? base === "default"));
+    return { name: option.name, connector, included, unavailable, difference: base === "default" && !included && !unavailable ? "removed" : base };
+  });
+}
+
+export function connectorChoices(rows: ConnectorRow[]) {
+  return rows.filter(row => !row.unavailable && (row.difference === "removed" || (row.difference === "added" && row.included)))
+    .map(row => ({ name: row.name, include: row.included }));
+}

package/lib/work-start-source.ts

@@ -0,0 +1,16 @@
+import type { WorkModelOption } from "@talgent/workbench-contracts/agent/public/v1/model_pb";
+import type { WorkStartConnector, WorkStartPlugin, WorkStartRepositories } from "@talgent/workbench-contracts/agent/public/v1/work_start_options_pb";
+import type { WorkStartDraftScope } from "./work-start-draft";
+
+/** Where a new Work's choices come from: the options and repositories offered
+ * to whoever the Work runs for, `key` naming them so a change reloads them.
+ * Without `uploadAttachment` the Work takes no attachments; with
+ * `chooseComputer` the person picks the Computer it runs on. */
+export type WorkStartSource = {
+  draft: WorkStartDraftScope;
+  key: readonly unknown[];
+  loadOptions: (signal: AbortSignal) => Promise<{ models: WorkModelOption[]; plugins: WorkStartPlugin[]; connectors: WorkStartConnector[] }>;
+  loadRepositories: (signal: AbortSignal) => Promise<Pick<WorkStartRepositories, "repositories" | "recentRepositoryIds" | "repositoriesUnavailable">>;
+  uploadAttachment?: (file: File) => Promise<unknown>;
+  chooseComputer?: boolean;
+};

package/lib/work-state-presentation.ts

@@ -0,0 +1,80 @@
+import { Archive, Circle, CirclePause, CircleX, Clock3, LoaderCircle, Unplug, type LucideIcon } from "lucide-react";
+
+export type WorkPresentation = { label: string; icon: LucideIcon; color: "default" | "accent" | "success" | "warning" | "danger"; description?: string };
+
+export const workStatePresentation = {
+  created: { label: "Created", icon: Circle, color: "default" },
+  starting: { label: "Starting", icon: LoaderCircle, color: "accent" },
+  working: { label: "Working", icon: LoaderCircle, color: "success" },
+  stopping: { label: "Stopping", icon: CirclePause, color: "default" },
+  stopped: { label: "Stopped", icon: CirclePause, color: "default" },
+  failed: { label: "Failed", icon: CircleX, color: "danger" },
+  closing: { label: "Closing", icon: LoaderCircle, color: "default" },
+  closed: { label: "Closed", icon: Archive, color: "default" },
+} as const;
+
+/** A Working Work whose Turn awaits its owner's answer. Waiting is a fact
+ * beside the lifecycle state, never one of its values. */
+export const waitingPresentation = { label: "Waiting for your answer", icon: Clock3, color: "warning" } as const;
+
+/** How long a Working or Stopping Work may stay disconnected before it
+ * stops. Agent decides the stop; this only words it, so it follows
+ * Agent's bound if that changes. */
+const disconnectionGraceMinutes = 5;
+
+/** Why a Stopped Work stopped, where the reason needs saying. */
+const stopReasonLabels: Record<string, string> = { disconnected: "Disconnected" };
+
+/** The line a stopped conversation shows for its stop reason, if any. */
+const stopReasonNotices: Record<string, string> = { disconnected: `Stopped after being disconnected for ${disconnectionGraceMinutes} minutes.` };
+
+export function stopReasonNotice(state: string, stateReason: string | undefined): string | undefined {
+  return state === "stopped" ? stopReasonNotices[stateReason ?? ""] : undefined;
+}
+
+/** What happens to a Work in each state once its Disconnection lasts the
+ * grace: a Working or Stopping Work stops, a Closing one is closed. A start
+ * is not stopped for it. */
+const disconnectionOutcome: Record<string, string> = { working: "stops", stopping: "stops", closing: "closes" };
+
+function clockOf(at: Date): string {
+  return at.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+/** What a Disconnection means for a Work in the given state: since when the
+ * platform has lost sight of where it runs (its Managed Computer, or its
+ * Cloud sandbox) and, counted from then, when the Work stops or closes
+ * unless it reconnects. */
+export function disconnectionNote(state: string, since: Date, now: number = Date.now()): string {
+  const unreachable = `Disconnected since ${clockOf(since)}.`;
+  const outcome = disconnectionOutcome[state];
+  if (!outcome) return unreachable;
+  const at = new Date(since.getTime() + disconnectionGraceMinutes * 60_000);
+  const then = at.getTime() <= now ? `The Work ${outcome} now.` : `The Work ${outcome} at ${clockOf(at)} unless it reconnects by then.`;
+  return `${unreachable} ${then}`;
+}
+
+/** The accessible name of a Work's status: its label and, when it has one,
+ * what it means, so a screen reader hears what the tooltip shows. */
+export function workStatusName(prefix: string, presentation: { label: string; description?: string }): string {
+  return presentation.description ? `${prefix}${presentation.label}. ${presentation.description}` : `${prefix}${presentation.label}`;
+}
+
+export type PresentedWork = { state: string; waiting?: boolean; stateReason?: string; disconnectedSince?: Date | null };
+
+/** A Work's presentation: its Waiting Turn, otherwise its state, qualified by
+ * a Disconnection (a fact beside the state) or a stop reason. */
+export function workPresentation(work: PresentedWork | undefined): WorkPresentation | undefined {
+  if (!work) return undefined;
+  const base: WorkPresentation | undefined = work.waiting ? waitingPresentation : workStatePresentation[work.state as keyof typeof workStatePresentation];
+  if (!base) return undefined;
+  if (work.disconnectedSince && !isTerminalWorkLifecycle(work.state)) {
+    return { label: `${base.label} · Disconnected`, icon: Unplug, color: "warning", description: disconnectionNote(work.state, work.disconnectedSince) };
+  }
+  const reason = work.waiting || work.state !== "stopped" ? undefined : stopReasonLabels[work.stateReason ?? ""];
+  return reason ? { ...base, label: `${base.label} · ${reason}` } : base;
+}
+
+export function isTerminalWorkLifecycle(lifecycle: string): boolean {
+  return lifecycle === "stopped" || lifecycle === "failed" || lifecycle === "closed";
+}

package/lib/work-stream-source.ts

@@ -0,0 +1,32 @@
+import { createContext, useContext } from "react";
+import type { MessageInitShape } from "@bufbuild/protobuf";
+import type { CallOptions } from "@connectrpc/connect";
+import {
+  GetMessageDetailRequestSchema, GetToolDetailRequestSchema, ListMessagesBySessionRequestSchema, WatchStreamRequestSchema,
+  type GetMessageDetailResponse, type GetToolDetailResponse, type ListMessagesBySessionResponse, type WatchStreamResponse,
+} from "@talgent/workbench-contracts/streamgateway/public/v1/streamgateway_pb";
+import { streamClient } from "./client";
+
+/** Where a Work's message stream is read from: Streamgateway for its owner
+ * and Work Share holders by default; an entry may supply another source. */
+export interface WorkStreamSource {
+  watchStream(request: MessageInitShape<typeof WatchStreamRequestSchema>, options?: CallOptions): AsyncIterable<WatchStreamResponse>;
+  listMessagesBySession(request: MessageInitShape<typeof ListMessagesBySessionRequestSchema>, options?: CallOptions): Promise<ListMessagesBySessionResponse>;
+  getMessageDetail(request: MessageInitShape<typeof GetMessageDetailRequestSchema>, options?: CallOptions): Promise<GetMessageDetailResponse>;
+  getToolDetail(request: MessageInitShape<typeof GetToolDetailRequestSchema>, options?: CallOptions): Promise<GetToolDetailResponse>;
+}
+
+// Delegates per call so the client is resolved where a stream is read, not
+// when this module loads.
+export const streamGatewaySource: WorkStreamSource = {
+  watchStream: (request, options) => streamClient.watchStream(request, options),
+  listMessagesBySession: (request, options) => streamClient.listMessagesBySession(request, options),
+  getMessageDetail: (request, options) => streamClient.getMessageDetail(request, options),
+  getToolDetail: (request, options) => streamClient.getToolDetail(request, options),
+};
+
+export const WorkStreamSourceContext = createContext<WorkStreamSource>(streamGatewaySource);
+
+export function useWorkStreamSource() {
+  return useContext(WorkStreamSourceContext);
+}

package/package.json

@@ -1,14 +1,90 @@
 {
   "name": "@talgent/workbench-ui",
-  "version": "0.0.0",
-  "description": "Placeholder: published from https://github.com/talgent-work/workbench",
+  "version": "0.1.2",
+  "description": "The Talgent Workbench's pages and components, published as TypeScript source for web apps built with Vite.",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/talgent-work/workbench.git"
+    "url": "git+https://github.com/talgent-work/workbench.git",
+    "directory": "packages/workbench-ui"
   },
+  "type": "module",
   "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
     "access": "public"
+  },
+  "exports": {
+    "./assets/*": "./assets/*",
+    "./styles/*": "./styles/*",
+    "./components/*.css": "./components/*.css",
+    "./components/analytics/chart-geometry": "./components/analytics/chart-geometry.ts",
+    "./components/analytics/work-usage/turns": "./components/analytics/work-usage/turns.ts",
+    "./components/analytics/work-usage/work-status": "./components/analytics/work-usage/work-status.ts",
+    "./components/preview/file-format": "./components/preview/file-format.ts",
+    "./components/preview/preview-verdict": "./components/preview/preview-verdict.ts",
+    "./components/rail/use-expand-on-change": "./components/rail/use-expand-on-change.ts",
+    "./components/shell/entry-shell": "./components/shell/entry-shell.ts",
+    "./components/shell/reading-context": "./components/shell/reading-context.ts",
+    "./components/work-start/start-work-launch-state": "./components/work-start/start-work-launch-state.ts",
+    "./components/*": "./components/*.tsx",
+    "./hooks/*": "./hooks/*.ts",
+    "./lib/*": "./lib/*.ts",
+    "./pages/*": "./pages/*.tsx",
+    "./test-support/*": "./test-support/*.ts",
+    "./vite-preset": "./vite-preset.ts"
+  },
+  "files": [
+    "assets",
+    "components",
+    "hooks",
+    "lib",
+    "pages",
+    "public",
+    "styles",
+    "test-support",
+    "vite-preset.ts"
+  ],
+  "dependencies": {
+    "@bufbuild/protobuf": "^2.11.0",
+    "@connectrpc/connect": "^2.1.1",
+    "@connectrpc/connect-web": "^2.1.1",
+    "@heroui/react": "^3.1.0",
+    "@heroui/styles": "^3.1.0",
+    "@streamdown/code": "1.1.1",
+    "@streamdown/mermaid": "1.0.3",
+    "@tanstack/react-query": "^5.99.0",
+    "lucide-react": "^1.8.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.18.2",
+    "streamdown": "2.6.0",
+    "@talgent/workbench-contracts": "0.1.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@tailwindcss/vite": "^4.2.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "jsdom": "^29.0.2",
+    "tailwindcss": "^4.2.2",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.1.6",
+    "vitest": "^4.1.12"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "typecheck": "tsc -b",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}

package/pages/computers/computers-page.tsx

@@ -0,0 +1,56 @@
+import { Card } from "@heroui/react";
+import { Monitor } from "lucide-react";
+import { LoadState } from "../../components/marketplace/marketplace-shared";
+import { PageLayout } from "../../components/shell/page-layout";
+import { presenceLabel, roomLabel, useComputers, type ManagedComputer } from "../../lib/computer-service";
+import { useNow } from "../../lib/use-now";
+import { InstallCommands } from "./install-commands";
+import { RemoveComputerButton } from "./remove-computer-dialog";
+import { RenameComputerButton } from "./rename-computer-dialog";
+import { RoomRulesButton } from "./room-rules-dialog";
+import "../../components/marketplace/marketplace.css";
+
+/** Computers: the person's Managed Computers with their Presence, and how to
+ * add another. A Cloud is not one of them and never shows here. */
+export function ComputersPage() {
+  const computers = useComputers();
+  const list = computers.data ?? [];
+  return <PageLayout workspaceTitle="Computers">
+    <div className="mx-auto grid w-[min(640px,100%)] gap-8 py-6">
+      <section className="mk-section" aria-labelledby="cp-list">
+        <h3 id="cp-list" className="mk-section-title">Your computers{list.length > 0 && <span className="mk-count">{list.length}</span>}</h3>
+        <LoadState noun="your computers" isPending={computers.isPending} isError={computers.isError} hasData={Boolean(computers.data)} isFetching={computers.isFetching} onRetry={() => void computers.refetch()} />
+        {computers.data && (list.length === 0
+          ? <p className="text-[14px] text-muted">No computers yet. Install Talgent Computer on a machine to run Works there.</p>
+          : <ComputerList computers={list} />)}
+      </section>
+      <InstallCommands />
+    </div>
+  </PageLayout>;
+}
+
+function ComputerList({ computers }: { computers: ManagedComputer[] }) {
+  const now = useNow(30_000);
+  return <Card className="mk-group">
+    <ul className="mk-group-list" aria-label="Your computers">
+      {computers.map(computer => {
+        const online = computer.presence.kind === "online";
+        return <li key={computer.id} className="!items-center">
+          <Monitor size={18} className={online ? "shrink-0" : "shrink-0 text-muted"} aria-hidden="true" />
+          <span className="mk-row-text min-w-0 flex-1">
+            <strong className="truncate">{computer.name}</strong>
+            <span>
+              <span className={online ? "text-success" : undefined}>{presenceLabel(computer.presence, now)}</span>
+              {computer.talgentComputerVersion && <> · Talgent Computer {computer.talgentComputerVersion}</>}
+              {computer.claudeCodeVersion && <> · Claude Code {computer.claudeCodeVersion}</>}
+            </span>
+            <span>{roomLabel(computer)} · {computer.policy === "queue" ? "Queues runs when full" : "Rejects runs when full"}</span>
+          </span>
+          <RoomRulesButton computer={computer} />
+          <RenameComputerButton computer={computer} />
+          <RemoveComputerButton computer={computer} />
+        </li>;
+      })}
+    </ul>
+  </Card>;
+}