@gperezmz/bb-plugin-thread-glance 0.1.2

package/features/thread-list/model/groups.ts

@@ -0,0 +1,263 @@
+// Top-level groups: which group a family lands in, and the order
+// groups appear in. Pure.
+import type {
+  PluginSidebarProject,
+  PluginSidebarSection,
+  PluginSidebarThread,
+} from "@get-bb/plugin-sdk/app";
+import type { OrganizationMode, Preferences } from "@/shared/preferences";
+
+export type GroupKind = "pinned" | "threads" | "project" | "section" | "machine";
+
+export interface GroupDescriptor {
+  /** `pinned`, `threads`, `project:<id>`, `section:<id>` or `machine:<id>`. */
+  id: string;
+  kind: GroupKind;
+  label: string;
+  /** Project, section or machine id for entity groups. */
+  entityId: string | null;
+  /** Project a new thread from this group's `+` goes to. */
+  newThreadProjectId: string | null;
+  newThreadSectionId: string | null;
+}
+
+export interface GroupingInputs {
+  mode: OrganizationMode;
+  projects: readonly PluginSidebarProject[];
+  sections: readonly PluginSidebarSection[];
+  threads: readonly PluginSidebarThread[];
+}
+
+export const PINNED_GROUP_ID = "pinned";
+export const THREADS_GROUP_ID = "threads";
+
+function isPinnedThread(thread: PluginSidebarThread): boolean {
+  return thread.pinnedAt !== null || thread.isPinned;
+}
+
+/** The personal project the loose Threads bucket stands for in project mode. */
+export function personalProject(
+  projects: readonly PluginSidebarProject[],
+): PluginSidebarProject | null {
+  return projects.find((project) => project.isPersonal) ?? null;
+}
+
+/**
+ * The group a family root belongs to. Pinned roots go to Pinned. A root
+ * whose project, section or machine isn't known goes to the loose Threads
+ * bucket, except an unknown section, which gets a placeholder group as in
+ * bb.
+ */
+export function groupIdForRoot(
+  root: PluginSidebarThread,
+  inputs: Pick<GroupingInputs, "mode" | "projects">,
+): string {
+  if (isPinnedThread(root) && !root.isHidden) return PINNED_GROUP_ID;
+  switch (inputs.mode) {
+    case "project": {
+      const project = inputs.projects.find((candidate) => candidate.id === root.projectId);
+      if (project === undefined || project.isPersonal) return THREADS_GROUP_ID;
+      return `project:${project.id}`;
+    }
+    case "chronological":
+      return root.sectionId === null ? THREADS_GROUP_ID : `section:${root.sectionId}`;
+    case "machine":
+      return root.host === null ? THREADS_GROUP_ID : `machine:${root.host.id}`;
+  }
+}
+
+/** Entity groups for the mode, in their natural order. */
+export function entityGroups(
+  inputs: GroupingInputs,
+  alphabetical: boolean,
+): GroupDescriptor[] {
+  const personal = personalProject(inputs.projects);
+  switch (inputs.mode) {
+    case "project":
+      return inputs.projects
+        .filter((project) => !project.isPersonal)
+        .map((project) => ({
+          id: `project:${project.id}`,
+          kind: "project" as const,
+          label: project.name,
+          entityId: project.id,
+          newThreadProjectId: project.id,
+          newThreadSectionId: null,
+        }));
+    case "chronological": {
+      const known = new Set(inputs.sections.map((section) => section.id));
+      const sections = [...inputs.sections];
+      if (alphabetical) sections.sort((a, b) => a.name.localeCompare(b.name));
+      const groups: GroupDescriptor[] = sections.map((section) => ({
+        id: `section:${section.id}`,
+        kind: "section",
+        label: section.name,
+        entityId: section.id,
+        newThreadProjectId: personal?.id ?? null,
+        newThreadSectionId: section.id,
+      }));
+      for (const thread of inputs.threads) {
+        if (thread.sectionId === null || known.has(thread.sectionId)) continue;
+        known.add(thread.sectionId);
+        groups.push({
+          id: `section:${thread.sectionId}`,
+          kind: "section",
+          label: "Section",
+          entityId: thread.sectionId,
+          newThreadProjectId: personal?.id ?? null,
+          newThreadSectionId: thread.sectionId,
+        });
+      }
+      return groups;
+    }
+    case "machine": {
+      const seen = new Map<string, string>();
+      for (const thread of inputs.threads) {
+        if (thread.host !== null && !seen.has(thread.host.id)) {
+          seen.set(thread.host.id, thread.host.name);
+        }
+      }
+      return [...seen].map(([id, name]) => ({
+        id: `machine:${id}`,
+        kind: "machine" as const,
+        label: name || "Unknown machine",
+        entityId: id,
+        newThreadProjectId: null,
+        newThreadSectionId: null,
+      }));
+    }
+  }
+}
+
+export function builtinGroup(
+  id: typeof PINNED_GROUP_ID | typeof THREADS_GROUP_ID,
+  projects: readonly PluginSidebarProject[],
+): GroupDescriptor {
+  if (id === PINNED_GROUP_ID) {
+    return {
+      id,
+      kind: "pinned",
+      label: "Pinned",
+      entityId: null,
+      newThreadProjectId: null,
+      newThreadSectionId: null,
+    };
+  }
+  return {
+    id,
+    kind: "threads",
+    label: "Threads",
+    entityId: null,
+    newThreadProjectId: personalProject(projects)?.id ?? null,
+    newThreadSectionId: null,
+  };
+}
+
+const ANCHORS: Record<OrganizationMode, string> = {
+  project: "projects",
+  chronological: "sections",
+  machine: "machines",
+};
+
+export const ORDER_PREFERENCE: Record<
+  OrganizationMode,
+  "sectionOrder" | "manualSectionOrder" | "machineSectionOrder"
+> = {
+  project: "sectionOrder",
+  chronological: "manualSectionOrder",
+  machine: "machineSectionOrder",
+};
+
+/**
+ * Resolves the stored top-level order for a mode: the legacy anchor
+ * (`projects`, `sections`, `machines`) expands to the entity ids, unknown
+ * ids are dropped, and entities missing from the stored order are spliced
+ * in after the last entity group. Pinned and Threads are always present.
+ */
+export function resolveGroupOrder(
+  mode: OrganizationMode,
+  stored: readonly string[],
+  entityIds: readonly string[],
+): string[] {
+  const anchor = ANCHORS[mode];
+  const entities = new Set(entityIds);
+  const explicit = new Set(stored);
+  const out: string[] = [];
+  const push = (id: string) => {
+    if (!out.includes(id)) out.push(id);
+  };
+  for (const id of stored) {
+    if (id === anchor) {
+      for (const entity of entityIds) if (!explicit.has(entity)) push(entity);
+    } else if (id === PINNED_GROUP_ID || id === THREADS_GROUP_ID || entities.has(id)) {
+      push(id);
+    }
+  }
+  const missing = entityIds.filter((id) => !out.includes(id));
+  if (missing.length > 0) {
+    let lastEntity = -1;
+    out.forEach((id, index) => {
+      if (entities.has(id)) lastEntity = index;
+    });
+    const insertAt =
+      lastEntity >= 0
+        ? lastEntity + 1
+        : out.includes(THREADS_GROUP_ID)
+          ? out.indexOf(THREADS_GROUP_ID)
+          : out.length;
+    out.splice(insertAt, 0, ...missing);
+  }
+  if (!out.includes(PINNED_GROUP_ID)) out.unshift(PINNED_GROUP_ID);
+  if (!out.includes(THREADS_GROUP_ID)) out.push(THREADS_GROUP_ID);
+  return out;
+}
+
+/** Moves `id` before or after `targetId` in an order (header drag). */
+export function moveGroup(
+  order: readonly string[],
+  id: string,
+  targetId: string,
+  placement: "before" | "after",
+): string[] {
+  if (id === targetId) return [...order];
+  const without = order.filter((candidate) => candidate !== id);
+  const index = without.indexOf(targetId);
+  if (index < 0) return [...order];
+  without.splice(placement === "before" ? index : index + 1, 0, id);
+  return without;
+}
+
+/** The collapse state of a group, from bb's per-kind collapsed sets. */
+export function isGroupCollapsed(group: GroupDescriptor, prefs: Preferences): boolean {
+  switch (group.kind) {
+    case "pinned":
+    case "threads":
+      return (prefs.collapsedSections as readonly string[]).includes(group.kind);
+    case "project":
+      return prefs.collapsedProjects.includes(group.entityId!);
+    case "section":
+      return prefs.collapsedThreadSections.includes(group.id);
+    case "machine":
+      return prefs.collapsedMachines.includes(group.entityId!);
+  }
+}
+
+/** The preference change that toggles a group's collapse. */
+export function toggleGroupCollapse(
+  group: GroupDescriptor,
+  prefs: Preferences,
+): Partial<Preferences> {
+  const toggle = <T extends string>(list: readonly T[], value: T): T[] =>
+    list.includes(value) ? list.filter((item) => item !== value) : [...list, value];
+  switch (group.kind) {
+    case "pinned":
+    case "threads":
+      return { collapsedSections: toggle(prefs.collapsedSections, group.kind) };
+    case "project":
+      return { collapsedProjects: toggle(prefs.collapsedProjects, group.entityId!) };
+    case "section":
+      return { collapsedThreadSections: toggle(prefs.collapsedThreadSections, group.id) };
+    case "machine":
+      return { collapsedMachines: toggle(prefs.collapsedMachines, group.entityId!) };
+  }
+}

package/features/thread-list/model/labels.ts

@@ -0,0 +1,50 @@
+// Accessible names: everything a tooltip says is in the aria-label.
+import type { OlderRow, ThreadRow } from "./view";
+import { FLAG_GLYPHS, type Flag } from "./state";
+import { formatDateTime } from "./details";
+
+export function stateText(row: ThreadRow, pluginLabel: string | null): string {
+  const state = row.info.state;
+  const base = pluginLabel ?? state.label;
+  if (state.kind === "scheduled" && state.sendAt !== null) {
+    return `${base}, sends ${formatDateTime(state.sendAt)}`;
+  }
+  return base;
+}
+
+/** "Open Fix login — Working; Claude Code; child of Manager; unread". */
+export function rowAriaLabel(
+  row: ThreadRow,
+  options: { providerName: string; pluginLabel: string | null; hasDraft: boolean },
+): string {
+  const parts = [stateText(row, options.pluginLabel), options.providerName];
+  if (row.parentTitle !== null && row.depth > 0) parts.push(`child of ${row.parentTitle}`);
+  if (row.crossGroupLabel !== null) parts.push(row.crossGroupLabel.toLowerCase());
+  if (row.hiddenBadge) parts.push("hidden thread");
+  if (row.info.unread && row.info.state.kind !== "unread") parts.push("unread");
+  if (options.hasDraft && row.info.state.kind !== "draft") parts.push("unsubmitted draft");
+  return `Open ${row.info.thread.displayTitle} — ${parts.join("; ")}`;
+}
+
+export function chipLabel(title: string, count: number, flag: Flag | null, expanded: boolean): string {
+  const noun = count === 1 ? "child thread" : "child threads";
+  const detail = flag === null ? "" : `, ${FLAG_GLYPHS[flag].label}`;
+  return `${expanded ? "Collapse" : "Show"} ${count} ${noun} of ${title}${detail}`;
+}
+
+/**
+ * The fold row's text and accessible name. The family's row says "child
+ * threads" so it never reads like the group's "older" row.
+ */
+export function olderRowText(row: OlderRow): { label: string; ariaLabel: string } {
+  const noun = row.count === 1 ? "thread" : "threads";
+  if (row.scope === "group") {
+    return {
+      label: row.expanded ? "Show fewer" : `${row.count} older`,
+      ariaLabel: `${row.expanded ? "Hide" : "Show"} ${row.count} older ${noun}`,
+    };
+  }
+  const children = row.count === 1 ? "child thread" : "child threads";
+  if (row.expanded) return { label: "Show fewer", ariaLabel: `Hide ${row.count} older ${children}` };
+  return { label: `${row.count} more ${children}`, ariaLabel: `Show ${row.count} more ${children}` };
+}

package/features/thread-list/model/layout.ts

@@ -0,0 +1,61 @@
+// How far a row sits from the list's left edge. Pure, so a test can
+// call it without rendering.
+import type { Nesting } from "@/shared/preferences";
+
+/** Left padding of a root row, as in bb's list. */
+export const ROOT_INDENT = 8;
+/** Tree nesting keeps bb's step per level. */
+export const TREE_STEP = 24;
+/**
+ * Folded nesting shows one flat level. A child's status slot starts this far
+ * right of its parent's, so the child's title sits this far right of the
+ * parent's title.
+ */
+export const FOLDED_STEP = 12;
+
+export function rowIndent(depth: number, nesting: Nesting): number {
+  return ROOT_INDENT + depth * (nesting === "tree" ? TREE_STEP : FOLDED_STEP);
+}
+
+/** How far the rail sits from a row's left edge: the centre of the status slot at that level. */
+export function railLeft(level: number, nesting: Nesting): number {
+  return rowIndent(level, nesting) + 8;
+}
+
+/**
+ * One level of guide rail on one row. `start` begins under the row's
+ * status slot, `full` runs the row's height, `end` stops at its middle.
+ */
+export type Rail = "start" | "full" | "end";
+
+/**
+ * The rails every row draws, from the depths of the rows in order. Level `k`
+ * runs from the row at depth `k` through the rows below it, and stops at the
+ * last of them, so a family's rail ends on its last row, the fold row
+ * included. Entry `k` of a row's result is its rail at level `k`, or null.
+ */
+export function railsFor(depths: readonly number[]): (Rail | null)[][] {
+  return depths.map((depth, index) => {
+    const next = depths[index + 1];
+    const rails: (Rail | null)[] = [];
+    for (let level = 0; level <= depth; level += 1) {
+      const continues = next !== undefined && next > level;
+      if (level === depth) rails.push(continues ? "start" : null);
+      else rails.push(continues ? "full" : "end");
+    }
+    return rails;
+  });
+}
+
+/**
+ * How a row's title reads. Children step back from roots: a size smaller and
+ * muted, unless the thread is unread or open. Hover restores the colour in
+ * the component.
+ */
+export function titleTreatment(
+  depth: number,
+  state: { unread: boolean; active: boolean },
+): { small: boolean; muted: boolean } {
+  const child = depth > 0;
+  return { small: child, muted: child && !state.unread && !state.active };
+}

package/features/thread-list/model/menu.ts

@@ -0,0 +1,78 @@
+// Row menu items in bb's order, plus Thread Glance's additions. Pure:
+// the menu components render this list.
+import type { PluginSidebarThread } from "@get-bb/plugin-sdk/app";
+import { ICONS } from "../icons";
+
+export type RowMenuAction =
+  | "open-in-split"
+  | "copy-link"
+  | "copy-id"
+  | "mark-read"
+  | "mark-unread"
+  | "pin"
+  | "unpin"
+  | "move-to-section"
+  | "move"
+  | "rename"
+  | "details"
+  | "archive"
+  | "unarchive"
+  | "delete";
+
+export interface RowMenuItem {
+  action: RowMenuAction;
+  label: string;
+  icon: string;
+  destructive?: boolean;
+  /** Draw a separator before this item. */
+  separated?: boolean;
+}
+
+export interface RowMenuInputs {
+  thread: PluginSidebarThread;
+  unread: boolean;
+  splitAvailable: boolean;
+  /** True for a thread with no parent (bb: Move to section on roots only). */
+  isRoot: boolean;
+  hasSections: boolean;
+  /** Kept for callers; Details is on every viewport. */
+  compact: boolean;
+}
+
+export function rowMenuItems(inputs: RowMenuInputs): RowMenuItem[] {
+  const { thread } = inputs;
+  const archived = thread.archivedAt !== null || thread.isArchived;
+  const pinned = thread.pinnedAt !== null || thread.isPinned;
+  const items: RowMenuItem[] = [];
+  items.push({ action: "details", label: "Details", icon: ICONS.details });
+  if (inputs.splitAvailable) {
+    items.push({ action: "open-in-split", label: "Open in split", icon: ICONS.openInSplit });
+  }
+  items.push({ action: "copy-link", label: "Copy thread link", icon: ICONS.link });
+  items.push({ action: "copy-id", label: "Copy thread ID", icon: ICONS.copy });
+  items.push(
+    inputs.unread
+      ? { action: "mark-read", label: "Mark read", icon: ICONS.markRead }
+      : { action: "mark-unread", label: "Mark unread", icon: ICONS.markUnread },
+  );
+  items.push(
+    pinned
+      ? { action: "unpin", label: "Unpin", icon: ICONS.unpin }
+      : { action: "pin", label: "Pin", icon: ICONS.pin },
+  );
+  if (inputs.isRoot && !archived && inputs.hasSections) {
+    items.push({ action: "move-to-section", label: "Move to section", icon: ICONS.moveToSection });
+  }
+  if (!archived) items.push({ action: "move", label: "Move…", icon: ICONS.move });
+  items.push({ action: "rename", label: "Rename", icon: ICONS.rename });
+  items.push(
+    archived
+      ? { action: "unarchive", label: "Unarchive", icon: ICONS.unarchive, separated: true }
+      : { action: "archive", label: "Archive", icon: ICONS.archive, separated: true },
+  );
+  items.push({ action: "delete", label: "Delete", icon: ICONS.remove, destructive: true });
+  return items;
+}
+
+/** Mark all read: above this many threads, ask first. */
+export const MARK_ALL_CONFIRM_ABOVE = 20;

package/features/thread-list/model/move.ts

@@ -0,0 +1,46 @@
+// "Move…": the keyboard route to what drag and drop does. Pure.
+import type { Forest } from "./families";
+import { isInSubtree } from "./drag";
+
+export interface MoveTarget {
+  /** null moves the thread to the top level. */
+  parentThreadId: string | null;
+  label: string;
+  /** For the list: the parent's own parent, so nested targets read in context. */
+  detail: string | null;
+}
+
+/**
+ * Where a thread can move: the top level (when it has a parent) and under
+ * any other visible, active thread outside its own subtree, best matches
+ * of `query` first. The current parent is left out: moving there changes
+ * nothing.
+ */
+export function moveTargets(threadId: string, forest: Forest, query = "", limit = 50): MoveTarget[] {
+  const self = forest.infos.get(threadId);
+  if (self === undefined) return [];
+  const parentOf = (id: string) => forest.infos.get(id)?.thread.parentThreadId ?? null;
+  const needle = query.trim().toLowerCase();
+  const targets: MoveTarget[] = [];
+  if (self.thread.parentThreadId !== null && (needle === "" || "top level".includes(needle))) {
+    targets.push({ parentThreadId: null, label: "Top level", detail: "No parent thread" });
+  }
+  const candidates = [...forest.infos.values()]
+    .filter((info) => {
+      const thread = info.thread;
+      if (thread.isHidden || thread.isArchived) return false;
+      if (thread.id === self.thread.parentThreadId) return false;
+      if (isInSubtree(thread.id, threadId, parentOf)) return false;
+      return needle === "" || thread.displayTitle.toLowerCase().includes(needle);
+    })
+    .sort((a, b) => b.thread.latestAttentionAt - a.thread.latestAttentionAt);
+  for (const info of candidates.slice(0, limit)) {
+    const parent = info.parentId === null ? null : forest.infos.get(info.parentId);
+    targets.push({
+      parentThreadId: info.thread.id,
+      label: info.thread.displayTitle,
+      detail: parent ? `in ${parent.thread.displayTitle}` : null,
+    });
+  }
+  return targets;
+}

package/features/thread-list/model/notes.ts

@@ -0,0 +1,52 @@
+// One-line reasons under blocked and failed rows. Pure:
+// the server stores what it saw; this decides what a row says.
+import type { PluginSidebarThread } from "@get-bb/plugin-sdk/app";
+import type { Note, ThreadNotes } from "@/shared/contract";
+import { normalizeQueued, normalizeStatus, type NeedsKind } from "./state";
+
+export interface RowNote {
+  /** "Asks", "Approve", "Plan", "Failed"… */
+  prefix: string;
+  text: string;
+  tone: "attention" | "destructive";
+}
+
+const PENDING_PREFIX: Record<NeedsKind, string> = {
+  question: "Asks",
+  approval: "Approve",
+  plan: "Plan",
+  input: "Needs",
+};
+
+/** The needs-you kind a pending note names, or null when there is none. */
+export function needsKindOf(notes: ThreadNotes | undefined): NeedsKind | null {
+  const kind = notes?.pending?.kind;
+  return kind === "question" || kind === "approval" || kind === "plan" || kind === "input" ? kind : null;
+}
+
+/**
+ * The line under a row: why it needs you, or why it failed. Other states
+ * have none, so the list stays one line per thread where nothing is wrong.
+ */
+export function rowNote(thread: PluginSidebarThread, notes: ThreadNotes | undefined): RowNote | null {
+  if (thread.hasPendingInteraction) {
+    const kind = needsKindOf(notes);
+    const text = notes?.pending?.text.trim();
+    if (kind === null || !text) return null;
+    return { prefix: PENDING_PREFIX[kind], text, tone: "attention" };
+  }
+  if (normalizeStatus(thread) === "error") {
+    const text = notes?.failed?.text.trim();
+    // "Failed: Failed" says nothing the red glyph doesn't.
+    return text && text.toLowerCase() !== "failed" ? { prefix: "Failed", text, tone: "destructive" } : null;
+  }
+  if (normalizeQueued(thread) === "failed") {
+    return { prefix: "Failed", text: "queued message wasn't sent", tone: "destructive" };
+  }
+  return null;
+}
+
+/** The hover card's last-reply line. */
+export function lastReply(notes: ThreadNotes | undefined): Note | null {
+  return notes?.done ?? null;
+}

package/features/thread-list/model/provider-mark.ts

@@ -0,0 +1,59 @@
+// Two-letter provider marks when a provider has no logo. Pure.
+
+export interface ProviderLike {
+  id: string;
+  displayName?: string | null;
+}
+
+function words(text: string): string[] {
+  return text
+    .split(/[^\p{L}\p{N}]+/u)
+    .map((word) => word.trim())
+    .filter((word) => word.length > 0);
+}
+
+function candidates(provider: ProviderLike): string[] {
+  const name = provider.displayName?.trim() || provider.id;
+  const parts = words(name);
+  const idParts = words(provider.id);
+  const first = (parts[0] ?? provider.id)[0] ?? "?";
+  const options: string[] = [];
+  const push = (second: string | undefined) => {
+    if (second === undefined) return;
+    const mark = (first + second).toUpperCase();
+    if (!options.includes(mark)) options.push(mark);
+  };
+  // Default: the first two letters of the name.
+  push((parts[0] ?? "")[1]);
+  // On a clash: the next word's initial, then letters from the id.
+  for (const part of parts.slice(1)) push(part[0]);
+  for (const part of idParts) for (const letter of part) push(letter);
+  for (const letter of (parts[0] ?? "").slice(2)) push(letter);
+  if (options.length === 0) options.push(first.toUpperCase());
+  return options;
+}
+
+/**
+ * Assigns each provider a two-letter mark, unique within the roster.
+ * Providers keep roster order, so the first of two clashing names keeps the
+ * default mark.
+ */
+export function assignProviderMarks(roster: readonly ProviderLike[]): Map<string, string> {
+  const marks = new Map<string, string>();
+  const used = new Set<string>();
+  for (const provider of roster) {
+    const options = candidates(provider);
+    const mark = options.find((option) => !used.has(option)) ?? options[0]!;
+    used.add(mark);
+    marks.set(provider.id, mark);
+  }
+  return marks;
+}
+
+/** The mark for one provider id, falling back to the id while loading. */
+export function providerMark(
+  providerId: string,
+  marks: ReadonlyMap<string, string>,
+): string {
+  return marks.get(providerId) ?? candidates({ id: providerId })[0]!;
+}