@cueloop/client 0.1.0-alpha.10 → 0.1.0-alpha.100

package/src/keyboard/components/KeybindsDialog.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+import { Dialog } from "../../ui/components/primitives/Dialog";
+import type { CheatsheetSection } from "../key-bindings";
+
+export interface KeybindsDialogProps {
+  sections: CheatsheetSection[];
+  theme?: Theme;
+}
+
+/** Rows a section takes: its title, its entries, and the blank line after it. */
+function sectionRows(section: CheatsheetSection): number {
+  return 1 + section.entries.length + 1;
+}
+
+/**
+ * Split the sections over `count` columns, filling each column to the
+ * balanced share of rows before starting the next, so a long cheatsheet
+ * reads top to bottom, then left to right.
+ */
+function columnsOf(sections: CheatsheetSection[], count: number): CheatsheetSection[][] {
+  const total = sections.reduce((sum, section) => sum + sectionRows(section), 0);
+  const share = Math.ceil(total / count);
+  const columns: CheatsheetSection[][] = [[]];
+  let filled = 0;
+
+  for (const section of sections) {
+    const column = columns[columns.length - 1]!;
+
+    if (filled > 0 && filled + sectionRows(section) > share && columns.length < count) {
+      columns.push([section]);
+      filled = sectionRows(section);
+    } else {
+      column.push(section);
+      filled += sectionRows(section);
+    }
+  }
+
+  return columns;
+}
+
+const COLUMN_WIDTH = 48;
+
+export function KeybindsDialog({ sections, theme }: KeybindsDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+  const totalRows = sections.reduce((sum, section) => sum + sectionRows(section), 0) + 1;
+  // a cheatsheet taller than the terminal folds into a second column
+  const columnCount =
+    totalRows + 3 > terminalHeight - 4 && terminalWidth >= COLUMN_WIDTH * 2 + 6 ? 2 : 1;
+  const columns = columnsOf(sections, columnCount);
+  const tallest = Math.max(
+    ...columns.map((column) => column.reduce((sum, section) => sum + sectionRows(section), 0)),
+  );
+  const width = Math.min(COLUMN_WIDTH * columnCount + 4, terminalWidth - 6);
+  const height = Math.min(terminalHeight - 4, tallest + 1 + 3);
+
+  return (
+    <Dialog
+      isOpen
+      title=" keybinds "
+      width={width}
+      height={height}
+      background={tokens.elevated}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <box style={{ flexDirection: "row", flexGrow: 1 }}>
+          {columns.map((column, columnIndex) => (
+            <box key={columnIndex} style={{ flexDirection: "column", width: COLUMN_WIDTH }}>
+              {column.map((section) => (
+                <box key={section.title} style={{ flexDirection: "column" }}>
+                  <text fg={tokens.accent}>{section.title}</text>
+                  {section.entries.map((entry, index) => (
+                    <text key={index}>
+                      <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
+                      <span fg={tokens.textMuted}>{entry.label}</span>
+                    </text>
+                  ))}
+                  <text> </text>
+                </box>
+              ))}
+            </box>
+          ))}
+        </box>
+        <box style={{ flexDirection: "row" }}>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>[esc]</text>
+        </box>
+      </box>
+    </Dialog>
+  );
+}

package/src/keyboard/components/NavModeHint.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { NavModeHint } from "./NavModeHint";
+
+export const meta: StoryMeta = { title: "Chrome/NavModeHint" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", backgroundColor: DARK.panel }}>{children}</box>;
+}
+
+export const ThreadNav: Story = {
+  render: () => (
+    <Frame>
+      <NavModeHint navMode surface="thread" theme={DARK} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 1 },
+};
+
+export const DiffNav: Story = {
+  render: () => (
+    <Frame>
+      <NavModeHint navMode surface="diff" theme={DARK} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 1 },
+};
+
+export const Composing: Story = {
+  render: () => (
+    <Frame>
+      <NavModeHint navMode={false} surface="thread" theme={DARK} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 1 },
+};

package/src/keyboard/components/NavModeHint.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import type { Theme } from "../../appearance/theme";
+
+const DIFF_NAV_HINT = "x reject · c fold · d layout · k walk · ⏎ submit · type to leave";
+const THREAD_NAV_HINT = "c comment · e edit · s share · n/p cards · ⏎ submit · type to leave";
+const BARE_NAV_HINT = "c comment · z fold · type to leave";
+const COMPOSE_HINT = "type to comment · esc for nav mode";
+
+const NAV_HINTS = { thread: THREAD_NAV_HINT, diff: DIFF_NAV_HINT, bare: BARE_NAV_HINT };
+
+export type NavHintSurface = keyof typeof NAV_HINTS;
+
+export function NavModeHint({
+  navMode,
+  surface,
+  theme,
+}: {
+  navMode: boolean;
+  surface: NavHintSurface;
+  theme: Theme;
+}): React.ReactNode {
+  const navHint = NAV_HINTS[surface];
+
+  return (
+    <box style={{ height: 1, flexDirection: "row", paddingLeft: 2 }}>
+      <text selectable={false} fg={theme.textDim}>
+        {navMode ? navHint : COMPOSE_HINT}
+      </text>
+    </box>
+  );
+}

package/src/keyboard/components/SlashComposer.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import { DEFAULT_QUICK_ACTIONS } from "../../settings/config";
+import type { Story, StoryMeta } from "../../stories/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/keyboard/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 "../../appearance/theme";
+import type { QuickAction } from "../../settings/config";
+import { SlashSkillsContext } from "../skills";
+import {
+  activeSlashToken,
+  insertSlashItem,
+  mergeSlashItems,
+  slashFilter,
+  slashItemsFrom,
+} from "../slash-palette";
+import { Composer, ComposerPalette } from "../../annotations/components/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/keyboard/key-bindings.test.ts

@@ -0,0 +1,156 @@
+/** Config keys resolve to per-layer actions, and status hints derive from getActiveKeys() so rebinds surface. */
+
+import { describe, expect, test } from "bun:test";
+import { DEFAULT_KEYS } from "../settings/config";
+import { KeyBindings } from "./key-bindings";
+
+function bindings(
+  context: { overlay?: "none" | "walk" | "compose" | "submit"; spanMode?: boolean } = {},
+): KeyBindings {
+  const resolver = new KeyBindings(DEFAULT_KEYS);
+
+  resolver.setContext({ overlay: context.overlay ?? "none", spanMode: context.spanMode ?? false });
+
+  return resolver;
+}
+
+describe("grammar-layer resolution", () => {
+  const table: [name: string, shift: boolean, action: string | undefined][] = [
+    ["j", false, "down"],
+    ["down", false, "down"],
+    ["k", false, "up"],
+    ["g", false, "top"],
+    ["g", true, "bottom"],
+    ["v", false, "span"],
+    ["c", false, "comment"],
+    ["s", false, "split_diff"],
+    ["x", false, "cut"],
+    ["e", false, "edit"],
+    ["n", false, "next_annotation"],
+    ["p", false, "prev_annotation"],
+    ["backspace", false, "delete_annotation"],
+    ["return", false, "submit"],
+    ["enter", false, "submit"],
+    ["q", false, "quit"],
+    ["z", false, undefined],
+  ];
+
+  for (const [name, shift, action] of table) {
+    test(`${shift ? "shift+" : ""}${name} -> ${action}`, () => {
+      expect(bindings().resolveAction({ name, shift })).toBe(action!);
+    });
+  }
+});
+
+describe("mode layers own their keys", () => {
+  test("span mode resolves the span primitives, not the grammar", () => {
+    // Arrange
+    const resolver = bindings({ spanMode: true });
+
+    // Assert
+    expect(resolver.resolveAction({ name: "l", shift: false })).toBe("span_grow");
+    expect(resolver.resolveAction({ name: "c", shift: false })).toBe("span_comment");
+    expect(resolver.resolveAction({ name: "escape", shift: false })).toBe("span_cancel");
+  });
+
+  test("the compose overlay only knows save and cancel", () => {
+    // Arrange
+    const resolver = bindings({ overlay: "compose" });
+
+    // Assert
+    expect(resolver.resolveAction({ name: "return", shift: false })).toBe("save_compose");
+    expect(resolver.resolveAction({ name: "escape", shift: false })).toBe("cancel_overlay");
+    expect(resolver.resolveAction({ name: "j", shift: false })).toBeUndefined();
+  });
+
+  test("the submit overlay adds the message arrows", () => {
+    // Arrange
+    const resolver = bindings({ overlay: "submit" });
+
+    // Assert
+    expect(resolver.resolveAction({ name: "left", shift: false })).toBe("cycle_outcome_left");
+    expect(resolver.resolveAction({ name: "right", shift: false })).toBe("cycle_outcome_right");
+    expect(resolver.resolveAction({ name: "return", shift: false })).toBe("send_message");
+  });
+
+  test("the walk overlay owns the bracket stepping and leaves the grammar keys dead", () => {
+    // Arrange
+    const resolver = bindings({ overlay: "walk" });
+
+    // Assert
+    expect(resolver.resolveAction({ name: "]", shift: false })).toBe("walk_next");
+    expect(resolver.resolveAction({ name: "[", shift: false })).toBe("walk_prev");
+    expect(resolver.resolveAction({ name: "escape", shift: false })).toBe("walk_leave");
+    expect(resolver.resolveAction({ name: "return", shift: false })).toBe("walk_submit");
+    expect(resolver.resolveAction({ name: "q", shift: false })).toBe("quit");
+    expect(resolver.resolveAction({ name: "j", shift: false })).toBeUndefined();
+    expect(resolver.resolveAction({ name: "c", shift: false })).toBeUndefined();
+  });
+});
+
+describe("getActiveKeys-generated status hints", () => {
+  test("normal mode hint matches the locked string", () => {
+    expect(bindings().statusHint("normal")).toBe(
+      "j/k move · v span · drag selects · c comment · x cut · e edit · n/p annotations · enter submit · q quit",
+    );
+  });
+
+  test("card-selected hint keeps the locked Cut label", () => {
+    expect(bindings().statusHint("card")).toBe(
+      "card · e edit · x Cut · n/p cards · esc deselect · enter submit",
+    );
+  });
+
+  test("span hint", () => {
+    expect(bindings({ spanMode: true }).statusHint("span")).toBe(
+      "span · l/h grow/shrink · w/b slide · $ end · c comment · esc",
+    );
+  });
+
+  test("compose hint", () => {
+    expect(bindings({ overlay: "compose" }).statusHint("compose")).toBe(
+      "typing · enter save · esc cancel",
+    );
+  });
+
+  test("submit hint", () => {
+    expect(bindings({ overlay: "submit" }).statusHint("submit")).toBe(
+      "decision ←/→ · enter submit · esc cancel",
+    );
+  });
+
+  test("walk hint", () => {
+    expect(bindings({ overlay: "walk" }).statusHint("walk")).toBe(
+      "walk · ] next (marks viewed) · [ back · esc leave walk · q quit",
+    );
+  });
+
+  test("read-only hint", () => {
+    expect(bindings().statusHint("read-only")).toBe(
+      "observer - read-only · j/k move · n/p annotations · q quit",
+    );
+  });
+
+  test("collaborator hint annotates but shows no plan edit or submit", () => {
+    // Arrange / Act
+    const hint = bindings().statusHint("collaborator");
+
+    // Assert
+    expect(hint).toBe("j/k move · v span · drag selects · c comment · n/p annotations · q quit");
+    expect(hint).not.toContain("cut");
+    expect(hint).not.toContain("edit");
+    expect(hint).not.toContain("submit");
+  });
+
+  test("a rebound key shows its real binding in the hint", () => {
+    // Arrange
+    const resolver = new KeyBindings({ ...DEFAULT_KEYS, comment: ["m"] });
+
+    resolver.setContext({ overlay: "none", spanMode: false });
+
+    // Assert
+    expect(resolver.resolveAction({ name: "m", shift: false })).toBe("comment");
+    expect(resolver.resolveAction({ name: "c", shift: false })).toBeUndefined();
+    expect(resolver.statusHint("normal")).toContain("m comment");
+  });
+});