@cueloop/client 0.1.0-alpha.72 → 0.1.0-alpha.74

package/src/components/AppShell.tsx

@@ -5,9 +5,12 @@
 // always present when the region is on, Changes rides on top of it, and a thin rail holds the sidebar
 // toggle when the region is closed. Each pane owns its own header controls; the thread header never does.
 
-import React from "react";
+import React, { useRef } from "react";
 import { useTerminalDimensions } from "@opentui/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 { PanelColumn } from "./PanelColumn";
 import { IconButton } from "./primitives/IconButton";
 import { NERD, HEADER_UNDERLINE_CHARS } from "./primitives/icons";
@@ -16,6 +19,25 @@ import { RootOverlayProvider } from "./RootOverlay";
 
 export type ProjectPanelMode = "changes" | "tree";
 
+/** The thread title on one line: it shrinks with the header and tails off in an ellipsis rather than wrapping. */
+function HeaderTitle({ title, color }: { title: string; color: string }): React.ReactNode {
+  const boxRef = useRef<BoxRenderable | null>(null);
+  const width = useFrameMeasure(
+    () => boxRef.current?.width ?? 0,
+    (left, right) => left === right,
+    0,
+  );
+  const clipped = width > 0 ? truncateTitle(title, width) : title;
+
+  return (
+    <box ref={boxRef} style={{ flexShrink: 1, minWidth: 0 }}>
+      <text fg={color} wrapMode="none">
+        {clipped}
+      </text>
+    </box>
+  );
+}
+
 export interface AppShellProps {
   sidebarOpen: boolean;
   onToggleSidebar: () => void;
@@ -158,7 +180,7 @@ export function AppShell({
       <IconButton
         glyph={NERD.sidebarRight}
         onPress={onToggleRight}
-        tip="Toggle Right Sidebar"
+        tip="Toggle Sidebar"
         theme={tokens}
       />
     </box>
@@ -172,7 +194,7 @@ export function AppShell({
       <IconButton
         glyph={NERD.sidebarRightOff}
         onPress={onToggleRight}
-        tip="Toggle Right Sidebar"
+        tip="Toggle Sidebar"
         marginLeft={1}
         theme={tokens}
       />
@@ -200,9 +222,13 @@ export function AppShell({
               <PanelColumn
                 width={threadPaneWidth}
                 header={
-                  <box style={{ flexDirection: "row" }}>
-                    {!sidebarOpen ? <box style={{ paddingRight: 2 }}>{brandChrome}</box> : null}
-                    {threadTitle ? <text fg={tokens.textDim}>{threadTitle}</text> : null}
+                  <box style={{ flexDirection: "row", minWidth: 0 }}>
+                    {!sidebarOpen ? (
+                      <box style={{ paddingRight: 2, flexShrink: 0 }}>{brandChrome}</box>
+                    ) : null}
+                    {threadTitle ? (
+                      <HeaderTitle title={threadTitle} color={tokens.textDim} />
+                    ) : null}
                   </box>
                 }
                 // with the region closed, the reopen toggle rides the thread header instead of an empty column

package/src/components/BareWorkbenchFileView.tsx

@@ -15,7 +15,7 @@ export interface WorkbenchCommenter {
 }
 
 /** An empty, unsaved thread: it holds no notes, just enough shape for the annotation surface. */
-function draftThread(): Thread {
+export function draftThread(): Thread {
   return {
     schemaVersion: SCHEMA_VERSION,
     id: "workbench-draft",

package/src/components/ConfirmCard.tsx

@@ -98,7 +98,6 @@ export function ConfirmCard({
 
   return (
     <Card
-      title=" send message "
       contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 2 : 0)}
       borderColor={tokens.text}
       backgroundColor={tokens.elevated}

package/src/components/GridTabContent.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { GridTabContent, type DiffSurfaceProps } from "./GridTabContent";
+import { fixtureDiffRows, fixtureDiffSession } from "./story-fixtures";
+import { changesTab, fileTab } from "./editor-grid";
+
+export const meta: StoryMeta = { title: "Surfaces/GridTabContent" };
+
+const noop = (): void => {};
+
+function surface(): DiffSurfaceProps {
+  return {
+    session: fixtureDiffSession({ annotations: [] }),
+    quickActions: DEFAULT_QUICK_ACTIONS,
+    observer: false,
+    onAnnotate: noop,
+    onReply: noop,
+    onUpdateAnnotation: noop,
+    onExit: noop,
+  };
+}
+
+/** The whole-diff Changes tab: every changed file in one scroll container. */
+export const ChangesTab: Story = {
+  render: () => (
+    <GridTabContent
+      tab={changesTab()}
+      rows={fixtureDiffRows()}
+      surface={surface()}
+      rejectedRows={new Set()}
+      dimmed={false}
+      readFile={async () => null}
+      onAddFileComment={noop}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 80, height: 18 },
+};
+
+/** A single-file diff tab: that file's rows alone, indexed on their own. */
+export const FileDiffTab: Story = {
+  render: () => (
+    <GridTabContent
+      tab={fileTab("store.ts", "src/store.ts", "diff")}
+      rows={fixtureDiffRows()}
+      surface={surface()}
+      rejectedRows={new Set()}
+      dimmed={false}
+      readFile={async () => null}
+      onAddFileComment={noop}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 80, height: 18 },
+};

package/src/components/GridTabContent.tsx

@@ -0,0 +1,165 @@
+/**
+ * The body an editor tab paints: the whole working-tree/artifact diff for the
+ * Changes tab, or a single file's diff (or read-only contents) for a file tab.
+ * Shared by the thread workbench and the bare-launch shell so both render a
+ * changed file the same way, with comments routed back through one surface.
+ */
+
+import React, { useMemo } from "react";
+import { type Anchor } from "@cueloop/schema";
+import { dimmedTheme, type Theme } from "../theme";
+import { changesMarks, type DiffRow } from "../view-diff";
+import {
+  DiffContentView,
+  type DiffFoldControls,
+  type DiffContentViewProps,
+} from "./DiffContentView";
+import { AnnotatableFileView } from "./AnnotatableFileView";
+import type { EditorTab } from "./editor-grid";
+
+/** The inline-commenting props the diff sheet shares with the thread view, wired once by the app. */
+export type DiffSurfaceProps = Pick<
+  DiffContentViewProps,
+  | "session"
+  | "quickActions"
+  | "observer"
+  | "commentsEnabled"
+  | "resolved"
+  | "suspended"
+  | "onComposingChange"
+  | "onObserverBlocked"
+  | "onCursorChange"
+  | "focusedAnnotationId"
+  | "onFocusAnnotation"
+  | "onAnnotate"
+  | "onReply"
+  | "onUpdateAnnotation"
+  | "onExit"
+>;
+
+/** The Changes tab body: the whole diff in one scroll container, or a bare hint when nothing changed. */
+export function ChangesTabBody(props: {
+  rows: DiffRow[];
+  surface: DiffSurfaceProps;
+  rejectedRows: Set<number>;
+  fold?: DiffFoldControls;
+  fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
+  split?: boolean;
+  dimmed: boolean;
+  theme: Theme;
+}): React.ReactNode {
+  const session = props.surface.session;
+  const marks = useMemo(
+    () => changesMarks(session, props.rows, props.surface.focusedAnnotationId),
+    [session, props.rows, props.surface.focusedAnnotationId],
+  );
+
+  if (props.rows.length === 0) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={props.theme.textDim}>No changes</text>
+      </box>
+    );
+  }
+
+  return (
+    <DiffContentView
+      rows={props.rows}
+      marks={marks}
+      {...props.surface}
+      rejectedRows={props.rejectedRows}
+      fold={props.fold}
+      fileStats={props.fileStats}
+      split={props.split}
+      theme={props.dimmed ? dimmedTheme(props.theme) : undefined}
+    />
+  );
+}
+
+/** An editor tab's body: the whole diff for the Changes tab, a file's diff or contents for a file tab. */
+export function GridTabContent(props: {
+  tab: EditorTab;
+  rows: DiffRow[];
+  surface: DiffSurfaceProps;
+  rejectedRows: Set<number>;
+  fold?: DiffFoldControls;
+  fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
+  split?: boolean;
+  dimmed: boolean;
+  readFile: (path: string) => Promise<string | null>;
+  /** Persist a comment on a project file; the file view built the anchor against its own lines. */
+  onAddFileComment: (path: string, anchor: Anchor, body: string) => void;
+  theme: Theme;
+}): React.ReactNode {
+  const { tab } = props;
+  if (tab.kind === "file" && tab.fileView === "contents" && tab.path !== undefined) {
+    const filePath = tab.path;
+
+    return (
+      <AnnotatableFileView
+        path={filePath}
+        loadContents={props.readFile}
+        session={props.surface.session}
+        quickActions={props.surface.quickActions}
+        observer={props.surface.observer}
+        resolved={props.surface.resolved}
+        suspended={props.surface.suspended}
+        focusedAnnotationId={props.surface.focusedAnnotationId}
+        onFocusAnnotation={props.surface.onFocusAnnotation}
+        onComposingChange={props.surface.onComposingChange}
+        onCursorChange={props.surface.onCursorChange}
+        onObserverBlocked={props.surface.onObserverBlocked}
+        onAddComment={(anchor, body) => props.onAddFileComment(filePath, anchor, body)}
+        onReply={props.surface.onReply}
+        onUpdateAnnotation={props.surface.onUpdateAnnotation}
+        onExit={props.surface.onExit}
+        theme={props.theme}
+      />
+    );
+  }
+  if (tab.kind !== "file") {
+    return (
+      <ChangesTabBody
+        rows={props.rows}
+        surface={props.surface}
+        rejectedRows={props.rejectedRows}
+        fold={props.fold}
+        fileStats={props.fileStats}
+        split={props.split}
+        dimmed={props.dimmed}
+        theme={props.theme}
+      />
+    );
+  }
+  // a single-file tab shows that file's rows alone, so its row indices are its own: comments and
+  // the caret report back in whole-diff indices, and the fold controls (a band to fold) do not apply
+  const fileRowIndices = props.rows.flatMap((row, index) => (row.file === tab.path ? [index] : []));
+  const rows = fileRowIndices.map((index) => props.rows[index]!);
+  const wholeIndex = (rowIndex: number): number => fileRowIndices[rowIndex] ?? rowIndex;
+  const rejectedRows = new Set(
+    fileRowIndices.flatMap((index, rowIndex) => (props.rejectedRows.has(index) ? [rowIndex] : [])),
+  );
+
+  return (
+    <ChangesTabBody
+      rows={rows}
+      surface={{
+        ...props.surface,
+        onCursorChange: (rowIndex) => props.surface.onCursorChange?.(wholeIndex(rowIndex)),
+        onAnnotate: (span, body) =>
+          props.surface.onAnnotate(
+            {
+              start: { blockIndex: wholeIndex(span.start.blockIndex), char: span.start.char },
+              end: { blockIndex: wholeIndex(span.end.blockIndex), char: span.end.char },
+            },
+            body,
+          ),
+      }}
+      rejectedRows={rejectedRows}
+      fileStats={props.fileStats}
+      split={props.split}
+      dimmed={props.dimmed}
+      theme={props.theme}
+    />
+  );
+}

package/src/components/SettingsDialog.tsx

@@ -1,6 +1,6 @@
 /**
- * The settings overlay: a centered Dialog whose left nav is a tree - a Settings
- * group over its categories, plus Keybinds as a sibling leaf - and whose right
+ * The settings overlay: a centered Dialog whose left nav lists the categories as
+ * first-level leaves (General, Appearance, Actions, Keybinds), and whose right
  * body shows the active category's typed rows or the keybinds cheatsheet. The
  * component is controlled: the caller owns the open flag, the active
  * category/row/zone, and value changes, so the app's keyboard grammar (and the
@@ -48,17 +48,8 @@ export interface SettingsDialogProps {
   theme?: Theme;
 }
 
-/** The left nav tree: a Settings group over its categories, then Keybinds as a leaf. */
 function navTree(categories: SettingsCategory[]): TreeNode[] {
-  const children = categories
-    .filter((category) => category.id !== KEYBINDS_CATEGORY_ID)
-    .map((category) => ({ id: category.id, label: category.name }));
-  const nodes: TreeNode[] = [{ id: "settings", label: "Settings", children }];
-  const keybinds = categories.find((category) => category.id === KEYBINDS_CATEGORY_ID);
-
-  if (keybinds !== undefined) nodes.push({ id: keybinds.id, label: keybinds.name });
-
-  return nodes;
+  return categories.map((category) => ({ id: category.id, label: category.name }));
 }
 
 function KeybindsBody({
@@ -122,7 +113,7 @@ export function SettingsDialog({
         <box style={{ flexDirection: "column", width: 20, paddingLeft: 1, paddingRight: 1 }}>
           <Tree
             nodes={navTree(categories)}
-            expandedIds={new Set(["settings"])}
+            expandedIds={new Set<string>()}
             selectedId={category.id}
             hideIcons
             onSelect={onCategorySelect}

package/src/components/ThreadTree.tsx

@@ -2,8 +2,8 @@
  * The sidebar thread tree: a Pinned / Projects / Threads listing. Selection stays
  * with the keyboard grammar - the cursor indexes the flat thread order and this
  * component renders the snapshot. A hovered or selected thread reveals a kebab
- * that opens an inline pin / rename / delete menu; long titles fade on the right
- * instead of wrapping. App supplies the surrounding chrome.
+ * that opens an inline pin / rename / delete menu; a long title clips to an
+ * ellipsis rather than wrapping. App supplies the surrounding chrome.
  */
 
 import React, { useState } from "react";
@@ -11,7 +11,7 @@ import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { IconButton } from "./primitives/IconButton";
 import { NERD } from "./primitives/icons";
-import { fadeTitle } from "./fade-title";
+import { truncateTitle } from "./truncate-title";
 import { threadTitle, type InboxRow } from "./session-tree";
 
 export interface ThreadTreeProps {
@@ -94,15 +94,7 @@ interface ThreadRowProps {
 function ThreadRow(props: ThreadRowProps): React.ReactNode {
   const { title, selected, pinned, titleWidth, menuOpen, onToggleMenu, tokens, theme } = props;
   const [hovered, setHovered] = useState(false);
-  // the tail fades toward the row's own background, so it masks out instead of
-  // leaving a colored band over the selected (elevated) or hovered (panel) row
-  const rowBackground = selected ? tokens.elevated : hovered ? tokens.panel : tokens.background;
-  const segments = fadeTitle(
-    title,
-    titleWidth,
-    selected ? tokens.accent : tokens.textMuted,
-    rowBackground,
-  );
+  const clippedTitle = truncateTitle(title, titleWidth);
   const hasActions =
     props.onPin !== undefined || props.onRename !== undefined || props.onDelete !== undefined;
 
@@ -116,13 +108,9 @@ function ThreadRow(props: ThreadRowProps): React.ReactNode {
           backgroundColor: selected ? tokens.elevated : hovered ? tokens.panel : undefined,
         }}
       >
-        <text>
+        <text wrapMode="none">
           <span fg={tokens.textDim}>{pinned ? ` ${NERD.pin} ` : "   "}</span>
-          {segments.map((segment, index) => (
-            <span key={index} fg={segment.fg}>
-              {segment.text}
-            </span>
-          ))}
+          <span fg={selected ? tokens.accent : tokens.textMuted}>{clippedTitle}</span>
         </text>
         <box style={{ flexGrow: 1 }} />
         {(hovered || menuOpen) && hasActions ? (