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

package/src/components/ThreadsSidebar.tsx

@@ -13,9 +13,15 @@ export interface ThreadsSidebarProps {
   cursor: number;
   /** The open thread's id, highlighted in the list. */
   activeId?: string;
+  /** Ids of pinned threads. */
+  pinnedIds?: ReadonlySet<string>;
   onSelect: (sessionId: string) => void;
-  /** Ask to delete a thread (the selected row's [delete] button). */
+  /** Ask to delete a thread (the row menu's Delete, wired to the confirm dialog). */
   onRequestDelete?: (id: string, title: string) => void;
+  /** Toggle a thread's pinned state (the row menu's Pin/Unpin). */
+  onPin?: (id: string) => void;
+  /** Rename a thread's title (the row menu's Rename). */
+  onRename?: (id: string, title: string) => void;
   width?: number;
   theme?: Theme;
 }
@@ -25,8 +31,11 @@ export function ThreadsSidebar({
   rows,
   cursor,
   activeId,
+  pinnedIds,
   onSelect,
   onRequestDelete,
+  onPin,
+  onRename,
   width = 30,
   theme,
 }: ThreadsSidebarProps): React.ReactNode {
@@ -47,8 +56,12 @@ export function ThreadsSidebar({
           rows={rows}
           cursor={cursor}
           activeId={activeId}
+          pinnedIds={pinnedIds}
+          width={width}
           onSelect={onSelect}
           onRequestDelete={onRequestDelete}
+          onPin={onPin}
+          onRename={onRename}
           theme={theme}
         />
       </scrollbox>

package/src/components/Tooltip.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { TooltipProvider } from "./Tooltip";
+import { IconButton } from "./primitives/IconButton";
+import { NERD } from "./primitives/icons";
+
+export const meta: StoryMeta = { title: "Layout/Tooltip" };
+
+// The tooltip surfaces only on hover, so a static story shows the provider wrapping a labelled control.
+export const HoverControl: Story = {
+  render: () => (
+    <TooltipProvider theme={DARK}>
+      <box style={{ flexDirection: "row", padding: 1, backgroundColor: DARK.panel }}>
+        <IconButton
+          glyph={NERD.sidebarRight}
+          tip="Toggle Right Sidebar"
+          onPress={() => {}}
+          theme={DARK}
+        />
+      </box>
+    </TooltipProvider>
+  ),
+  expectedColors: [DARK.textMuted],
+  size: { width: 40, height: 4 },
+};

package/src/components/Tooltip.tsx

@@ -0,0 +1,72 @@
+// Hover tooltips for the header controls. A tiny header cell clips its own children, so the label is
+// surfaced at the screen root instead: controls report the hovered label and cursor cell, and this layer
+// paints it one row below, nudged left when it would run past the right edge.
+
+import React, { createContext, useContext, useMemo, useState } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import { DARK, type Theme } from "../theme";
+
+interface TooltipTarget {
+  label: string;
+  x: number;
+  y: number;
+}
+
+interface TooltipApi {
+  showTooltip: (label: string, x: number, y: number) => void;
+  hideTooltip: () => void;
+}
+
+const TooltipContext = createContext<TooltipApi>({
+  showTooltip: () => {},
+  hideTooltip: () => {},
+});
+
+/** Report or clear the hovered control's tooltip; a no-op outside a TooltipProvider. */
+export function useTooltip(): TooltipApi {
+  return useContext(TooltipContext);
+}
+
+/** Wrap a shell so its header controls can surface hover tooltips at the screen root. */
+export function TooltipProvider({
+  theme,
+  children,
+}: {
+  theme?: Theme;
+  children: React.ReactNode;
+}): React.ReactNode {
+  const tokens = theme ?? DARK;
+  const { width, height } = useTerminalDimensions();
+  const [target, setTarget] = useState<TooltipTarget | null>(null);
+  const api = useMemo<TooltipApi>(
+    () => ({
+      showTooltip: (label, x, y) => setTarget({ label, x, y }),
+      hideTooltip: () => setTarget(null),
+    }),
+    [],
+  );
+
+  const boxWidth = target ? target.label.length + 2 : 0;
+  const left = target ? Math.max(0, Math.min(target.x, width - boxWidth)) : 0;
+  const top = target ? (target.y + 1 <= height - 1 ? target.y + 1 : Math.max(0, target.y - 1)) : 0;
+
+  return (
+    <TooltipContext.Provider value={api}>
+      {children}
+      {target ? (
+        <box
+          style={{
+            position: "absolute",
+            left,
+            top,
+            paddingLeft: 1,
+            paddingRight: 1,
+            backgroundColor: tokens.elevated,
+          }}
+        >
+          <text fg={tokens.text}>{target.label}</text>
+        </box>
+      ) : null}
+    </TooltipContext.Provider>
+  );
+}

package/src/components/WelcomeSurface.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { WelcomeSurface } from "./WelcomeSurface";
+
+export const meta: StoryMeta = { title: "Surfaces/WelcomeSurface" };
+
+export const Welcome: Story = {
+  render: () => <WelcomeSurface version="0.1.0-alpha.66" theme={DARK} />,
+  expectedColors: [DARK.accent],
+  size: { width: 60, height: 16 },
+};

package/src/components/WelcomeSurface.tsx

@@ -0,0 +1,52 @@
+// The Welcome body: the disposable default tab's contents in the Changes panel,
+// shown when nothing else is open. Points at where to start, the docs, and what
+// shipped in this build. The tab chrome (label + close) lives in the panel header.
+
+import React from "react";
+import type { Theme } from "../theme";
+
+const DOCS_URL = "www.cueloop.dev";
+
+export interface WelcomeSurfaceProps {
+  version: string;
+  theme?: Theme;
+}
+
+function Section({
+  title,
+  children,
+  theme,
+}: {
+  title: string;
+  children: React.ReactNode;
+  theme?: Theme;
+}): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", flexShrink: 0, marginTop: 1 }}>
+      <text fg={theme?.text}>{title}</text>
+      {children}
+    </box>
+  );
+}
+
+export function WelcomeSurface({ version, theme }: WelcomeSurfaceProps): React.ReactNode {
+  return (
+    <box
+      style={{ flexDirection: "column", flexGrow: 1, flexShrink: 0, paddingLeft: 2, paddingTop: 1 }}
+    >
+      <text fg={theme?.accent}>Welcome to cueloop</text>
+      <text fg={theme?.textDim}>a review loop for coding agents</text>
+      <Section title="Start" theme={theme}>
+        <text fg={theme?.textDim}>· select a thread on the left</text>
+        <text fg={theme?.textDim}>· or run cueloop plan / cueloop diff from a repo</text>
+      </Section>
+      <Section title="Learn" theme={theme}>
+        <text fg={theme?.textDim}>{`· docs        ${DOCS_URL}`}</text>
+        <text fg={theme?.textDim}>{`· changelog   ${DOCS_URL}/changelog`}</text>
+      </Section>
+      <Section title="What's new" theme={theme}>
+        <text fg={theme?.textDim}>{`· cueloop v${version}`}</text>
+      </Section>
+    </box>
+  );
+}