Merge pull request #48 from tyulyukov/marcode/port-thread-status-command-palette

feat(command-palette): display thread status indicators in quick access menu

Author: tyulyukov

apps/web/src/components/CommandPalette.logic.ts

@@ -14,7 +14,9 @@ export interface CommandPaletteItem {
   readonly value: string;
   readonly searchTerms: ReadonlyArray<string>;
   readonly title: ReactNode;
+  /** Optional content rendered inline before the title text. */
   readonly titleLeadingContent?: ReactNode;
+  /** Optional content rendered inline after the title text (before the timestamp). */
   readonly titleTrailingContent?: ReactNode;
   readonly description?: string;
   readonly timestamp?: string;
@@ -72,24 +74,26 @@ export function buildProjectActionItems(input: {
   }));
 }
 
-export function buildThreadActionItems(input: {
-  threads: ReadonlyArray<
-    Pick<
-      SidebarThreadSummary,
-      "archivedAt" | "branch" | "createdAt" | "environmentId" | "id" | "projectId" | "title"
-    > & {
-      updatedAt?: string | undefined;
-      latestUserMessageAt?: string | null;
-    }
-  >;
+export type BuildThreadActionItemsThread = Pick<
+  SidebarThreadSummary,
+  "archivedAt" | "branch" | "createdAt" | "environmentId" | "id" | "projectId" | "title"
+> & {
+  updatedAt?: string | undefined;
+  latestUserMessageAt?: string | null;
+};
+
+export function buildThreadActionItems<TThread extends BuildThreadActionItemsThread>(input: {
+  threads: ReadonlyArray<TThread>;
   activeThreadId?: Thread["id"];
   projectTitleById: ReadonlyMap<Project["id"], string>;
   sortOrder: SidebarThreadSortOrder;
   icon: ReactNode;
+  /** Optional content rendered inline before the title text per-thread. */
+  renderLeadingContent?: (thread: TThread) => ReactNode;
+  /** Optional content rendered inline after the title text per-thread. */
+  renderTrailingContent?: (thread: TThread) => ReactNode;
   runThread: (thread: Pick<SidebarThreadSummary, "environmentId" | "id">) => Promise<void>;
   limit?: number;
-  renderLeadingContent?: (thread: Pick<SidebarThreadSummary, "id">) => ReactNode;
-  renderTrailingContent?: (thread: Pick<SidebarThreadSummary, "id">) => ReactNode;
 }): CommandPaletteActionItem[] {
   const sortedThreads = sortThreads(
     input.threads.filter((thread) => thread.archivedAt === null),
@@ -115,26 +119,22 @@ export function buildThreadActionItems(input: {
     const leadingContent = input.renderLeadingContent?.(thread);
     const trailingContent = input.renderTrailingContent?.(thread);
 
-    return Object.assign(
-      {
-        kind: "action" as const,
-        value: `thread:${thread.id}`,
-        searchTerms: [thread.title, projectTitle ?? "", thread.branch ?? ""],
-        title: thread.title,
-        description: descriptionParts.join(" · "),
-        timestamp: formatRelativeTimeLabel(
-          thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt,
-        ),
-        icon: input.icon,
-      },
-      leadingContent ? { titleLeadingContent: leadingContent } : {},
-      trailingContent ? { titleTrailingContent: trailingContent } : {},
-      {
-        run: async () => {
-          await input.runThread(thread);
-        },
+    return {
+      kind: "action",
+      value: `thread:${thread.id}`,
+      searchTerms: [thread.title, projectTitle ?? "", thread.branch ?? ""],
+      title: thread.title,
+      description: descriptionParts.join(" · "),
+      timestamp: formatRelativeTimeLabel(
+        thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt,
+      ),
+      icon: input.icon,
+      ...(leadingContent ? { titleLeadingContent: leadingContent } : {}),
+      ...(trailingContent ? { titleTrailingContent: trailingContent } : {}),
+      run: async () => {
+        await input.runThread(thread);
       },
-    );
+    };
   });
 }
 

apps/web/src/components/CommandPalette.tsx

@@ -54,6 +54,7 @@ import {
 } from "./CommandPalette.logic";
 import { CommandPaletteResults } from "./CommandPaletteResults";
 import { ProjectFavicon } from "./ProjectFavicon";
+import { ThreadRowLeadingStatus, ThreadRowTrailingStatus } from "./ThreadStatusIndicators";
 import { useServerKeybindings } from "../rpc/serverState";
 import { resolveShortcutCommand } from "../keybindings";
 import {
@@ -248,6 +249,8 @@ function OpenCommandPaletteDialog() {
         projectTitleById,
         sortOrder: settings.sidebarThreadSortOrder,
         icon: <MessageSquareIcon className={ITEM_ICON_CLASS} />,
+        renderLeadingContent: (thread) => <ThreadRowLeadingStatus thread={thread} />,
+        renderTrailingContent: (thread) => <ThreadRowTrailingStatus thread={thread} />,
         runThread: async (thread) => {
           await navigate({
             to: "/$environmentId/$threadId",

apps/web/src/components/CommandPaletteResults.tsx

@@ -79,14 +79,20 @@ function CommandPaletteResultRow(props: {
       {props.item.icon}
       {props.item.description ? (
         <span className="flex min-w-0 flex-1 flex-col">
-          <span className="truncate text-sm text-foreground">{props.item.title}</span>
+          <span className="flex min-w-0 items-center gap-1.5 text-sm text-foreground">
+            {props.item.titleLeadingContent}
+            <span className="truncate">{props.item.title}</span>
+            {props.item.titleTrailingContent}
+          </span>
           <span className="truncate text-muted-foreground/70 text-xs">
             {props.item.description}
           </span>
         </span>
       ) : (
-        <span className="flex min-w-0 items-center gap-1.5 truncate text-sm text-foreground">
+        <span className="flex min-w-0 flex-1 items-center gap-1.5 text-sm text-foreground">
+          {props.item.titleLeadingContent}
           <span className="truncate">{props.item.title}</span>
+          {props.item.titleTrailingContent}
         </span>
       )}
       {props.item.timestamp ? (

apps/web/src/components/Sidebar.tsx

@@ -11,6 +11,12 @@ import {
   TerminalIcon,
   TriangleAlertIcon,
 } from "lucide-react";
+import {
+  prStatusIndicator,
+  resolveThreadPr,
+  terminalStatusFromRunningIds,
+  ThreadStatusLabel,
+} from "./ThreadStatusIndicators";
 import { ProjectFavicon } from "./ProjectFavicon";
 import { autoAnimate } from "@formkit/auto-animate";
 import React, { useCallback, useEffect, memo, useMemo, useRef, useState } from "react";
@@ -225,122 +231,6 @@ type SidebarProjectSnapshot = Project & {
   /** Labels for remote environments this project lives in. */
   remoteEnvironmentLabels: readonly string[];
 };
-interface TerminalStatusIndicator {
-  label: "Terminal process running";
-  colorClass: string;
-  pulse: boolean;
-}
-
-interface PrStatusIndicator {
-  label: "PR open" | "PR closed" | "PR merged" | "MR open" | "MR closed" | "MR merged";
-  colorClass: string;
-  tooltip: string;
-  url: string;
-}
-
-type ThreadPr = GitStatusResult["pr"];
-
-function ThreadStatusLabel({
-  status,
-  compact = false,
-}: {
-  status: ThreadStatusPill;
-  compact?: boolean;
-}) {
-  if (compact) {
-    return (
-      <span
-        title={status.label}
-        className={`inline-flex size-3.5 shrink-0 items-center justify-center ${status.colorClass}`}
-      >
-        <span
-          className={`size-[9px] rounded-full ${status.dotClass} ${
-            status.pulse ? "animate-pulse" : ""
-          }`}
-        />
-        <span className="sr-only">{status.label}</span>
-      </span>
-    );
-  }
-
-  return (
-    <span
-      title={status.label}
-      className={`inline-flex items-center gap-1 text-[10px] ${status.colorClass}`}
-    >
-      <span
-        className={`h-1.5 w-1.5 rounded-full ${status.dotClass} ${
-          status.pulse ? "animate-pulse" : ""
-        }`}
-      />
-      <span className="hidden md:inline">{status.label}</span>
-    </span>
-  );
-}
-
-function terminalStatusFromRunningIds(
-  runningTerminalIds: string[],
-): TerminalStatusIndicator | null {
-  if (runningTerminalIds.length === 0) {
-    return null;
-  }
-  return {
-    label: "Terminal process running",
-    colorClass: "text-teal-600 dark:text-teal-300/90",
-    pulse: true,
-  };
-}
-
-type GitHostProvider = NonNullable<GitStatusResult["gitHostProvider"]>;
-
-interface ThreadPrWithProvider {
-  pr: ThreadPr;
-  gitHostProvider: GitHostProvider | undefined;
-}
-
-function prStatusIndicator(input: ThreadPrWithProvider): PrStatusIndicator | null {
-  const { pr, gitHostProvider } = input;
-  if (!pr) return null;
-
-  const label = gitHostProvider === "gitlab" ? "MR" : "PR";
-
-  if (pr.state === "open") {
-    return {
-      label: `${label} open`,
-      colorClass: "text-emerald-600 dark:text-emerald-300/90",
-      tooltip: `#${pr.number} ${label} open: ${pr.title}`,
-      url: pr.url,
-    };
-  }
-  if (pr.state === "closed") {
-    return {
-      label: `${label} closed`,
-      colorClass: "text-zinc-500 dark:text-zinc-400/80",
-      tooltip: `#${pr.number} ${label} closed: ${pr.title}`,
-      url: pr.url,
-    };
-  }
-  if (pr.state === "merged") {
-    return {
-      label: `${label} merged`,
-      colorClass: "text-violet-600 dark:text-violet-300/90",
-      tooltip: `#${pr.number} ${label} merged: ${pr.title}`,
-      url: pr.url,
-    };
-  }
-  return null;
-}
-
-function resolveThreadPr(
-  threadBranch: string | null,
-  gitStatus: GitStatusResult | null,
-): ThreadPr | null {
-  if (threadBranch === null || gitStatus === null || gitStatus.branch !== threadBranch) {
-    return null;
-  }
-
-  return gitStatus.pr ?? null;
-}
 
 interface SidebarThreadRowProps {
   thread: SidebarThreadSummary;