update

src/renderer/components/execution/TaskInspectorActivity.tsx

@@ -0,0 +1,166 @@
+import { useEffect, useMemo, useState } from "react"
+import type { CommentRecord, ProfileSnapshot, RunRecord } from "@shared/types"
+import { useT } from "../../i18n"
+import { formatMoney, formatTime } from "../../lib/formatters"
+import { unwrap } from "../../lib/desktop"
+import { ActionButton, InlineNotice, StatusPill } from "../ui"
+import { MarkdownBody } from "../ui/MarkdownBody"
+import { ArrowRight } from "../ui/icons"
+import { describeActionError } from "./execution-utils"
+
+type ActivityFilter = "all" | "comments" | "runs"
+
+export function TaskInspectorActivity({
+  taskId, companyId, agents, comments, runs, onRefresh,
+}: {
+  taskId: string
+  companyId: string
+  agents: ProfileSnapshot["agents"]
+  comments: CommentRecord[]
+  runs: RunRecord[]
+  onRefresh: () => Promise<void>
+}) {
+  const t = useT()
+  const [filter, setFilter] = useState<ActivityFilter>("all")
+  const [newComment, setNewComment] = useState("")
+  const [submitting, setSubmitting] = useState(false)
+  const [submitError, setSubmitError] = useState<string | null>(null)
+  const agentMap = useMemo(() => new Map(agents.map((a) => [a.id, a])), [agents])
+
+  useEffect(() => {
+    const unsubscribe = window.agentCompany.subscribe((event) => {
+      if (event.type === "agent-message" && event.taskId === taskId) void onRefresh()
+    })
+    return unsubscribe
+  }, [onRefresh, taskId])
+
+  const handleSubmit = async () => {
+    if (!newComment.trim()) return
+    setSubmitError(null); setSubmitting(true)
+    try {
+      unwrap(await window.agentCompany.addComment({ companyId, taskId, authorName: "Board", body: newComment.trim() }))
+      setNewComment("")
+      await onRefresh()
+    } catch (e) {
+      setSubmitError(describeActionError(e))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  type FeedItem =
+    | { kind: "comment"; ts: number; data: CommentRecord }
+    | { kind: "run"; ts: number; data: RunRecord }
+
+  const feed: FeedItem[] = useMemo(() => {
+    const items: FeedItem[] = []
+    const toMs = (value: string | null) => (value ? Date.parse(value) : 0)
+    if (filter === "all" || filter === "comments") {
+      for (const c of comments) items.push({ kind: "comment", ts: toMs(c.createdAt), data: c })
+    }
+    if (filter === "all" || filter === "runs") {
+      for (const r of runs) items.push({ kind: "run", ts: toMs(r.startedAt ?? r.createdAt), data: r })
+    }
+    items.sort((a, b) => b.ts - a.ts)
+    return items
+  }, [comments, runs, filter])
+
+  const filterBtn = (key: ActivityFilter, label: string) => (
+    <button
+      type="button"
+      onClick={() => setFilter(key)}
+      className={`rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] transition ${
+        filter === key ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:text-foreground"
+      }`}
+    >
+      {label}
+    </button>
+  )
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-2">
+        {filterBtn("all", t("exec.activityAll", "All"))}
+        {filterBtn("comments", t("exec.communication"))}
+        {filterBtn("runs", t("exec.runHistory"))}
+        <span className="ml-auto text-[11px] text-muted-foreground">{feed.length}</span>
+      </div>
+
+      {feed.length === 0 ? (
+        <div className="text-[12px] text-muted-foreground">{t("exec.noMessagesYet")}</div>
+      ) : (
+        <div className="max-h-[320px] space-y-2 overflow-y-auto rounded-lg border border-border p-3">
+          {feed.map((item) => {
+            if (item.kind === "comment") {
+              const c = item.data
+              const isAgent = Boolean(c.authorAgentId)
+              const agent = isAgent ? agentMap.get(c.authorAgentId ?? "") : null
+              return (
+                <div key={`c-${c.id}`} className="rounded-md bg-muted px-3 py-2">
+                  <div className="flex items-center gap-2">
+                    <span className={`text-[12px] font-semibold ${isAgent ? "text-primary" : "text-foreground"}`}>{c.authorName}</span>
+                    {agent && <span className="text-[10px] text-muted-foreground">{agent.role}</span>}
+                    <span className="text-[10px] text-muted-foreground">{formatTime(c.createdAt)}</span>
+                  </div>
+                  <div className="mt-1 text-[13px] text-foreground"><MarkdownBody body={c.body} /></div>
+                </div>
+              )
+            }
+            const run = item.data
+            const runAgent = agentMap.get(run.agentId)
+            const isActive = run.status === "running" || run.status === "queued"
+            const needsAttention = run.status === "failed" || run.status === "timed_out"
+            // Two tiers only: resting (default border + muted bg) vs attention
+            // (destructive border + muted bg). Active runs earn a pulsing dot,
+            // not a third border color — less rhythm, more signal.
+            return (
+              <div
+                key={`r-${run.id}`}
+                className={`rounded-lg border px-3 py-2.5 bg-muted ${
+                  needsAttention ? "border-destructive" : "border-border"
+                }`}
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      {isActive ? <span className="h-2 w-2 animate-pulse rounded-full bg-success" /> : null}
+                      <span className="truncate text-[13px] font-medium text-foreground">
+                        {run.summary || (isActive ? t("exec.runningEllipsis") : t("exec.completedRun"))}
+                      </span>
+                    </div>
+                    <div className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-[10px] text-muted-foreground">
+                      {runAgent ? <span>{runAgent.name}</span> : null}
+                      <span>{run.connectorId.replace("_local", "")}</span>
+                      {run.model ? <span className="font-mono">{run.model}</span> : null}
+                      <span>{formatTime(run.startedAt)}</span>
+                      {run.costUsd != null && run.costUsd > 0 ? <span className="font-mono tabular-nums">{formatMoney(run.costUsd)}</span> : null}
+                    </div>
+                  </div>
+                  <StatusPill status={run.status} />
+                </div>
+                {run.errorMessage ? (
+                  <div className="mt-1.5 rounded bg-destructive-muted px-2 py-1 text-[11px] text-destructive break-words">
+                    {run.errorMessage}
+                  </div>
+                ) : null}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {submitError ? <InlineNotice message={submitError} /> : null}
+      <div className="flex gap-2">
+        <input
+          aria-label={t("exec.sendMessage")}
+          className="flex-1 rounded-md border border-border bg-card px-3 py-2 text-[13px] text-foreground placeholder:text-muted-foreground focus:border-[color:var(--primary)] focus:outline-none"
+          placeholder={t("exec.sendMessage")}
+          value={newComment}
+          onChange={(e) => setNewComment(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void handleSubmit() } }}
+        />
+        <ActionButton label={t("exec.send")} tone="accent" onClick={() => void handleSubmit()} icon={ArrowRight} loading={submitting} />
+      </div>
+    </div>
+  )
+}