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

package/src/web/components/TaskDetailDialog.tsx

@@ -1,251 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,200 +0,0 @@
-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>
-  );
-}