@gperezmz/bb-plugin-thread-glance 0.1.2

package/features/thread-list/components/RowMenu.tsx

@@ -0,0 +1,168 @@
+// The row menu as a right-click context menu or a "…" dropdown, which
+// becomes a bottom drawer on compact viewports.
+import { Fragment } from "react";
+import { experimental_Icon as Icon } from "@get-bb/plugin-sdk/app";
+import type { PluginSidebarSection } from "@get-bb/plugin-sdk/app";
+import {
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+} from "@/components/ui/context-menu";
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import { ICONS } from "../icons";
+import type { RowMenuAction, RowMenuItem } from "../model/menu";
+
+interface MenuProps {
+  items: readonly RowMenuItem[];
+  sections: readonly PluginSidebarSection[];
+  currentSectionId: string | null;
+  onAction(action: RowMenuAction, sectionId?: string | null): void;
+  /** Rename keeps focus in its editor instead of returning it to the row. */
+  onCloseAutoFocus(event: Event): void;
+}
+
+function ItemLabel({ item }: { item: Pick<RowMenuItem, "icon" | "label"> }) {
+  return (
+    <>
+      <Icon name={item.icon} aria-hidden className="size-4" />
+      <span>{item.label}</span>
+    </>
+  );
+}
+
+function sectionTargets(sections: readonly PluginSidebarSection[]) {
+  return [{ id: null as string | null, name: "Threads" }, ...sections.map((s) => ({ id: s.id as string | null, name: s.name }))];
+}
+
+/**
+ * What the user has done inside an open context menu. The right-click that
+ * opens it is released over whatever item opened under the pointer (the
+ * menu opens upward near the bottom of the list), and that release selects
+ * the item. A real choice is preceded by a new press or a key in the menu;
+ * the row resets this when the menu opens.
+ */
+export interface ContextMenuInput {
+  pressed: boolean;
+  keyed: boolean;
+}
+
+export function RowContextMenuContent({
+  items,
+  sections,
+  currentSectionId,
+  onAction,
+  onCloseAutoFocus,
+  input,
+}: MenuProps & {
+  input: { readonly current: ContextMenuInput };
+}) {
+  const guard = (run: () => void) => (event: Event) => {
+    if (!input.current.pressed && !input.current.keyed) {
+      event.preventDefault();
+      return;
+    }
+    run();
+  };
+  return (
+    <ContextMenuContent
+      className="min-w-48"
+      onCloseAutoFocus={onCloseAutoFocus}
+      onPointerDown={() => {
+        input.current.pressed = true;
+      }}
+      onKeyDown={() => {
+        input.current.keyed = true;
+      }}
+    >
+      {items.map((item) => (
+        <Fragment key={item.action}>
+          {item.separated ? <ContextMenuSeparator /> : null}
+          {item.action === "move-to-section" ? (
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>
+                <ItemLabel item={item} />
+              </ContextMenuSubTrigger>
+              <ContextMenuSubContent>
+                {sectionTargets(sections).map((target) => (
+                  <ContextMenuItem
+                    key={target.id ?? "threads"}
+                    disabled={target.id === currentSectionId}
+                    onSelect={guard(() => onAction("move-to-section", target.id))}
+                  >
+                    {target.id === currentSectionId ? (
+                      <Icon name={ICONS.check} aria-hidden className="size-4" />
+                    ) : (
+                      <span className="size-4" />
+                    )}
+                    {target.name}
+                  </ContextMenuItem>
+                ))}
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+          ) : (
+            <ContextMenuItem
+              className={cn(item.destructive && "text-destructive focus:text-destructive")}
+              onSelect={guard(() => onAction(item.action))}
+            >
+              <ItemLabel item={item} />
+            </ContextMenuItem>
+          )}
+        </Fragment>
+      ))}
+    </ContextMenuContent>
+  );
+
+}
+
+export function RowDropdownMenuContent({ items, sections, currentSectionId, onAction, onCloseAutoFocus }: MenuProps) {
+  return (
+    <DropdownMenuContent align="end" className="min-w-48" onCloseAutoFocus={onCloseAutoFocus}>
+      {items.map((item) => (
+        <Fragment key={item.action}>
+          {item.separated ? <DropdownMenuSeparator /> : null}
+          {item.action === "move-to-section" ? (
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <ItemLabel item={item} />
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                {sectionTargets(sections).map((target) => (
+                  <DropdownMenuItem
+                    key={target.id ?? "threads"}
+                    disabled={target.id === currentSectionId}
+                    onSelect={() => onAction("move-to-section", target.id)}
+                  >
+                    {target.id === currentSectionId ? (
+                      <Icon name={ICONS.check} aria-hidden className="size-4" />
+                    ) : (
+                      <span className="size-4" />
+                    )}
+                    {target.name}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          ) : (
+            <DropdownMenuItem
+              className={cn(item.destructive && "text-destructive focus:text-destructive")}
+              onSelect={() => onAction(item.action)}
+            >
+              <ItemLabel item={item} />
+            </DropdownMenuItem>
+          )}
+        </Fragment>
+      ))}
+    </DropdownMenuContent>
+  );
+}

package/features/thread-list/components/SplitMiniMap.tsx

@@ -0,0 +1,55 @@
+// bb's 14×14 split mini-map: outranks the state glyph, as in bb's list.
+import { cn } from "@/lib/utils";
+
+export interface MiniMapPane {
+  paneId: string;
+  rect: { x: number; y: number; width: number; height: number };
+  isMe: boolean;
+  isFocused: boolean;
+}
+
+export function SplitMiniMap({
+  panes,
+  label,
+  working,
+}: {
+  panes: readonly MiniMapPane[];
+  label: string;
+  working: boolean;
+}) {
+  const focused = panes.some((pane) => pane.isMe && pane.isFocused);
+  return (
+    <svg
+      role="img"
+      aria-label={label}
+      viewBox="0 0 14 14"
+      width={14}
+      height={14}
+      shapeRendering="crispEdges"
+      className={cn("pointer-events-none size-3.5 shrink-0", !focused && "opacity-60", working && "animate-shine-icon motion-reduce:animate-none")}
+    >
+      {panes.map((pane) => {
+        // bb's geometry: a 1px inset, 12px of drawable space, and a half-pixel
+        // stroke inset for outlined panes.
+        const inset = pane.isMe ? 0 : 0.5;
+        return (
+          <rect
+            key={pane.paneId}
+            x={1 + pane.rect.x * 12 + inset}
+            y={1 + pane.rect.y * 12 + inset}
+            width={Math.max(pane.rect.width * 12 - 2 * inset, 0)}
+            height={Math.max(pane.rect.height * 12 - 2 * inset, 0)}
+            strokeWidth={pane.isMe ? 0 : 1}
+            className={
+              pane.isMe
+                ? pane.isFocused
+                  ? "fill-primary/70 stroke-none"
+                  : "fill-muted-foreground/45 stroke-none"
+                : "fill-none stroke-muted-foreground/30"
+            }
+          />
+        );
+      })}
+    </svg>
+  );
+}

package/features/thread-list/components/ThreadDetails.tsx

@@ -0,0 +1,138 @@
+// Hover card and details dialog content.
+import { useContext, useEffect, useState } from "react";
+import { experimental_Icon as Icon, experimental_useSidebarThreadPullRequest as usePullRequest } from "@get-bb/plugin-sdk/app";
+import { Button } from "@/components/ui/button";
+import type { ThreadInfo } from "../model/families";
+import { childSummary, descendantsOf, formatDateTime, sinceLabel } from "../model/details";
+import { lastReply } from "../model/notes";
+import { finishedAtFor, stateSince } from "../model/time";
+import { ICONS } from "../icons";
+import { ListLiveContext, type ModelInfo, type RowController } from "./controller";
+import { GlyphIcon } from "./glyphs";
+import { ProviderBadge } from "./ProviderBadge";
+import { pullRequestLabel, pullRequestTone } from "./PullRequestBadge";
+
+function Line({ label, title, children }: { label: string; title?: string; children: React.ReactNode }) {
+  return (
+    <div className="flex min-w-0 gap-2" title={title}>
+      <dt className="w-20 shrink-0 text-muted-foreground">{label}</dt>
+      <dd className="min-w-0 flex-1 break-words">{children}</dd>
+    </div>
+  );
+}
+
+function useModel(controller: RowController, info: ThreadInfo): ModelInfo | null | "loading" {
+  const [model, setModel] = useState<ModelInfo | null | "loading">("loading");
+  const { id, status } = info.thread;
+  useEffect(() => {
+    let cancelled = false;
+    setModel("loading");
+    controller.loadModel(id, status).then(
+      (result) => !cancelled && setModel(result),
+      () => !cancelled && setModel(null),
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [controller, id, status]);
+  return model;
+}
+
+function PullRequestLine({ threadId }: { threadId: string }) {
+  const { pullRequest } = usePullRequest(threadId);
+  if (pullRequest === null) return null;
+  return (
+    <Line label="Pull request">
+      <span className={pullRequestTone(pullRequest.attention)}>{pullRequestLabel(pullRequest)}</span>
+    </Line>
+  );
+}
+
+export interface DetailsActions {
+  open(): void;
+  toggleRead(): void;
+}
+
+export function ThreadDetails({
+  info,
+  controller,
+  showPullRequest,
+  actions,
+}: {
+  info: ThreadInfo;
+  controller: RowController;
+  showPullRequest: boolean;
+  /** Present in the details dialog, absent in the hover card. */
+  actions?: DetailsActions;
+}) {
+  const thread = info.thread;
+  const provider = controller.provider(thread.providerId);
+  const model = useModel(controller, info);
+  const live = useContext(ListLiveContext);
+  const since = sinceLabel(info.state.kind, stateSince(info.state.kind, thread.id, live.stamps, live.now));
+  const children = childSummary(descendantsOf(live.familyOf(thread.id), thread.id));
+  const environment = thread.environment;
+  const finished = finishedAtFor(thread, live.stamps.finishedAt);
+  const reply = lastReply(live.notes[thread.id]);
+  return (
+    <div className="flex flex-col gap-2 text-xs">
+      <p className="text-sm font-medium leading-snug break-words">{thread.displayTitle}</p>
+      <div className="flex items-center gap-1.5">
+        <GlyphIcon glyph={info.state.glyph} className="size-3.5" />
+        <span>
+          {info.state.label}
+          {since !== null ? ` · ${since}` : ""}
+          {info.state.sendAt !== null ? ` · sends ${formatDateTime(info.state.sendAt)}` : ""}
+        </span>
+      </div>
+      {info.note !== null ? (
+        <p className="break-words leading-snug">
+          <span className={info.note.tone === "destructive" ? "text-destructive" : "text-attention"}>{info.note.prefix}:</span>{" "}
+          {info.note.text}
+        </p>
+      ) : null}
+      <dl className="flex flex-col gap-1">
+        <Line label="Harness">
+          <span className="inline-flex items-center gap-1.5">
+            <ProviderBadge display={provider} mode={controller.harnessIcon === "hidden" ? "muted" : controller.harnessIcon} />
+            {provider.name}
+          </span>
+        </Line>
+        <Line label="Model" title="The model and reasoning level the next message will use">
+          {model === "loading" ? "…" : model === null ? "Unknown" : `${model.model} · ${model.reasoningLevel}`}
+        </Line>
+        {environment?.branchName ? (
+          <Line label="Branch">
+            <span className="inline-flex items-center gap-1">
+              <Icon name={environment.isWorktree ? ICONS.worktree : ICONS.branch} aria-hidden className="size-3.5" />
+              {environment.branchName}
+              {environment.isWorktree ? " (worktree)" : ""}
+            </span>
+          </Line>
+        ) : null}
+        {thread.host !== null ? <Line label="Machine">{thread.host.name}</Line> : null}
+        {children !== null ? <Line label="Children">{children}</Line> : null}
+        {showPullRequest ? <PullRequestLine threadId={thread.id} /> : null}
+        {reply !== null && info.note === null ? (
+          <Line label="Last reply">
+            <span className="line-clamp-2">{reply.text}</span>
+          </Line>
+        ) : null}
+        <Line label="Created">{formatDateTime(thread.createdAt)}</Line>
+        {finished !== null ? <Line label="Finished">{formatDateTime(finished)}</Line> : null}
+      </dl>
+      {actions ? (
+        <div className="flex gap-2 pt-1">
+          <Button size="sm" onClick={actions.open}>
+            <Icon name={ICONS.open} aria-hidden />
+            Open
+          </Button>
+          <Button size="sm" variant="outline" onClick={actions.toggleRead}>
+            <Icon name={info.unread ? ICONS.markRead : ICONS.markUnread} aria-hidden />
+            {info.unread ? "Mark read" : "Mark unread"}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}