@cueloop/client 0.1.0-alpha.65 → 0.1.0-alpha.66

package/src/components/ShellHeader.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ShellHeader } from "./ShellHeader";
+import { NERD } from "./primitives/icons";
+
+export const meta: StoryMeta = { title: "Layout/ShellHeader" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", backgroundColor: DARK.panel }}>{children}</box>;
+}
+
+export const ReviewSurface: Story = {
+  render: () => (
+    <Frame>
+      <ShellHeader
+        leftIcons={[{ glyph: NERD.settings }]}
+        leftLabel="Read Cueloop Repository"
+        tabs={[{ label: "Changes", active: true }]}
+        rightIcons={[
+          { glyph: NERD.expand },
+          { glyph: NERD.diff, active: true },
+          { glyph: NERD.listTree },
+        ]}
+        onToggleSidebar={() => {}}
+        onToggleInspector={() => {}}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted],
+  size: { width: 120, height: 3 },
+};
+
+export const InspectorCollapsed: Story = {
+  render: () => (
+    <Frame>
+      <ShellHeader
+        leftIcons={[{ glyph: NERD.settings }]}
+        leftLabel="Read Cueloop Repository"
+        rightIcons={[{ glyph: NERD.search }, { glyph: NERD.expand }]}
+        onToggleSidebar={() => {}}
+        sidebarOpen={false}
+        onToggleInspector={() => {}}
+        inspectorOpen={false}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.textMuted],
+  size: { width: 120, height: 3 },
+};

package/src/components/ShellHeader.tsx

@@ -0,0 +1,137 @@
+// The app shell's top bar: left panel toggle + icons + label, an optional title, right icons + panel toggle.
+
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import { NERD } from "./primitives/icons";
+
+export interface ShellTab {
+  label: string;
+  active?: boolean;
+}
+
+// A header icon; active paints it in the brand accent to mark the current view or mode.
+export interface ShellIcon {
+  glyph: string;
+  active?: boolean;
+  onPress?: () => void;
+}
+
+export interface ShellHeaderProps {
+  leftIcons?: readonly ShellIcon[];
+  leftLabel?: string;
+  titleIcon?: string;
+  title?: string;
+  tabs?: readonly ShellTab[];
+  rightIcons?: readonly ShellIcon[];
+  sidebarOpen?: boolean;
+  onToggleSidebar?: () => void;
+  inspectorOpen?: boolean;
+  onToggleInspector?: () => void;
+  theme?: Theme;
+}
+
+function IconView({
+  icon,
+  tokens,
+  marginRight,
+}: {
+  icon: ShellIcon;
+  tokens: Theme;
+  marginRight: number;
+}): React.ReactNode {
+  const color = icon.active ? tokens.accent : tokens.textMuted;
+
+  // alignSelf center keeps the clickable box on the same row as sibling icons
+  return (
+    <box onMouseUp={icon.onPress} style={{ alignSelf: "center", marginRight }}>
+      <text fg={color}>{icon.glyph}</text>
+    </box>
+  );
+}
+
+export function ShellHeader({
+  leftIcons = [],
+  leftLabel,
+  titleIcon,
+  title,
+  tabs = [],
+  rightIcons = [],
+  sidebarOpen = true,
+  onToggleSidebar,
+  inspectorOpen = true,
+  onToggleInspector,
+  theme,
+}: ShellHeaderProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: "100%",
+        alignItems: "center",
+        paddingLeft: 2,
+        paddingRight: 2,
+      }}
+    >
+      <box style={{ flexDirection: "row", alignItems: "center" }}>
+        {onToggleSidebar !== undefined ? (
+          <IconView
+            icon={{
+              glyph: sidebarOpen ? NERD.sidebarLeft : NERD.sidebarLeftOff,
+              onPress: onToggleSidebar,
+            }}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ) : null}
+        {leftIcons.map((icon, index) => (
+          <IconView
+            key={`left-${index}-${icon.glyph}`}
+            icon={icon}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ))}
+        {leftLabel !== undefined ? (
+          <text fg={tokens.textMuted}>
+            {leftLabel}
+            {"  "}
+          </text>
+        ) : null}
+        {titleIcon !== undefined ? <text fg={tokens.textDim}>{titleIcon} </text> : null}
+        {title !== undefined ? <text fg={tokens.text}>{title}</text> : null}
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <box style={{ flexDirection: "row", alignItems: "center" }}>
+        {tabs.map((tab, index) => (
+          <text
+            key={`tab-${index}-${tab.label}`}
+            fg={tab.active ? tokens.accent : tokens.textMuted}
+          >
+            {tab.label}
+            {"   "}
+          </text>
+        ))}
+        {rightIcons.map((icon, index) => (
+          <IconView
+            key={`right-${index}-${icon.glyph}`}
+            icon={icon}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ))}
+        {onToggleInspector !== undefined ? (
+          <IconView
+            icon={{
+              glyph: inspectorOpen ? NERD.sidebarRight : NERD.sidebarRightOff,
+              onPress: onToggleInspector,
+            }}
+            tokens={tokens}
+            marginRight={0}
+          />
+        ) : null}
+      </box>
+    </box>
+  );
+}

package/src/components/ThreadFooter.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ThreadFooter } from "./ThreadFooter";
+
+export const meta: StoryMeta = { title: "Chrome/ThreadFooter" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", backgroundColor: DARK.panel }}>{children}</box>;
+}
+
+export const Default: Story = {
+  render: () => (
+    <Frame>
+      <ThreadFooter repo="cueloop" branch="main" onSubmit={() => {}} />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted],
+  size: { width: 80, height: 1 },
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <Frame>
+      <ThreadFooter repo="cueloop" branch="design/tui" canSubmit={false} onSubmit={() => {}} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 1 },
+};

package/src/components/ThreadFooter.tsx

@@ -0,0 +1,49 @@
+// The thread's bottom band: a header-like bar shown only under the always-visible
+// thread column. It carries the repo/branch context on the left and a written,
+// clickable "Send message" control on the right.
+
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import { NERD } from "./primitives/icons";
+
+export interface ThreadFooterProps {
+  repo: string;
+  branch: string;
+  onSubmit?: () => void;
+  /** When false the send control dims and does not fire (e.g. an observer). */
+  canSubmit?: boolean;
+  theme?: Theme;
+}
+
+export function ThreadFooter({
+  repo,
+  branch,
+  onSubmit,
+  canSubmit = true,
+  theme,
+}: ThreadFooterProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: 1,
+        alignItems: "center",
+        paddingLeft: 1,
+        paddingRight: 1,
+        backgroundColor: tokens.panel,
+      }}
+    >
+      <text>
+        <span fg={tokens.blue}>{`${NERD.folderClosed} `}</span>
+        <span fg={tokens.textMuted}>{repo}</span>
+        <span fg={tokens.textDim}>{` / ${branch}`}</span>
+      </text>
+      <box style={{ flexGrow: 1 }} />
+      <box onMouseUp={canSubmit ? onSubmit : undefined}>
+        <text fg={canSubmit ? tokens.accent : tokens.textDim}>send message</text>
+      </box>
+    </box>
+  );
+}

package/src/components/ThreadView.slash.test.tsx

@@ -0,0 +1,113 @@
+/** Inline skill completion in the composer (#25): the trailing "/word" token and its match. */
+
+import { describe, expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import type { QuickAction } from "../config";
+import { settle, typeText } from "../test-support";
+import { buildDisplay, marksByDisplay } from "../view-plan";
+import { fixturePlanSession } from "./story-fixtures";
+import { inlineSlashToken, resolveInlineSuggestion, ThreadView } from "./ThreadView";
+
+const SKILLS: QuickAction[] = [
+  { prompt: "typescript magician" },
+  { prompt: "implement" },
+  { prompt: "write discoverable code" },
+];
+
+const PLAN = "# Plan\n\nRefine the store before the rewrite lands.\n";
+
+async function mountComposer() {
+  const display = buildDisplay(PLAN, undefined);
+  const setup = await testRender(
+    <ThreadView
+      session={fixturePlanSession({
+        artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
+      })}
+      display={display}
+      marks={marksByDisplay([], display)}
+      quickActions={SKILLS}
+      observer={false}
+      onAnnotate={() => {}}
+      onReply={() => {}}
+      onUpdateAnnotation={() => {}}
+      onExit={() => {}}
+    />,
+    { width: 72, height: 20 },
+  );
+
+  await settle(setup);
+  await settle(setup);
+
+  return setup;
+}
+
+describe("inlineSlashToken", () => {
+  test("finds the trailing slash token when text precedes it", () => {
+    expect(inlineSlashToken("please run /type")).toBe("/type");
+  });
+
+  test("ignores a draft that is itself a leading slash (that is the palette)", () => {
+    expect(inlineSlashToken("/type")).toBeNull();
+  });
+
+  test("is newline-safe: a token at the start of a later line still resolves", () => {
+    expect(inlineSlashToken("first line\n/impl")).toBe("/impl");
+  });
+
+  test("returns null when the trailing word is not a slash token", () => {
+    expect(inlineSlashToken("just some prose")).toBeNull();
+  });
+
+  test("a bare slash mid-sentence is a valid, empty-query token", () => {
+    expect(inlineSlashToken("run /")).toBe("/");
+  });
+});
+
+describe("resolveInlineSuggestion", () => {
+  test("offers the fuzzy closest skill for the trailing token", () => {
+    const inline = resolveInlineSuggestion(false, "run /type", SKILLS);
+
+    expect(inline?.token).toBe("/type");
+    expect(inline?.suggestion.name).toBe("typescript-magician");
+  });
+
+  test("prefers a prefix match over a subsequence match", () => {
+    const inline = resolveInlineSuggestion(false, "run /impl", SKILLS);
+
+    expect(inline?.suggestion.name).toBe("implement");
+  });
+
+  test("stays silent while the palette owns a leading slash", () => {
+    expect(resolveInlineSuggestion(true, "/type", SKILLS)).toBeNull();
+  });
+
+  test("returns null when nothing matches the token", () => {
+    expect(resolveInlineSuggestion(false, "run /zzzz", SKILLS)).toBeNull();
+  });
+});
+
+describe("inline completion in the composer", () => {
+  test("typing an inline slash shows the tab-hint, and tab completes to the full name", async () => {
+    // Arrange - open a composer and type text with a trailing slash token
+    const setup = await mountComposer();
+
+    await typeText(setup, "run /type");
+
+    // Assert - the hint offers the closest skill, marked with the tab glyph
+    const withHint = setup.captureCharFrame();
+
+    expect(withHint).toContain("⇥");
+    expect(withHint).toContain("/typescript-magician");
+
+    // Act - tab completes the token
+    setup.mockInput.pressKey("TAB");
+    await settle(setup);
+
+    // Assert - the hint is gone and the composer now carries the full skill name
+    const completed = setup.captureCharFrame();
+
+    expect(completed).not.toContain("⇥");
+    expect(completed).toContain("typescript-magician");
+  });
+});

package/src/components/ThreadView.stories.tsx

@@ -5,7 +5,7 @@ import type { Story, StoryMeta } from "./story";
 import { fixtureDisplay, fixtureMarks, fixturePlanSession } from "./story-fixtures";
 import { ThreadView } from "./ThreadView";
 
-export const meta: StoryMeta = { title: "ThreadView" };
+export const meta: StoryMeta = { title: "Surfaces/ThreadView" };
 
 export const InlineThreads: Story = {
   render: () => (

package/src/components/ThreadView.tsx

@@ -432,6 +432,38 @@ function slashFilter(items: SlashItem[], query: string): SlashItem[] {
   return scored.toSorted((left, right) => right.score - left.score).map((entry) => entry.item);
 }
 
+/**
+ * A skill invoked mid-sentence: the trailing "/word" token when text already
+ * precedes it (a draft that starts with "/" is the palette, not an inline
+ * completion). Newline-safe, since the token may sit at the start of a new line.
+ */
+export function inlineSlashToken(text: string): string | null {
+  if (text.startsWith("/")) return null;
+  const match = /(?:^|\s)(\/[a-zA-Z0-9-]*)$/.exec(text);
+
+  return match ? match[1]! : null;
+}
+
+interface InlineSlash {
+  token: string;
+  suggestion: SlashItem;
+}
+
+/** The inline completion state: the trailing "/word" and its closest skill, or null. */
+export function resolveInlineSuggestion(
+  slashActive: boolean,
+  text: string,
+  quickActions: QuickAction[],
+): InlineSlash | null {
+  if (slashActive) return null;
+  const token = inlineSlashToken(text);
+
+  if (token === null) return null;
+  const suggestion = slashFilter(slashItemsFrom(quickActions), token.slice(1))[0];
+
+  return suggestion ? { token, suggestion } : null;
+}
+
 function SlashList({
   items,
   selected,
@@ -470,6 +502,44 @@ function SlashList({
   );
 }
 
+/** Below the composer: the palette list for a leading "/", else the inline tab-hint, else nothing. */
+function ComposerPalette({
+  slashActive,
+  slashItems,
+  slashIndex,
+  inline,
+  tokens,
+}: {
+  slashActive: boolean;
+  slashItems: SlashItem[];
+  slashIndex: number;
+  inline: InlineSlash | null;
+  tokens: Theme;
+}): React.ReactNode {
+  if (slashActive) {
+    return (
+      <box style={{ flexDirection: "column", marginLeft: 3 }}>
+        <SlashList
+          items={slashItems}
+          selected={Math.min(slashIndex, Math.max(0, slashItems.length - 1))}
+          tokens={tokens}
+        />
+      </box>
+    );
+  }
+  if (inline === null) return null;
+
+  return (
+    <box style={{ flexDirection: "row", marginLeft: 3 }}>
+      <text>
+        <span fg={tokens.textDim}>{"⇥ "}</span>
+        <span fg={tokens.accent}>{`/${inline.suggestion.name}`}</span>
+        <span fg={tokens.textDim}>{`  ${inline.suggestion.description}`}</span>
+      </text>
+    </box>
+  );
+}
+
 /* ------------------------------------------------------------ discussion card */
 
 /** One card row group with its own accent-edge color, one per voice. */
@@ -949,6 +1019,9 @@ export function ThreadView({
   const slashItems = slashActive
     ? slashFilter(slashItemsFrom(quickActions), composeText.slice(1).trim())
     : [];
+  // inline skill completion: the trailing "/word" token and its closest match,
+  // offered as a hint below the composer that tab completes to the full name
+  const inlineSlash = resolveInlineSuggestion(slashActive, composeText, quickActions);
 
   const saveComment = (body: string): void => {
     // the body saves verbatim - typed newlines are the author's choice;
@@ -1071,6 +1144,17 @@ export function ThreadView({
     return false;
   };
 
+  /** Tab completes the trailing "/word" to the matched skill's full name, then a space to chain. */
+  const handleInlineSlashKey = (key: KeyEvent, activeCompose: ComposeState): boolean => {
+    if (inlineSlash === null || key.name !== "tab") return false;
+    const cut = composeText.length - inlineSlash.token.length;
+    const completed = `${composeText.slice(0, cut)}/${inlineSlash.suggestion.name} `;
+
+    openCompose({ ...activeCompose, seed: completed });
+
+    return true;
+  };
+
   /** Pre-mount window: buffer printables, honor a fast cmd+enter or newline. */
   const handlePremountKey = (key: KeyEvent, activeCompose: ComposeState): void => {
     if (key.name === "return") {
@@ -1112,6 +1196,7 @@ export function ThreadView({
       return closeCompose();
     }
     if (handleSlashKey(key, activeCompose)) return;
+    if (handleInlineSlashKey(key, activeCompose)) return;
     if (!composerReady.current) handlePremountKey(key, activeCompose);
   };
 
@@ -1291,15 +1376,18 @@ export function ThreadView({
       onInput={setComposeText}
     />
   ) : null;
-  const slashNode = slashActive ? (
-    <box key="slash-palette" style={{ flexDirection: "column", marginLeft: 3 }}>
-      <SlashList
-        items={slashItems}
-        selected={Math.min(slashIndex, Math.max(0, slashItems.length - 1))}
-        tokens={tokens}
-      />
-    </box>
-  ) : null;
+  // one node below the composer: the palette list for a leading "/", otherwise the
+  // inline completion hint. Renders null when neither applies, so it always pushes.
+  const paletteNode = (
+    <ComposerPalette
+      key="composer-palette"
+      slashActive={slashActive}
+      slashItems={slashItems}
+      slashIndex={slashIndex}
+      inline={inlineSlash}
+      tokens={tokens}
+    />
+  );
 
   const foldedSummaryFor = (discussion: Discussion): React.ReactNode => (
     <box key={discussion.key} style={{ flexDirection: "row", marginTop: 1, marginLeft: 2 }}>
@@ -1468,7 +1556,7 @@ export function ThreadView({
         continue;
       }
       nodes.push(discussionCardFor(discussion, composingHere));
-      if (composingHere && slashNode) nodes.push(slashNode);
+      if (composingHere) nodes.push(paletteNode);
     }
     if (composeHere && compose.discussionKey === null && composerNode) {
       const anchoredHere = compose.span ? endsInLine(compose.span.end.char) : isLastLine;
@@ -1481,7 +1569,7 @@ export function ThreadView({
             segments={[{ color: palette.cardEdge, node: composerNode }]}
           />,
         );
-        if (slashNode) nodes.push(slashNode);
+        nodes.push(paletteNode);
       }
     }
 

package/src/components/ThreadsSidebar.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ThreadsSidebar } from "./ThreadsSidebar";
+import { groupInbox } from "./session-tree";
+import { fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "Surfaces/ThreadsSidebar" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", height: "100%", flexDirection: "row" }}>{children}</box>;
+}
+
+const plan = fixturePlanSession();
+const projectPlan = {
+  ...plan,
+  workspace: { ...plan.workspace, rootCommit: "root-1", remote: "git@github.com:acme/widget.git" },
+};
+const { rows, ordered } = groupInbox([projectPlan, fixtureDiffSession()]);
+
+export const Open: Story = {
+  render: () => (
+    <Frame>
+      <ThreadsSidebar
+        open
+        rows={rows}
+        cursor={0}
+        activeId={ordered[0]!.id}
+        onSelect={() => {}}
+        theme={DARK}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.border],
+  size: { width: 60, height: 12 },
+};

package/src/components/ThreadsSidebar.tsx

@@ -0,0 +1,57 @@
+// The left Projects and Threads column: a collapsible, scrollable tree beside the
+// thread. A click jumps to that thread; the open thread stays highlighted. Renders
+// nothing when collapsed so the thread reclaims the width.
+
+import React from "react";
+import type { Theme } from "../theme";
+import { InboxList } from "./InboxList";
+import type { InboxRow } from "./session-tree";
+
+export interface ThreadsSidebarProps {
+  open: boolean;
+  rows: InboxRow[];
+  cursor: number;
+  /** The open thread's id, highlighted in the list. */
+  activeId?: string;
+  onSelect: (sessionId: string) => void;
+  /** Ask to delete a thread (the selected row's [delete] button). */
+  onRequestDelete?: (id: string, title: string) => void;
+  width?: number;
+  theme?: Theme;
+}
+
+export function ThreadsSidebar({
+  open,
+  rows,
+  cursor,
+  activeId,
+  onSelect,
+  onRequestDelete,
+  width = 30,
+  theme,
+}: ThreadsSidebarProps): React.ReactNode {
+  if (!open) return null;
+
+  return (
+    <box
+      style={{
+        width,
+        flexDirection: "column",
+        borderStyle: "single",
+        border: ["right"],
+        borderColor: theme?.border,
+      }}
+    >
+      <scrollbox style={{ flexGrow: 1 }} focused={false}>
+        <InboxList
+          rows={rows}
+          cursor={cursor}
+          activeId={activeId}
+          onSelect={onSelect}
+          onRequestDelete={onRequestDelete}
+          theme={theme}
+        />
+      </scrollbox>
+    </box>
+  );
+}

package/src/components/Toast.stories.tsx

@@ -3,7 +3,7 @@ import { DARK } from "../theme";
 import type { Story, StoryMeta } from "./story";
 import { Toast } from "./Toast";
 
-export const meta: StoryMeta = { title: "Toast" };
+export const meta: StoryMeta = { title: "Overlays/Toast" };
 
 export const ShareLink: Story = {
   render: () => <Toast title="share link copied" body="ssh review-4f2a@cueloop.dev" />,

package/src/components/TreePane.stories.tsx

@@ -4,7 +4,7 @@ import type { Story, StoryMeta } from "./story";
 import { TreePane } from "./TreePane";
 import type { TreeRow } from "../tree-view";
 
-export const meta: StoryMeta = { title: "TreePane" };
+export const meta: StoryMeta = { title: "Surfaces/TreePane" };
 
 const callbacks = {
   onSelect: () => {},

package/src/components/WalkWizard.stories.tsx

@@ -4,7 +4,7 @@ import type { WalkFile } from "../walk";
 import type { Story, StoryMeta } from "./story";
 import { WalkWizard } from "./WalkWizard";
 
-export const meta: StoryMeta = { title: "WalkWizard" };
+export const meta: StoryMeta = { title: "Overlays/WalkWizard" };
 
 const FILES: WalkFile[] = [
   {