@agimon-ai/doompi-task 0.0.1-alpha.6 → 0.0.1-alpha.64

package/package.json

@@ -1,12 +1,35 @@
 {
   "name": "@agimon-ai/doompi-task",
-  "version": "0.0.1-alpha.6",
-  "description": "Pi task tracking extension with file-backed tasks and subagent delegation",
+  "version": "0.0.1-alpha.64",
+  "description": "Persistent, dependency-aware task graphs and subagent delegation for Pi coding sessions.",
+  "keywords": [
+    "ai",
+    "coding-agent",
+    "delegation",
+    "developer-tools",
+    "doompi",
+    "pi-coding-agent",
+    "pi-package",
+    "subagents",
+    "task-graph",
+    "task-management"
+  ],
   "homepage": "https://agimon.ai",
+  "bugs": {
+    "url": "https://github.com/AgiFlow/doompi/issues"
+  },
   "license": "MIT",
   "author": "Vuong Ngo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AgiFlow/doompi.git",
+    "directory": "layers/task/doompi-task"
+  },
   "files": [
     "dist",
+    "src/web",
+    "src/exports/webClient.ts",
+    "src/types/webTasks.ts",
     "package.json"
   ],
   "type": "module",
@@ -44,11 +67,6 @@
       "import": "./dist/extensions/pi.mjs",
       "require": "./dist/extensions/pi.cjs"
     },
-    "./extensions/doom": {
-      "types": "./dist/extensions/doom.d.mts",
-      "import": "./dist/extensions/doom.mjs",
-      "require": "./dist/extensions/doom.cjs"
-    },
     "./logSinkTelemetry": {
       "types": "./dist/logSinkTelemetry.d.mts",
       "import": "./dist/logSinkTelemetry.mjs",
@@ -114,6 +132,11 @@
       "import": "./dist/tool/taskTool.mjs",
       "require": "./dist/tool/taskTool.cjs"
     },
+    "./web-hub": {
+      "types": "./dist/webHub.d.mts",
+      "import": "./dist/webHub.mjs",
+      "require": "./dist/webHub.cjs"
+    },
     "./tui/format": {
       "types": "./dist/tui/format.d.mts",
       "import": "./dist/tui/format.mjs",
@@ -141,23 +164,30 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "typebox": "1.1.38",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.6",
-    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.6",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.6"
+    "@deepseek-ai/cordis": "4.0.2",
+    "typebox": "1.3.25",
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.63",
+    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.62",
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.64",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.26",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.23"
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "0.84.1",
-    "@earendil-works/pi-tui": "0.84.1",
-    "@types/node": "26.1.1",
-    "@vitest/coverage-v8": "4.1.10",
-    "tsdown": "0.22.14",
-    "typescript": "6.0.3",
-    "vitest": "4.1.10"
+    "@earendil-works/pi-coding-agent": "0.85.1",
+    "@earendil-works/pi-tui": "0.85.1",
+    "@tanstack/react-store": "0.11.1",
+    "@tanstack/store": "0.11.1",
+    "@types/node": "26.4.1",
+    "@types/react": "19.2.18",
+    "@vitest/coverage-v8": "5.0.0",
+    "react": "19.2.8",
+    "tsdown": "0.23.0",
+    "typescript": "7.0.2",
+    "vitest": "5.0.0"
   },
   "peerDependencies": {
-    "@earendil-works/pi-coding-agent": "0.84.1",
-    "@earendil-works/pi-tui": "0.84.1"
+    "@earendil-works/pi-coding-agent": "0.85.1",
+    "@earendil-works/pi-tui": "0.85.1"
   },
   "peerDependenciesMeta": {
     "@earendil-works/pi-coding-agent": {
@@ -170,6 +200,17 @@
   "engines": {
     "node": ">=22.19.0"
   },
+  "doompiWeb": {
+    "pluginId": "task",
+    "channels": [
+      "task_graph"
+    ],
+    "client": "./src/exports/webClient.ts",
+    "hub": {
+      "entry": "./src/exports/webHub.ts",
+      "dist": "./dist/webHub.mjs"
+    }
+  },
   "pi": {
     "extensions": [
       "./dist/extensions/pi.mjs"
@@ -178,7 +219,7 @@
   "scripts": {
     "build": "tsdown",
     "test": "vitest --run",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p src/web/tsconfig.json",
     "lint": "oxlint . && oxfmt . --check",
     "fixcode": "oxlint . --fix && oxfmt ."
   }

package/src/exports/webClient.ts

@@ -0,0 +1 @@
+export { webPlugin } from '../web/index.ts';

package/src/types/webTasks.ts

@@ -0,0 +1,24 @@
+/** Browser-safe task view published by the cockpit hub channel. */
+export const TASKS_CHANNEL_TYPE = 'task_graph';
+
+export type WebTaskStatus = 'pending' | 'in_progress' | 'completed' | 'failed' | 'deleted';
+
+export interface WebTask {
+  id: number;
+  subject: string;
+  description?: string;
+  activeForm?: string;
+  status: WebTaskStatus;
+  blockedBy: number[];
+  owner?: string;
+  updatedAt?: string;
+  delegation?: {
+    agent?: string;
+    state?: string;
+  };
+}
+
+export interface WebTasksPayload {
+  tasks: WebTask[];
+  rev: number;
+}

package/src/web/components/TaskDetailDialog.tsx

@@ -0,0 +1,250 @@
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea,
+} from '@agimon-ai/doompi-web-components';
+import type { SessionFrameSender } from '@agimon-ai/doompi-web-contracts';
+import { type ReactNode, useState } from 'react';
+import type { WebTask, WebTaskStatus } from '../../types/webTasks.ts';
+import { requestTaskEdit, requestTaskMessage, taskEditDraft, type TaskEditDraft } from '../stores/tasksStore.ts';
+
+/** How the one task dialog is opened: reading it, changing it, or steering its run. */
+export type TaskDialogMode = 'view' | 'edit' | 'message';
+
+const STATUS_CHOICES: readonly WebTaskStatus[] = ['pending', 'in_progress', 'completed', 'failed'];
+const DESCRIPTION_ROWS = 5;
+const MESSAGE_ROWS = 4;
+
+function FieldLabel({ children }: { children: string }) {
+  return <span className="text-[9px] font-bold tracking-[0.18em] text-doom-faint">{children}</span>;
+}
+
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <FieldLabel>{label}</FieldLabel>
+      {children}
+    </div>
+  );
+}
+
+function ReadOnlyValue({ value, testId }: { value: string; testId: string }) {
+  return (
+    <span data-testid={testId} className="whitespace-pre-wrap break-words text-[11px] leading-relaxed text-doom-dim">
+      {value}
+    </span>
+  );
+}
+
+function TaskFacts({ task }: { task: WebTask }) {
+  return (
+    <div className="flex flex-wrap gap-5">
+      <Field label="STATUS">
+        <ReadOnlyValue testId="task-detail-status" value={task.status.replace('_', ' ')} />
+      </Field>
+      {task.activeForm ? (
+        <Field label="ACTIVE FORM">
+          <ReadOnlyValue testId="task-detail-active-form" value={task.activeForm} />
+        </Field>
+      ) : null}
+      {task.owner ? (
+        <Field label="OWNER">
+          <ReadOnlyValue testId="task-detail-owner" value={task.owner} />
+        </Field>
+      ) : null}
+      {task.delegation?.agent ? (
+        <Field label="DELEGATED TO">
+          <ReadOnlyValue
+            testId="task-detail-agent"
+            value={
+              task.delegation.state ? `${task.delegation.agent} · ${task.delegation.state}` : task.delegation.agent
+            }
+          />
+        </Field>
+      ) : null}
+      {task.blockedBy.length > 0 ? (
+        <Field label="BLOCKED BY">
+          <ReadOnlyValue testId="task-detail-blocked-by" value={task.blockedBy.map((id) => `#${id}`).join(', ')} />
+        </Field>
+      ) : null}
+      {task.updatedAt ? (
+        <Field label="UPDATED">
+          <ReadOnlyValue testId="task-detail-updated" value={task.updatedAt} />
+        </Field>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * One task, read first and changed second. Every change leaves as a prompt the
+ * session can see, so the agent remains the only writer of task state.
+ */
+export function TaskDetailDialog({
+  task,
+  sessionId,
+  mode: initialMode,
+  send,
+  onClose,
+}: {
+  task: WebTask;
+  sessionId: string;
+  mode: TaskDialogMode;
+  send: SessionFrameSender;
+  onClose: () => void;
+}) {
+  const [mode, setMode] = useState<TaskDialogMode>(initialMode);
+  const [draft, setDraft] = useState<TaskEditDraft>(() => taskEditDraft(task));
+  const [message, setMessage] = useState('');
+  const agent = task.delegation?.agent;
+
+  const submitEdit = (): void => {
+    if (requestTaskEdit(send, sessionId, task, draft)) onClose();
+  };
+  const submitMessage = (): void => {
+    if (!message.trim() || !agent) return;
+    requestTaskMessage(send, sessionId, task.id, agent, message);
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent width="lg" data-testid="task-detail-dialog" data-mode={mode} aria-describedby={undefined}>
+        <DialogHeader>
+          <div className="flex min-w-0 flex-col items-start gap-1 sm:flex-row sm:items-center sm:gap-2.5">
+            <span className="text-[9px] text-doom-faint">task #{task.id}</span>
+            <DialogTitle data-testid="task-detail-title" className="max-w-full break-words">
+              {task.subject}
+            </DialogTitle>
+          </div>
+        </DialogHeader>
+        <DialogBody>
+          {mode === 'view' ? (
+            <>
+              <Field label="DESCRIPTION">
+                <ReadOnlyValue
+                  testId="task-detail-description"
+                  value={task.description ?? 'no description on this task'}
+                />
+              </Field>
+              <TaskFacts task={task} />
+              <DialogFooter>
+                <span className="min-w-0 flex-1" />
+                {agent ? (
+                  <Button
+                    variant="outline"
+                    size="xs"
+                    data-testid="task-detail-open-message"
+                    onClick={() => setMode('message')}
+                  >
+                    message agent
+                  </Button>
+                ) : null}
+                <Button variant="primary" size="xs" data-testid="task-detail-open-edit" onClick={() => setMode('edit')}>
+                  edit
+                </Button>
+              </DialogFooter>
+            </>
+          ) : null}
+
+          {mode === 'edit' ? (
+            <>
+              <Field label="SUBJECT">
+                <Input
+                  data-testid="task-detail-subject-input"
+                  autoFocus
+                  value={draft.subject}
+                  onChange={(event) => setDraft({ ...draft, subject: event.target.value })}
+                />
+              </Field>
+              <Field label="DESCRIPTION">
+                <Textarea
+                  data-testid="task-detail-description-input"
+                  rows={DESCRIPTION_ROWS}
+                  value={draft.description}
+                  placeholder="what this task covers"
+                  onChange={(event) => setDraft({ ...draft, description: event.target.value })}
+                />
+              </Field>
+              <Field label="STATUS">
+                <Select
+                  value={draft.status}
+                  onValueChange={(value) => setDraft({ ...draft, status: value as WebTaskStatus })}
+                >
+                  <SelectTrigger
+                    data-testid="task-detail-status-input"
+                    className="h-7 w-full min-w-0 text-[10px] sm:min-w-[200px]"
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {STATUS_CHOICES.map((status) => (
+                      <SelectItem key={status} value={status}>
+                        {status.replace('_', ' ')}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+              <DialogFooter className="flex-wrap sm:flex-nowrap">
+                <span className="w-full text-[9px] text-doom-faint sm:w-auto">
+                  saved as one prompt naming only the fields you changed
+                </span>
+                <span className="min-w-0 flex-1" />
+                <Button variant="outline" size="xs" data-testid="task-detail-cancel" onClick={onClose}>
+                  cancel
+                </Button>
+                <Button variant="primary" size="xs" data-testid="task-detail-save" onClick={submitEdit}>
+                  save
+                </Button>
+              </DialogFooter>
+            </>
+          ) : null}
+
+          {mode === 'message' && agent ? (
+            <>
+              <Field label={`MESSAGE TO ${agent.toUpperCase()}`}>
+                <Textarea
+                  data-testid="task-detail-message-input"
+                  autoFocus
+                  rows={MESSAGE_ROWS}
+                  value={message}
+                  placeholder="guidance for the run working on this task"
+                  onChange={(event) => setMessage(event.target.value)}
+                />
+              </Field>
+              <DialogFooter className="flex-wrap sm:flex-nowrap">
+                <span className="w-full text-[9px] text-doom-faint sm:w-auto">
+                  steers the run, it does not edit the task
+                </span>
+                <span className="min-w-0 flex-1" />
+                <Button variant="outline" size="xs" data-testid="task-detail-cancel" onClick={onClose}>
+                  cancel
+                </Button>
+                <Button variant="primary" size="xs" data-testid="task-detail-send" onClick={submitMessage}>
+                  send
+                </Button>
+              </DialogFooter>
+            </>
+          ) : null}
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/TaskToolMessage.tsx

@@ -0,0 +1,119 @@
+import {
+  MessageItem,
+  MessageItemBody,
+  MessageItemHeader,
+  MessageItemStatus,
+  type StatusTone,
+  toolTone,
+} from '@agimon-ai/doompi-web-components';
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-web-contracts';
+import {
+  STATUS_LABEL,
+  type TaskResultTone,
+  type TaskRow,
+  type TaskStatus,
+  taskCallView,
+  taskResultView,
+} from '../lib/taskToolFormat.ts';
+
+const STATUS_TONE: Record<TaskStatus, string> = {
+  pending: 'text-doom-dim',
+  in_progress: 'text-doom-yellow',
+  completed: 'text-doom-green',
+  failed: 'text-doom-red',
+  deleted: 'text-doom-faint',
+};
+
+const RESULT_TONE: Record<TaskResultTone, StatusTone> = {
+  running: 'running',
+  ok: 'ok',
+  error: 'error',
+  warning: 'running',
+};
+
+/** One task row: status glyph, id, subject and chips on the left, the status label flushed right. */
+function TaskRowLine({ row }: { row: TaskRow }) {
+  return (
+    <li data-testid="tool-result-task-row" data-task-id={row.id} className="flex items-baseline gap-2">
+      <span className={`shrink-0 ${STATUS_TONE[row.status]}`}>{row.glyph}</span>
+      <span className="shrink-0 text-doom-faint">#{row.id}</span>
+      <span
+        className={`min-w-0 flex-1 truncate ${row.closed ? 'text-doom-faint line-through' : row.status === 'in_progress' ? 'text-doom-blue' : 'text-doom-text'}`}
+      >
+        {row.subject}
+        {row.agent ? <span className="text-doom-faint"> [{row.agent}]</span> : null}
+        {row.activeForm ? <span className="text-doom-faint"> ({row.activeForm})</span> : null}
+        {row.blockedBy.length > 0 ? (
+          <span className="text-doom-faint"> ⛓ {row.blockedBy.map((id) => `#${id}`).join(',')}</span>
+        ) : null}
+      </span>
+      <span className={`shrink-0 ${STATUS_TONE[row.status]}`}>{STATUS_LABEL[row.status]}</span>
+    </li>
+  );
+}
+
+/**
+ * The task tool's timeline item: `glyph action subject` with the assignee or
+ * list filter in the header, as renderTaskCall shows it; the rows the action
+ * touched, then the batch or list summary, in the body, as renderTaskResult
+ * lays it out.
+ */
+export function TaskToolMessage({ args, result, output, running, isError }: ToolMessageRenderProps) {
+  const call = taskCallView(args);
+  const collapsed = taskResultView({ details: result?.details, output, expanded: false, isPartial: running, isError });
+  const full = taskResultView({ details: result?.details, output, expanded: true, isPartial: running, isError });
+  const hidden = full.rows.length - collapsed.rows.length + (full.errorLines.length - collapsed.errorLines.length);
+  return (
+    <MessageItem tone={toolTone({ running, isError })} expandable={hidden > 0}>
+      {({ expanded }) => {
+        const view = expanded ? full : collapsed;
+        const empty = view.rows.length === 0 && view.errorLines.length === 0 && view.status === null;
+        return (
+          <>
+            <MessageItemHeader title="task">
+              <span data-testid="tool-call-task" className="flex min-w-0 flex-1 items-center gap-1.5">
+                <span className="shrink-0 text-doom-text">
+                  {call.glyph} {call.action}
+                </span>
+                {call.subject ? (
+                  <span
+                    className={`min-w-0 truncate ${call.subjectTone === 'accent' ? 'text-doom-blue' : 'text-doom-dim'}`}
+                  >
+                    {call.subject}
+                  </span>
+                ) : null}
+                {call.detail ? <span className="shrink-0 text-doom-faint">{call.detail}</span> : null}
+              </span>
+            </MessageItemHeader>
+            {empty ? null : (
+              <MessageItemBody data-testid="tool-result-task" className="flex flex-col gap-1">
+                {view.rows.length > 0 ? (
+                  <ul className="flex flex-col gap-0.5">
+                    {view.rows.map((row) => (
+                      <TaskRowLine key={row.id} row={row} />
+                    ))}
+                  </ul>
+                ) : null}
+                {view.errorLines.length > 0 ? (
+                  <pre className="whitespace-pre-wrap break-words font-mono text-doom-dim">
+                    {view.errorLines.join('\n')}
+                  </pre>
+                ) : null}
+                {!expanded && hidden > 0 ? <MessageItemStatus expands>{hidden} more</MessageItemStatus> : null}
+                {view.status ? (
+                  <MessageItemStatus
+                    data-testid="tool-result-task-status"
+                    tone={RESULT_TONE[view.status.tone]}
+                    glyph={view.status.glyph}
+                  >
+                    {view.status.text}
+                  </MessageItemStatus>
+                ) : null}
+              </MessageItemBody>
+            )}
+          </>
+        );
+      }}
+    </MessageItem>
+  );
+}