Merge pull request #7 from httpsphl/feat/m4-messages

M4 (3/3): timelines, failed deliveries, tasks and the taskbar mark

Author: httpsphl

app/src-tauri/capabilities/default.json

@@ -2,12 +2,15 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "Capability for the main window",
-  "windows": ["main"],
+  "windows": [
+    "main"
+  ],
   "permissions": [
     "core:default",
     "core:window:allow-start-dragging",
     "core:window:allow-minimize",
     "core:window:allow-toggle-maximize",
-    "core:window:allow-close"
+    "core:window:allow-close",
+    "core:window:allow-set-overlay-icon"
   ]
 }

app/src/dev/preview.ts

@@ -61,6 +61,7 @@ function seed(fake: FakeBotloft): void {
   fake.setBotState(analyst.id, "rate_limited", 1);
   fake.terminals.output(scout.id, SCOUT_SCREEN);
   fake.terminals.output(reviewer.id, PROMPT_SCREEN);
+  conversation(fake, scout.id, writer.id, reviewer.id);
   const ops = fake.addCrew("Ops");
   const deploy = fake.addBot(ops.id, "Deploy", "Ships the site on Fridays");
   const watcher = fake.addBot(ops.id, "Watcher", "Keeps an eye on the error log");
@@ -69,6 +70,54 @@ function seed(fake: FakeBotloft): void {
   fake.setBotState(watcher.id, "offline");
 }
 
+/** A morning's worth of messages and tasks between three bots. */
+function conversation(fake: FakeBotloft, scout: string, writer: string, reviewer: string): void {
+  const talk = fake.conversation;
+  void fake.call("messages.send", {
+    botId: scout,
+    body: "Summarize the three newest papers in shared/inbox.",
+  });
+  const owner = [...talk.deliveries.values()].at(-1);
+  if (owner) {
+    talk.deliver(owner.id, "sent");
+  }
+  const summary = talk.task(scout, writer, {
+    status: "done",
+    result: "Draft in shared/drafts/week-39.md, 2 pages.",
+  });
+  const asked = talk.say({
+    from: scout,
+    to: writer,
+    kind: "task",
+    taskId: summary.id,
+    body: "Turn shared/summaries/week-39.md into this week's report draft.",
+  });
+  talk.deliver(asked.delivery.id, "sent");
+  const done = talk.say({
+    from: writer,
+    to: scout,
+    kind: "result",
+    taskId: summary.id,
+    body: "Draft in shared/drafts/week-39.md, 2 pages.",
+  });
+  talk.deliver(done.delivery.id, "sent");
+  const review = talk.task(writer, reviewer, { hops: 2 });
+  const check = talk.say({
+    from: writer,
+    to: reviewer,
+    kind: "task",
+    taskId: review.id,
+    body: "Check the numbers in section 2 against the sources.",
+  });
+  talk.deliver(check.delivery.id, "sent");
+  const late = talk.say({
+    from: scout,
+    to: reviewer,
+    body: "Two of the links in the draft moved; the new ones are in shared/links.md.",
+  });
+  talk.deliver(late.delivery.id, "dead", "the bot's inbox did not answer in 10 s");
+}
+
 const ESC = String.fromCharCode(27);
 const NEWLINE = String.fromCharCode(13, 10);
 const dim = (text: string) => `${ESC}[2m${text}${ESC}[0m`;

app/src/features/bots/BotView.tsx

@@ -2,14 +2,17 @@ import { useEffect, useState } from "react";
 import type { Bot, Crew } from "../../lib/protocol.gen";
 import { Callout } from "../../ui/Callout";
 import { Tabs, tabId } from "../../ui/Tabs";
+import { Composer } from "../messages/Composer";
+import { Timeline } from "../messages/Timeline";
 import { TerminalView } from "../terminal/TerminalView";
 import { BotHeader } from "./BotHeader";
 import { stateView } from "./BotStateBadge";
 
-type Pane = "terminal" | "details";
+type Pane = "terminal" | "messages" | "details";
 
 const TABS: { id: Pane; label: string }[] = [
   { id: "terminal", label: "Terminal" },
+  { id: "messages", label: "Messages" },
   { id: "details", label: "Details" },
 ];
 
@@ -57,6 +60,19 @@ export function BotView({ bot, crew }: { bot: Bot; crew: Crew }) {
           <TerminalView botId={bot.id} />
         )}
       </div>
+      {pane === "messages" && (
+        <div
+          role="tabpanel"
+          aria-labelledby={tabId("messages")}
+          className="flex min-h-0 flex-1 flex-col"
+        >
+          <Timeline
+            filter={{ botId: bot.id }}
+            empty={`No messages to or from ${bot.name} yet.`}
+            composer={(onSent) => <Composer crewId={crew.id} botId={bot.id} onSent={onSent} />}
+          />
+        </div>
+      )}
       {pane === "details" && (
         <div
           role="tabpanel"

app/src/features/crews/CrewBots.tsx

@@ -0,0 +1,49 @@
+import { Plus } from "lucide-react";
+import type { Bot, Crew } from "../../lib/protocol.gen";
+import { useApp } from "../../store/context";
+import { Button } from "../../ui/Button";
+import { BotAvatar } from "../bots/BotAvatar";
+import { BotStateBadge } from "../bots/BotStateBadge";
+
+/** The crew's bots as cards; a card opens the bot. */
+export function CrewBots({ crew, bots, onNewBot }: { crew: Crew; bots: Bot[]; onNewBot(): void }) {
+  const selectBot = useApp((state) => state.selectBot);
+  if (bots.length === 0) {
+    return (
+      <div className="border border-line border-dashed px-6 py-10 text-center">
+        <p className="font-medium">No bots in {crew.name} yet.</p>
+        <p className="mt-1 text-muted text-sm">
+          A bot is a Claude Code session that keeps running, with its own folder and role.
+        </p>
+        <Button className="mt-4" variant="primary" icon={Plus} onClick={onNewBot}>
+          New bot
+        </Button>
+      </div>
+    );
+  }
+  return (
+    <ul className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-3">
+      {bots.map((bot) => (
+        <li key={bot.id}>
+          <button
+            type="button"
+            onClick={() => selectBot(bot.id)}
+            className="flex h-full w-full flex-col gap-2 border border-line bg-panel p-3 text-left hover:border-line-strong"
+          >
+            <div className="flex w-full items-center gap-2.5">
+              <BotAvatar color={bot.color} size={32} />
+              <div className="min-w-0 flex-1">
+                <p className="truncate font-semibold">{bot.name}</p>
+                <p className="truncate font-mono text-muted text-xs">@{bot.handle}</p>
+              </div>
+            </div>
+            <p className="line-clamp-2 min-h-10 text-ink-soft text-sm">
+              {bot.role || "No role yet."}
+            </p>
+            <BotStateBadge bot={bot} crewPaused={crew.paused} />
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}

app/src/features/crews/CrewView.tsx

@@ -7,10 +7,13 @@ import { useApi, useApp, useHost } from "../../store/context";
 import { Button } from "../../ui/Button";
 import { Confirm } from "../../ui/Confirm";
 import { Menu } from "../../ui/Menu";
+import { type Tab, Tabs, tabId } from "../../ui/Tabs";
 import { attempt } from "../../ui/toast";
-import { BotAvatar } from "../bots/BotAvatar";
 import { BotDialog } from "../bots/BotDialog";
-import { BotStateBadge } from "../bots/BotStateBadge";
+import { Composer } from "../messages/Composer";
+import { Timeline } from "../messages/Timeline";
+import { TaskList } from "../tasks/TaskList";
+import { CrewBots } from "./CrewBots";
 import { CrewDialog } from "./CrewDialog";
 
 /** The crew's `shared` folder, next to its bots' workspaces (spec 5). */
@@ -20,14 +23,21 @@ export function sharedFolder(bots: Bot[]): string | null {
 }
 
 type Open = "bot" | "rename" | "archive" | null;
+type Pane = "bots" | "timeline" | "tasks";
+
+const TABS: Tab<Pane>[] = [
+  { id: "bots", label: "Bots" },
+  { id: "timeline", label: "Timeline" },
+  { id: "tasks", label: "Tasks" },
+];
 
 export function CrewView({ crew }: { crew: Crew }) {
   const api = useApi();
   const host = useHost();
   const putCrew = useApp((state) => state.putCrew);
-  const selectBot = useApp((state) => state.selectBot);
   const bots = useApp(useShallow((state) => botsOf(state, crew.id)));
   const [open, setOpen] = useState<Open>(null);
+  const [pane, setPane] = useState<Pane>("bots");
   const shared = sharedFolder(bots);
   const close = () => setOpen(null);
 
@@ -38,7 +48,7 @@ export function CrewView({ crew }: { crew: Crew }) {
 
   return (
     <section aria-label={crew.name} className="flex min-h-0 flex-1 flex-col">
-      <header className="flex items-center gap-3 border-line border-b px-6 py-4">
+      <header className="flex items-center gap-3 border-line border-b px-5 py-3.5">
         <div className="min-w-0 flex-1">
           <h1 className="truncate font-semibold text-xl tracking-tight">{crew.name}</h1>
           <p className="mt-0.5 text-muted text-sm">
@@ -80,43 +90,38 @@ export function CrewView({ crew }: { crew: Crew }) {
         />
       </header>
 
-      <div className="min-h-0 flex-1 overflow-y-auto p-6">
-        {bots.length === 0 ? (
-          <div className="border border-line border-dashed px-6 py-10 text-center">
-            <p className="font-medium">No bots in {crew.name} yet.</p>
-            <p className="mt-1 text-muted text-sm">
-              A bot is a Claude Code session that keeps running, with its own folder and role.
-            </p>
-            <Button className="mt-4" variant="primary" icon={Plus} onClick={() => setOpen("bot")}>
-              New bot
-            </Button>
-          </div>
-        ) : (
-          <ul className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-3">
-            {bots.map((bot) => (
-              <li key={bot.id}>
-                <button
-                  type="button"
-                  onClick={() => selectBot(bot.id)}
-                  className="flex h-full w-full flex-col gap-2 border border-line bg-panel p-3 text-left hover:border-line-strong"
-                >
-                  <div className="flex w-full items-center gap-2.5">
-                    <BotAvatar color={bot.color} size={32} />
-                    <div className="min-w-0 flex-1">
-                      <p className="truncate font-semibold">{bot.name}</p>
-                      <p className="truncate font-mono text-muted text-xs">@{bot.handle}</p>
-                    </div>
-                  </div>
-                  <p className="line-clamp-2 min-h-10 text-ink-soft text-sm">
-                    {bot.role || "No role yet."}
-                  </p>
-                  <BotStateBadge bot={bot} crewPaused={crew.paused} />
-                </button>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
+      <Tabs<Pane> label="Crew views" tabs={TABS} value={pane} onChange={setPane} />
+      {pane === "bots" && (
+        <div
+          role="tabpanel"
+          aria-labelledby={tabId("bots")}
+          className="min-h-0 flex-1 overflow-y-auto p-5"
+        >
+          <CrewBots crew={crew} bots={bots} onNewBot={() => setOpen("bot")} />
+        </div>
+      )}
+      {pane === "timeline" && (
+        <div
+          role="tabpanel"
+          aria-labelledby={tabId("timeline")}
+          className="flex min-h-0 flex-1 flex-col"
+        >
+          <Timeline
+            filter={{ crewId: crew.id }}
+            empty="No messages yet. Write to a bot below; what the bots send each other shows up here too."
+            composer={(onSent) => <Composer crewId={crew.id} onSent={onSent} />}
+          />
+        </div>
+      )}
+      {pane === "tasks" && (
+        <div
+          role="tabpanel"
+          aria-labelledby={tabId("tasks")}
+          className="flex min-h-0 flex-1 flex-col"
+        >
+          <TaskList crewId={crew.id} />
+        </div>
+      )}
 
       {open === "bot" && <BotDialog crewId={crew.id} onClose={close} />}
       {open === "rename" && <CrewDialog crew={crew} onClose={close} />}