@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.91

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/SlashComposer.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { SlashComposer } from "./SlashComposer";
+
+export const meta: StoryMeta = { title: "Chrome/SlashComposer" };
+
+export const Empty: Story = {
+  render: () => (
+    <box style={{ width: 60, height: 8, paddingLeft: 1, backgroundColor: DARK.panel }}>
+      <SlashComposer
+        seed=""
+        glyph="●"
+        quickActions={DEFAULT_QUICK_ACTIONS}
+        tokens={DARK}
+        onSubmit={() => {}}
+      />
+    </box>
+  ),
+  size: { width: 60, height: 8 },
+};
+
+export const WithDraft: Story = {
+  render: () => (
+    <box style={{ width: 60, height: 8, paddingLeft: 1, backgroundColor: DARK.panel }}>
+      <SlashComposer
+        seed="looks good, ship it"
+        glyph="●"
+        quickActions={DEFAULT_QUICK_ACTIONS}
+        tokens={DARK}
+        onSubmit={() => {}}
+      />
+    </box>
+  ),
+  size: { width: 60, height: 8 },
+};

package/src/components/SlashComposer.tsx

@@ -0,0 +1,87 @@
+/** A composer with the "/" actions-and-skills palette, sharing the inline-comment edit experience. */
+
+import React, { useContext, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { SlashSkillsContext } from "../skills";
+import {
+  activeSlashToken,
+  insertSlashItem,
+  mergeSlashItems,
+  slashFilter,
+  slashItemsFrom,
+} from "../slash-palette";
+import { Composer, ComposerPalette } from "./AnnotationCards";
+
+export interface SlashComposerProps {
+  seed: string;
+  glyph: string;
+  quickActions: QuickAction[];
+  tokens: Theme;
+  onSubmit: (text: string) => void;
+  onInput?: (text: string) => void;
+  placeholder?: string;
+}
+
+export function SlashComposer({
+  seed,
+  glyph,
+  quickActions,
+  tokens,
+  onSubmit,
+  onInput,
+  placeholder,
+}: SlashComposerProps): React.ReactNode {
+  const skills = useContext(SlashSkillsContext);
+  const [mountSeed, setMountSeed] = useState(seed);
+  const [text, setText] = useState(seed);
+  const [caret, setCaret] = useState(seed.length);
+  const [slashIndex, setSlashIndex] = useState(0);
+
+  const paletteItems = mergeSlashItems(slashItemsFrom(quickActions), skills);
+  const token = activeSlashToken(text, caret);
+  const items = token !== null ? slashFilter(paletteItems, token.slice(1)) : [];
+  const slashActive = token !== null && items.length > 0;
+
+  useKeyboard((key) => {
+    if (!slashActive) return;
+    const selected = Math.min(slashIndex, items.length - 1);
+
+    if (key.name === "up") return setSlashIndex(Math.max(0, selected - 1));
+    if (key.name === "down") return setSlashIndex(Math.min(items.length - 1, selected + 1));
+    if (key.name === "tab" || (key.name === "return" && !key.meta && !key.ctrl && !key.super)) {
+      const inserted = insertSlashItem(text, caret, items[selected]!.name);
+
+      setMountSeed(inserted.text);
+      setText(inserted.text);
+      setCaret(inserted.caret);
+      onInput?.(inserted.text);
+    }
+  });
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <Composer
+        key={mountSeed}
+        seed={mountSeed}
+        glyph={glyph}
+        tokens={tokens}
+        placeholder={placeholder}
+        onReady={() => {}}
+        onSave={onSubmit}
+        onInput={(next, nextCaret) => {
+          setText(next);
+          setCaret(nextCaret);
+          onInput?.(next);
+        }}
+      />
+      <ComposerPalette
+        slashActive={slashActive}
+        slashItems={items}
+        slashIndex={slashIndex}
+        tokens={tokens}
+      />
+    </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: 2 },
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <Frame>
+      <ThreadFooter repo="cueloop" branch="design/tui" canSubmit={false} onSubmit={() => {}} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 2 },
+};

package/src/components/ThreadFooter.test.tsx

@@ -0,0 +1,47 @@
+/** The thread footer keeps its repo/branch context on one line: a long branch truncates to an
+ * ellipsis rather than wrapping and pushing the send control onto a second row. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { ThreadFooter } from "./ThreadFooter";
+import { settle } from "../test-support";
+import { DARK } from "../theme";
+
+test("a long branch truncates on one line and keeps the send control in place", async () => {
+  const setup = await testRender(
+    <box style={{ width: 60, height: 3, backgroundColor: DARK.background }}>
+      <box style={{ flexGrow: 1 }} />
+      <ThreadFooter
+        repo="cueloop"
+        branch="design/tui-tree-and-edgy-really-long-name"
+        onSubmit={() => {}}
+        theme={DARK}
+      />
+    </box>,
+    { width: 60, height: 3 },
+  );
+  await settle(setup);
+  await settle(setup);
+
+  const frame = setup.captureCharFrame();
+  const footerRow = frame.split("\n").find((line) => line.includes("cueloop"))!;
+  // the repo/branch context and the send control share the single footer row
+  expect(footerRow).toContain("Send message (0)");
+  // the branch is clipped to an ellipsis, not wrapped onto a second row
+  expect(footerRow).toContain("…");
+  expect(frame).not.toContain("long-name");
+
+  setup.renderer.destroy();
+});
+
+test("the footer shows the open annotation count", async () => {
+  const setup = await testRender(
+    <ThreadFooter repo="cueloop" branch="main" pendingAnnotations={3} theme={DARK} />,
+    { width: 60, height: 3 },
+  );
+
+  await settle(setup);
+  expect(setup.captureCharFrame()).toContain("Send message (3)");
+  setup.renderer.destroy();
+});

package/src/components/ThreadFooter.tsx

@@ -0,0 +1,76 @@
+// The thread's bottom band: a header-like bar under the thread column, or the
+// Changes column when a zoom drops the thread column. It carries the repo/branch
+// context on the left and a written, clickable "Send message (n)" control on the right.
+
+import React, { useRef } from "react";
+import type { BoxRenderable } from "@opentui/core";
+import { DARK, type Theme } from "../theme";
+import { useFrameMeasure } from "../use-frame-measure";
+import { truncateTitle } from "./truncate-title";
+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;
+  /** Open reviewer annotations included in the next Message. */
+  pendingAnnotations?: number;
+  theme?: Theme;
+}
+
+const ICON_COLUMNS = 2; // folder glyph + its trailing space
+const SEPARATOR = " / ";
+
+/** Rows the footer band occupies, so a footer-less sibling pane can offset its centered content to match. */
+export const THREAD_FOOTER_HEIGHT = 2;
+
+export function ThreadFooter({
+  repo,
+  branch,
+  onSubmit,
+  canSubmit = true,
+  pendingAnnotations = 0,
+  theme,
+}: ThreadFooterProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+  const boxRef = useRef<BoxRenderable | null>(null);
+  const width = useFrameMeasure(
+    () => boxRef.current?.width ?? 0,
+    (left, right) => left === right,
+    0,
+  );
+  const branchBudget = width - ICON_COLUMNS - repo.length - SEPARATOR.length;
+  const clippedBranch = width > 0 ? truncateTitle(branch, Math.max(0, branchBudget)) : branch;
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: THREAD_FOOTER_HEIGHT,
+        alignItems: "center",
+        paddingLeft: 1,
+        paddingRight: 1,
+        backgroundColor: tokens.panel,
+        borderStyle: "single",
+        border: ["top"],
+        borderColor: tokens.border,
+      }}
+    >
+      <box ref={boxRef} style={{ flexShrink: 1, minWidth: 0, marginRight: 2 }}>
+        <text wrapMode="none">
+          <span fg={tokens.blue}>{`${NERD.folderClosed} `}</span>
+          <span fg={tokens.textMuted}>{repo}</span>
+          <span fg={tokens.textDim}>{`${SEPARATOR}${clippedBranch}`}</span>
+        </text>
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <box onMouseUp={canSubmit ? onSubmit : undefined} style={{ flexShrink: 0 }}>
+        <text fg={canSubmit ? tokens.accent : tokens.textDim}>
+          {`Send message (${pendingAnnotations})`}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/components/ThreadTree.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ThreadTree } from "./ThreadTree";
+import { groupInbox } from "./thread-tree";
+import { fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "Surfaces/ThreadTree" };
+
+/** ThreadTree is the body under App's header/menu chrome; a frame gives it height. */
+function BodyFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ flexDirection: "column", width: "100%", height: "100%" }}>{children}</box>;
+}
+
+export const TwoPending: Story = {
+  render: () => {
+    const plan = fixturePlanSession();
+    // one repo-bound thread (a project) and one standalone thread
+    const projectPlan = {
+      ...plan,
+      workspace: {
+        ...plan.workspace,
+        rootCommit: "root-1",
+        remote: "git@github.com:acme/widget.git",
+      },
+    };
+    const { rows } = groupInbox([projectPlan, fixtureDiffSession()]);
+
+    return (
+      <BodyFrame>
+        <ThreadTree rows={rows} cursor={0} />
+      </BodyFrame>
+    );
+  },
+  expectedColors: [DARK.accent],
+  size: { width: 80, height: 12 },
+};
+
+export const Empty: Story = {
+  render: () => (
+    <BodyFrame>
+      <ThreadTree rows={[]} cursor={0} />
+    </BodyFrame>
+  ),
+  size: { width: 80, height: 8 },
+};