@saadnvd1/agent-os 0.3.603 → 0.3.606

package/app/page.tsx

@@ -65,8 +65,8 @@ import { approvalsModeQuery } from "@/data/approvals";
 
 // The app's dialogs open from their stores, so none is needed for the first
 // paint: their code loads right after it.
-const TasksDialog = dynamic(
-  () => import("@/components/Tasks/TasksDialog").then((m) => m.TasksDialog),
+const InboxDialog = dynamic(
+  () => import("@/components/Inbox/InboxDialog").then((m) => m.InboxDialog),
   { ssr: false }
 );
 const AddProjectDialog = dynamic(
@@ -88,10 +88,6 @@ const WelcomeDialog = dynamic(
     import("@/components/Welcome/WelcomeDialog").then((m) => m.WelcomeDialog),
   { ssr: false }
 );
-const MessagesDialog = dynamic(
-  () => import("@/components/Bus/MessagesDialog").then((m) => m.MessagesDialog),
-  { ssr: false }
-);
 const BookmarksDialog = dynamic(
   () =>
     import("@/components/Bookmarks/BookmarksDialog").then(
@@ -153,10 +149,9 @@ const AppDialogs = memo(function AppDialogs({
 }) {
   return (
     <>
-      <TasksDialog />
+      <InboxDialog />
       <WelcomeDialog notifications={notifications} />
       <AddProjectDialog />
-      <MessagesDialog />
       <ArchivedDialog />
       <BookmarksDialog />
       <ChatBookmarksDialog />

package/components/Bookmarks/ChatBookmarksButton.tsx

@@ -9,11 +9,15 @@ import { bookmarksUiActions } from "@/stores/bookmarksUi";
 export function ChatBookmarksButton({
   sessionId,
   className,
+  hideWhenEmpty,
 }: {
   sessionId: string;
   className?: string;
+  // The desktop bar shows it only once the chat has some.
+  hideWhenEmpty?: boolean;
 }) {
   const { data = [] } = useSessionBookmarks(sessionId);
+  if (hideWhenEmpty && data.length === 0) return null;
   return (
     <button
       type="button"

package/components/Bus/MessagesPanel.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useBusMessages, useBusPeers, useSendMessage } from "@/data/bus";
+import { compactTimeAgo, fromSqliteTime } from "@/lib/session-meta";
+import { cn } from "@/lib/utils";
+
+const ALL = "all";
+
+export function MessagesPanel() {
+  const { data: messages = [], isPending } = useBusMessages();
+  const { data: peers = [] } = useBusPeers();
+  const send = useSendMessage();
+  const { reset } = send;
+  // A delivery result belongs to that send only.
+  useEffect(() => reset, [reset]);
+  const [filter, setFilter] = useState(ALL);
+  const [to, setTo] = useState("");
+  const [body, setBody] = useState("");
+
+  const label = (p: { name: string; projectName: string | null }) =>
+    p.projectName ? `${p.projectName} / ${p.name}` : p.name;
+  const shown = useMemo(
+    () =>
+      filter === ALL
+        ? messages
+        : messages.filter((m) => m.fromId === filter || m.toId === filter),
+    [messages, filter]
+  );
+  const recipient = to || (filter !== ALL ? filter : "");
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-3">
+      <p className="text-muted-foreground text-xs">
+        What your agent sessions are saying to each other. Agents use the{" "}
+        <code className="font-mono text-xs">aos</code> command.
+      </p>
+
+      <Select
+        value={filter}
+        onValueChange={(v) => {
+          send.reset();
+          setFilter(v);
+        }}
+      >
+        <SelectTrigger
+          aria-label="Filter by session"
+          className="w-full sm:w-72"
+        >
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value={ALL}>All sessions</SelectItem>
+          {peers.map((p) => (
+            <SelectItem key={p.id} value={p.id}>
+              {label(p)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <div className="min-h-40 flex-1 space-y-3 overflow-y-auto pr-1">
+        {isPending && (
+          <div className="bg-muted/40 h-16 animate-pulse rounded-xl" />
+        )}
+        {!isPending && shown.length === 0 && (
+          <p className="text-muted-foreground py-8 text-center text-sm">
+            No messages yet.
+          </p>
+        )}
+        {shown.map((m) => (
+          <div key={m.id} className="space-y-1">
+            <div className="flex items-baseline gap-2 text-xs">
+              <span className={cn("font-medium", !m.fromId && "text-primary")}>
+                {m.fromName}
+              </span>
+              <span className="text-muted-foreground/60">→</span>
+              <span className="font-medium">{m.toName}</span>
+              <span className="text-muted-foreground/60 ml-auto font-mono tabular-nums">
+                {compactTimeAgo(fromSqliteTime(m.createdAt))}
+              </span>
+            </div>
+            <p className="bg-foreground/[0.04] rounded-lg px-3 py-2 text-sm whitespace-pre-wrap">
+              {m.body}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          send.mutate(
+            { to: recipient, body },
+            { onSuccess: () => setBody("") }
+          );
+        }}
+        className="space-y-2"
+      >
+        <Select
+          value={recipient}
+          onValueChange={(v) => {
+            send.reset();
+            setTo(v);
+          }}
+        >
+          <SelectTrigger aria-label="Send to">
+            <SelectValue placeholder="Send to a session..." />
+          </SelectTrigger>
+          <SelectContent>
+            {peers.map((p) => (
+              <SelectItem key={p.id} value={p.id}>
+                {label(p)}
+                {!p.running && " (not running)"}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <div className="flex gap-2">
+          <Textarea
+            aria-label="Message"
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            placeholder="Message as you"
+            rows={2}
+            className="min-h-11"
+          />
+          <Button
+            type="submit"
+            disabled={!recipient || !body.trim() || send.isPending}
+          >
+            Send
+          </Button>
+        </div>
+        {send.error && (
+          <p className="text-destructive text-xs">{send.error.message}</p>
+        )}
+        {send.data?.delivery.state === "failed" && (
+          <p className="text-destructive text-xs">
+            Saved to its inbox, but not delivered: {send.data.delivery.why}
+          </p>
+        )}
+      </form>
+    </div>
+  );
+}

package/components/Bus/index.ts

@@ -1,2 +1 @@
-export { MessagesDialog } from "./MessagesDialog";
-export { MessagesButton } from "./MessagesButton";
+export { MessagesPanel } from "./MessagesPanel";

package/components/Chat/ChatPanel.tsx

@@ -59,7 +59,7 @@ import { EventGroup } from "./EventTurns";
 import { useGoToItem } from "./useGoToItem";
 import { NeedsYouStrip } from "@/components/Orchestrator/NeedsYouStrip";
 import { useResolveQuestion } from "@/data/orchestrators";
-import { needsYouFocusActions } from "@/stores/needsYouFocus";
+import { needsYouFocus, needsYouFocusActions } from "@/stores/needsYouFocus";
 import { hrefWithSession } from "@/lib/session-url";
 import { isQuestionTool } from "@/lib/chat/turns";
 import { useViewport } from "@/hooks/useViewport";
@@ -560,6 +560,14 @@ export function ChatPanel({
   const [replyTo, setReplyTo] = useState<{ id: number; text: string } | null>(
     null
   );
+  // "Reply" on a question in the Inbox, once this is that orchestrator's chat.
+  const { reply: pendingReply } = useSnapshot(needsYouFocus);
+  useEffect(() => {
+    if (!pendingReply || pendingReply.workspaceId !== orchestratorOf) return;
+    setReplyTo({ id: pendingReply.id, text: pendingReply.text });
+    setInsert({ text: quoteMarkdown(pendingReply.text), at: Date.now() });
+    needsYouFocusActions.clearReply();
+  }, [pendingReply, orchestratorOf]);
   const find = useFind({
     foldEvents: !!orchestratorOf,
     search,

package/components/CommandPalette/useAppCommands.ts

@@ -10,6 +10,7 @@ import {
   FolderGit2,
   FolderPlus,
   Gauge,
+  Inbox,
   LayoutGrid,
   ListTodo,
   MessageSquare,
@@ -29,10 +30,9 @@ import { recipesUiActions } from "@/stores/recipesUi";
 import { usePaletteCommands } from "@/hooks/usePaletteCommands";
 import { archivedUiActions } from "@/stores/archivedUi";
 import { bookmarksUiActions } from "@/stores/bookmarksUi";
-import { busUiActions } from "@/stores/busUi";
+import { inboxUiActions } from "@/stores/inboxUi";
 import { orchestratorOpenActions } from "@/stores/orchestratorOpen";
 import { sidebarUi, sidebarUiActions } from "@/stores/sidebarUi";
-import { tasksUiActions } from "@/stores/tasksUi";
 import { newDraft } from "@/stores/drafts";
 import { useAddProject } from "@/components/Projects/AddProject/useAddProject";
 import { useAddExistingProject } from "@/components/Projects/AddProject/useAddExistingProject";
@@ -189,12 +189,20 @@ export function useAppCommands({
       icon: Scale,
       run: () => usageUiActions.open("compare"),
     },
+    {
+      id: "app.inbox",
+      title: "Inbox",
+      group: "Go to",
+      keywords: ["needs you", "notifications", "asks", "questions", "waiting"],
+      icon: Inbox,
+      run: () => inboxUiActions.open(),
+    },
     {
       id: "app.tasks",
       title: "Tasks",
       group: "Go to",
       icon: ListTodo,
-      run: tasksUiActions.openPanel,
+      run: () => inboxUiActions.open("tasks"),
     },
     {
       id: "app.messages",
@@ -202,7 +210,7 @@ export function useAppCommands({
       group: "Go to",
       keywords: ["bus", "peers"],
       icon: MessagesSquare,
-      run: busUiActions.open,
+      run: () => inboxUiActions.open("messages"),
     },
     {
       id: "app.archived",

package/components/Features/FeaturesSection.tsx

@@ -6,7 +6,7 @@ import { useFeaturesQuery, useReleasePiece } from "@/data/features";
 import type { FeatureView } from "@/lib/plans/view";
 import { duration, money } from "@/components/Recipes/format";
 import { sessionOpenActions } from "@/stores/sessionOpen";
-import { tasksUiActions } from "@/stores/tasksUi";
+import { inboxUiActions } from "@/stores/inboxUi";
 import { cn } from "@/lib/utils";
 
 function FeatureCard({ f }: { f: FeatureView }) {
@@ -66,7 +66,7 @@ function FeatureCard({ f }: { f: FeatureView }) {
                 className="text-primary -mr-2 flex min-h-11 items-center px-2"
                 onClick={() => {
                   sessionOpenActions.request(p.sessionId!);
-                  tasksUiActions.setPanelOpen(false);
+                  inboxUiActions.setOpen(false);
                 }}
               >
                 <ArrowUpRight className="h-3.5 w-3.5" />

package/components/Inbox/InboxButton.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Inbox } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useInbox } from "@/hooks/useInbox";
+import { inboxUiActions } from "@/stores/inboxUi";
+
+// One button for everything waiting on you: sessions, tasks, asks and
+// questions, messages.
+export function InboxButton() {
+  const { counts } = useInbox();
+  const label = counts.total > 0 ? `Inbox (${counts.total})` : "Inbox";
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label={label}
+          className="relative h-7 w-7"
+          onClick={() => inboxUiActions.open()}
+        >
+          <Inbox className="h-4 w-4" />
+          {counts.total > 0 && (
+            <span className="bg-primary text-primary-foreground ring-background absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 font-mono text-[10px] leading-none font-bold tabular-nums ring-2">
+              {counts.total > 99 ? "99+" : counts.total}
+            </span>
+          )}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>Inbox</TooltipContent>
+    </Tooltip>
+  );
+}

package/components/Inbox/InboxDialog.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Settings } from "lucide-react";
+import { useSnapshot } from "valtio";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { TasksPanel } from "@/components/Tasks";
+import { MessagesPanel } from "@/components/Bus";
+import { useInbox } from "@/hooks/useInbox";
+import { useBusMessages } from "@/data/bus";
+import { pickTab, type InboxTab } from "@/lib/inbox/counts";
+import { cn } from "@/lib/utils";
+import { inboxUi, inboxUiActions, lastInboxTab } from "@/stores/inboxUi";
+import { settingsUiActions } from "@/stores/settingsUi";
+import { NeedsYouList } from "./NeedsYouList";
+
+const TABS: { id: InboxTab; label: string }[] = [
+  { id: "needs", label: "Needs you" },
+  { id: "tasks", label: "Tasks" },
+  { id: "messages", label: "Messages" },
+];
+
+// Everything waiting on you, in one panel: under the bar's Inbox button on a
+// wide screen, centred on a phone.
+export function InboxDialog() {
+  const { open, request } = useSnapshot(inboxUi);
+  const { rows, counts } = useInbox();
+  const { data: messages } = useBusMessages();
+  const [tab, setTab] = useState<InboxTab>("needs");
+  // Chosen as the panel opens, not as its counts change under his hands.
+  const [wasOpen, setWasOpen] = useState(false);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open)
+      setTab(
+        pickTab({
+          explicit: request ?? undefined,
+          needs: counts.needs,
+          last: lastInboxTab(),
+        })
+      );
+  }
+
+  const choose = (next: InboxTab) => {
+    setTab(next);
+    inboxUiActions.rememberTab(next);
+  };
+
+  // Looking at Messages reads them, including ones arriving meanwhile.
+  useEffect(() => {
+    if (!open || tab !== "messages" || !messages?.length) return;
+    inboxUiActions.markSeen(messages.reduce((n, m) => Math.max(n, m.id), 0));
+  }, [open, tab, messages]);
+
+  const count = {
+    needs: counts.needs,
+    tasks: counts.tasks,
+    messages: counts.messages,
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={inboxUiActions.setOpen}>
+      <DialogContent
+        showCloseButton={false}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className={cn(
+          "flex max-h-[min(85vh,40rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-lg",
+          "md:top-12 md:right-3 md:left-auto md:max-w-md md:translate-x-0 md:translate-y-0"
+        )}
+      >
+        <DialogTitle className="sr-only">Inbox</DialogTitle>
+        <DialogDescription className="sr-only">
+          Sessions, tasks and messages waiting on you.
+        </DialogDescription>
+        <div
+          role="tablist"
+          className="border-foreground/[0.07] flex shrink-0 items-center gap-1 border-b px-2"
+        >
+          {TABS.map((t) => (
+            <button
+              key={t.id}
+              type="button"
+              role="tab"
+              aria-selected={tab === t.id}
+              onClick={() => choose(t.id)}
+              className={cn(
+                "-mb-px flex min-h-11 items-center gap-1.5 border-b-2 px-2.5 text-sm transition-colors",
+                tab === t.id
+                  ? "border-primary text-foreground"
+                  : "text-muted-foreground hover:text-foreground border-transparent"
+              )}
+            >
+              {t.label}
+              {count[t.id] > 0 && (
+                <span
+                  className={cn(
+                    "rounded-full px-1.5 font-mono text-[10px] leading-4 tabular-nums",
+                    t.id === "needs"
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-foreground/10 text-foreground/80"
+                  )}
+                >
+                  {count[t.id]}
+                </span>
+              )}
+            </button>
+          ))}
+          <button
+            type="button"
+            aria-label="Notification settings"
+            title="Notification settings"
+            onClick={() => {
+              inboxUiActions.setOpen(false);
+              settingsUiActions.open("notifications");
+            }}
+            className="text-muted-foreground hover:text-foreground ml-auto flex size-9 items-center justify-center rounded-md"
+          >
+            <Settings className="h-4 w-4" />
+          </button>
+        </div>
+        <div
+          className={cn(
+            "min-h-0 flex-1 overflow-y-auto",
+            tab !== "needs" && "p-4"
+          )}
+        >
+          {tab === "needs" && <NeedsYouList rows={rows} />}
+          {tab === "tasks" && <TasksPanel />}
+          {tab === "messages" && <MessagesPanel />}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/Inbox/NeedsYouList.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { CornerDownLeft, X } from "lucide-react";
+import { toast } from "sonner";
+import { useDismissNeedsYou } from "@/data/orchestrators";
+import type { NeedsRow } from "@/lib/inbox/counts";
+import { cn } from "@/lib/utils";
+import { inboxUiActions } from "@/stores/inboxUi";
+import { needsYouFocusActions } from "@/stores/needsYouFocus";
+import { orchestratorOpenActions } from "@/stores/orchestratorOpen";
+import { sessionOpenActions } from "@/stores/sessionOpen";
+
+const PILL = {
+  input: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+  ask: "bg-primary/15 text-primary",
+  question: "bg-foreground/10 text-foreground/80",
+} as const;
+const PILL_LABEL = {
+  input: "Input",
+  ask: "Ask",
+  question: "Question",
+} as const;
+
+function go(row: NeedsRow) {
+  inboxUiActions.setOpen(false);
+  if (row.kind === "input" && row.sessionId)
+    sessionOpenActions.request(row.sessionId);
+  else if (row.workspaceId) {
+    orchestratorOpenActions.request(row.workspaceId);
+    if (row.ask) needsYouFocusActions.ask(row.ask.id);
+  }
+}
+
+function Row({ row }: { row: NeedsRow }) {
+  const dismiss = useDismissNeedsYou(row.workspaceId ?? "");
+  const hide = () =>
+    dismiss.mutate(
+      { key: row.key },
+      {
+        onSuccess: () =>
+          toast("Hidden from Needs you", {
+            action: {
+              label: "Undo",
+              onClick: () => dismiss.mutate({ key: row.key, undo: true }),
+            },
+          }),
+        onError: (e) => toast.error(e.message),
+      }
+    );
+  return (
+    <li className="border-foreground/[0.07] flex items-center border-b last:border-0">
+      <button
+        type="button"
+        onClick={() => go(row)}
+        className="hover:bg-foreground/[0.04] flex min-h-12 min-w-0 flex-1 items-center gap-3 px-4 py-2 text-left"
+      >
+        <span
+          className={cn(
+            "w-[4.25rem] shrink-0 rounded-full px-2 py-0.5 text-center text-[11px] font-medium",
+            PILL[row.kind]
+          )}
+        >
+          {PILL_LABEL[row.kind]}
+        </span>
+        <span className="min-w-0 flex-1">
+          <span className="block truncate text-sm">{row.title}</span>
+          <span className="text-muted-foreground block truncate text-xs">
+            {row.sub}
+          </span>
+        </span>
+      </button>
+      {row.question && row.workspaceId && (
+        <button
+          type="button"
+          aria-label="Reply"
+          title="Reply"
+          onClick={() => {
+            inboxUiActions.setOpen(false);
+            orchestratorOpenActions.request(row.workspaceId!);
+            needsYouFocusActions.reply(
+              row.workspaceId!,
+              row.question!.id,
+              row.question!.text
+            );
+          }}
+          className="text-muted-foreground hover:text-foreground flex size-11 shrink-0 items-center justify-center"
+        >
+          <CornerDownLeft className="h-3.5 w-3.5" />
+        </button>
+      )}
+      {row.kind !== "input" && (
+        <button
+          type="button"
+          aria-label="Dismiss"
+          title="Dismiss"
+          onClick={hide}
+          className="text-muted-foreground hover:text-foreground flex size-11 shrink-0 items-center justify-center"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </li>
+  );
+}
+
+export function NeedsYouList({ rows }: { rows: NeedsRow[] }) {
+  if (!rows.length)
+    return (
+      <p className="text-muted-foreground py-10 text-center text-sm">
+        Nothing needs you.
+      </p>
+    );
+  return (
+    <ul>
+      {rows.map((row) => (
+        <Row key={row.key} row={row} />
+      ))}
+    </ul>
+  );
+}

package/components/Inbox/index.ts

@@ -0,0 +1,2 @@
+export { InboxButton } from "./InboxButton";
+export { InboxDialog } from "./InboxDialog";

package/components/LumifyHub/index.ts

@@ -1,6 +1,5 @@
 export { LumifyHubDialogs } from "./LumifyHubDialogs";
 export { BoardTodoSection } from "./BoardTodoSection";
-export { DocsButton } from "./Docs/DocsButton";
 export {
   WorkspaceLumifyHubItem,
   ProjectBoardItem,

package/components/Pane/DesktopTabBar.tsx

@@ -167,6 +167,7 @@ export function DesktopTabBar({
           <ChatBookmarksButton
             sessionId={bookmarksSessionId}
             className="h-7 min-w-7"
+            hideWhenEmpty
           />
         )}
         {session?.working_directory && (
@@ -187,6 +188,7 @@ export function DesktopTabBar({
         <div className="flex items-center">
           <PaneMenu
             session={session}
+            bookmarksSessionId={bookmarksSessionId}
             canSplit={canSplit}
             canClose={canClose}
             hasAttachedTmux={hasAttachedTmux}