@agimon-ai/doompi-task 0.0.1-alpha.7 → 0.0.1-alpha.71

package/src/web/components/TaskDetailDialog.tsx

@@ -0,0 +1,251 @@
+import type { SessionFrameSender } from '@agimon-ai/doompi-core/web';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea,
+} from '@agimon-ai/doompi-web-components';
+import { type ReactNode, useState } from 'react';
+
+import type { WebTask, WebTaskStatus } from '../../types/webTasks';
+import { requestTaskEdit, requestTaskMessage, taskEditDraft, type TaskEditDraft } from '../stores/tasksStore';
+
+/** 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-2xs font-bold tracking-widest 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-sm 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-2xs 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-xs 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-2xs 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-2xs 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,120 @@
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-core/web';
+import {
+  MessageItem,
+  MessageItemBody,
+  MessageItemHeader,
+  MessageItemStatus,
+  type StatusTone,
+  toolTone,
+} from '@agimon-ai/doompi-web-components';
+
+import {
+  STATUS_LABEL,
+  type TaskResultTone,
+  type TaskRow,
+  type TaskStatus,
+  taskCallView,
+  taskResultView,
+} from '../lib/taskToolFormat';
+
+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>
+  );
+}

package/src/web/components/TasksActivitySection.tsx

@@ -0,0 +1,200 @@
+import type { WebPluginSlotProps } from '@agimon-ai/doompi-core/web';
+import {
+  Button,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  Dot,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EditIcon,
+  KebabIcon,
+  MessageIcon,
+  TrashIcon,
+  type DotTone,
+} from '@agimon-ai/doompi-web-components';
+import { useStore } from '@tanstack/react-store';
+import { useState } from 'react';
+
+import type { WebTask } from '../../types/webTasks';
+import { requestTaskRemoval, tasks } from '../stores/tasksStore';
+import { TaskDetailDialog, type TaskDialogMode } from './TaskDetailDialog';
+
+const STATUS_TONE: Readonly<Record<WebTask['status'], DotTone>> = {
+  pending: 'muted',
+  in_progress: 'yellow',
+  completed: 'green',
+  failed: 'red',
+  deleted: 'muted',
+};
+
+interface DialogState {
+  taskId: number;
+  mode: TaskDialogMode;
+}
+
+function TaskRow({
+  task,
+  sessionId,
+  sendSessionFrame,
+  openDialog,
+}: {
+  task: WebTask;
+  sessionId: string;
+  sendSessionFrame: WebPluginSlotProps['sendSessionFrame'];
+  openDialog: (mode: TaskDialogMode) => void;
+}) {
+  const detail = task.status === 'in_progress' ? task.activeForm : task.description;
+  const agent = task.delegation?.agent;
+  return (
+    <div
+      data-testid={`activity-task-${task.id}`}
+      data-task-status={task.status}
+      className="flex flex-col gap-1 rounded-md px-1 py-1"
+    >
+      <div className="grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-1.5">
+        <Dot tone={STATUS_TONE[task.status]} pulse={task.status === 'in_progress'} />
+        <button
+          type="button"
+          data-testid={`activity-task-title-${task.id}`}
+          title={task.subject}
+          onClick={() => openDialog('view')}
+          className={`min-w-0 truncate text-left text-xs font-bold hover:underline ${task.status === 'failed' ? 'text-doom-red' : task.status === 'completed' ? 'text-doom-dim' : 'text-doom-hi'}`}
+        >
+          <span className="text-doom-faint">#{task.id}</span> {task.subject}
+        </button>
+        <span className="shrink-0 text-2xs text-doom-faint">{task.status.replace('_', ' ')}</span>
+        {task.status !== 'completed' && task.status !== 'deleted' ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                data-testid={`activity-task-menu-${task.id}`}
+                aria-label={`task #${task.id} actions`}
+                title={`task #${task.id} actions`}
+                className="self-center shrink-0 text-doom-faint hover:bg-doom-deep hover:text-doom-hi data-[state=open]:bg-doom-deep data-[state=open]:text-doom-hi"
+              >
+                <KebabIcon className="h-3 w-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent data-testid={`activity-task-menu-list-${task.id}`}>
+              <DropdownMenuItem data-testid={`activity-task-edit-${task.id}`} onSelect={() => openDialog('edit')}>
+                <EditIcon className="h-3 w-3" />
+                Edit
+              </DropdownMenuItem>
+              {agent ? (
+                <DropdownMenuItem
+                  data-testid={`activity-task-message-${task.id}`}
+                  onSelect={() => openDialog('message')}
+                >
+                  <MessageIcon className="h-3 w-3" />
+                  Message agent
+                </DropdownMenuItem>
+              ) : null}
+              <DropdownMenuItem
+                variant="destructive"
+                data-testid={`activity-task-remove-${task.id}`}
+                onSelect={() => requestTaskRemoval(sendSessionFrame, sessionId, task.id)}
+              >
+                <TrashIcon className="h-3 w-3" />
+                Remove
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
+      </div>
+      {detail || agent || task.blockedBy.length > 0 ? (
+        <span className="truncate pl-3 text-2xs text-doom-faint">
+          {agent ? `[${agent}] ` : ''}
+          {detail ?? ''}
+          {task.blockedBy.length > 0 ? ` · blocked by ${task.blockedBy.map((id) => `#${id}`).join(', ')}` : ''}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+/** Session task graph in the activity dock. Empty graphs have no cockpit presence. */
+export function TasksActivitySection({ sessionId, sendSessionFrame }: WebPluginSlotProps) {
+  const sessionTasks = useStore(tasks.store, (state) => tasks.select(state, sessionId).tasks);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const [dialog, setDialog] = useState<DialogState>();
+  if (sessionId === null || sessionTasks.length === 0) return null;
+
+  const active = sessionTasks.filter((task) => task.status === 'pending' || task.status === 'in_progress');
+  const history = sessionTasks.filter((task) => task.status === 'completed' || task.status === 'failed');
+  const dialogTask = dialog ? sessionTasks.find((task) => task.id === dialog.taskId) : undefined;
+  return (
+    <section data-testid="activity-tasks" className="flex flex-col gap-2 border-b border-doom-border-soft px-3 py-3">
+      <div className="flex items-center gap-2 px-1">
+        <span
+          aria-hidden
+          className={
+            active.length > 0 ? 'animate-pulse text-sm font-bold text-doom-yellow' : 'text-sm font-bold text-doom-faint'
+          }
+        >
+          #
+        </span>
+        <span className="flex-1 text-sm font-bold text-doom-text">tasks</span>
+        <span className="text-2xs text-doom-faint">{active.length} active</span>
+      </div>
+      {active.length > 0 ? (
+        <div className="flex flex-col gap-0.5">
+          {active.map((task) => (
+            <TaskRow
+              key={task.id}
+              task={task}
+              sessionId={sessionId}
+              sendSessionFrame={sendSessionFrame}
+              openDialog={(mode) => setDialog({ taskId: task.id, mode })}
+            />
+          ))}
+        </div>
+      ) : null}
+      {history.length > 0 ? (
+        <div className="flex flex-col gap-0.5">
+          <Button
+            variant="ghost"
+            size="xs"
+            aria-expanded={historyOpen}
+            onClick={() => setHistoryOpen((open) => !open)}
+            className="justify-start gap-1.5 rounded-md px-1 py-0.5 hover:bg-doom-panel"
+          >
+            {historyOpen ? (
+              <ChevronDownIcon className="h-2.5 w-2.5 text-doom-faint" />
+            ) : (
+              <ChevronRightIcon className="h-2.5 w-2.5 text-doom-faint" />
+            )}
+            <span className="text-xs font-bold text-doom-dim">session</span>
+            <span className="text-2xs text-doom-faint">{history.length}</span>
+          </Button>
+          {historyOpen ? (
+            <div className="flex flex-col gap-0.5 pl-2">
+              {history.map((task) => (
+                <TaskRow
+                  key={task.id}
+                  task={task}
+                  sessionId={sessionId}
+                  sendSessionFrame={sendSessionFrame}
+                  openDialog={(mode) => setDialog({ taskId: task.id, mode })}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+      {dialog && dialogTask ? (
+        <TaskDetailDialog
+          key={`${dialogTask.id}-${dialog.mode}`}
+          task={dialogTask}
+          sessionId={sessionId}
+          mode={dialog.mode}
+          send={sendSessionFrame}
+          onClose={() => setDialog(undefined)}
+        />
+      ) : null}
+    </section>
+  );
+}