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

package/src/app/components/PaneGrid.stories.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { PaneGrid } from "./PaneGrid";
+
+export const meta: StoryMeta = { title: "Layout/PaneGrid" };
+
+function Sidebar(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textDim}>Projects</text>
+      <text fg={DARK.text}> cueloop</text>
+      <box style={{ backgroundColor: DARK.elevated }}>
+        <text fg={DARK.accent}> Read Cueloop Repository</text>
+      </box>
+      <text> </text>
+      <text fg={DARK.textDim}>Threads</text>
+      <text fg={DARK.textMuted}> Welcome to cueloop</text>
+    </box>
+  );
+}
+
+function Main(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>read the repo</text>
+      <text> </text>
+      <text fg={DARK.textMuted}>Repository context loaded. main is clean.</text>
+      <text> </text>
+      <text fg={DARK.text}>Core architecture</text>
+      <text fg={DARK.textMuted}> - packages/schema is the dependency root</text>
+      <text fg={DARK.textMuted}> - packages/daemon owns session state</text>
+    </box>
+  );
+}
+
+function Inspector(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>cueloop/main</text>
+      <text fg={DARK.textDim}> No changes</text>
+    </box>
+  );
+}
+
+function Header(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textMuted}>Read Cueloop Repository</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>markdown.test.ts</text>
+    </box>
+  );
+}
+
+function Footer(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textDim}>cueloop / main</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>Fable 5</text>
+    </box>
+  );
+}
+
+export const ThreePane: Story = {
+  render: () => (
+    <PaneGrid
+      sidebar={<Sidebar />}
+      main={<Main />}
+      mainHeader={<Header />}
+      inspector={<Inspector />}
+      footer={<Footer />}
+    />
+  ),
+  expectedColors: [DARK.border, DARK.accent],
+  size: { width: 120, height: 28 },
+};
+
+export const SidebarAndMain: Story = {
+  render: () => <PaneGrid sidebar={<Sidebar />} main={<Main />} />,
+  expectedColors: [DARK.border],
+  size: { width: 90, height: 20 },
+};

package/src/app/components/PaneGrid.tsx

@@ -0,0 +1,128 @@
+// A generic pane grid: a row of columns, each stacking a header cell over its body, with the
+// vertical rules run full height and every header cell's bottom rule joined into one horizontal
+// line. Rules only - no enclosing frames. This is the layout primitive for dev surfaces (the
+// storybook runner); the product's four-pane workbench is AppShell.
+
+import React from "react";
+import { DARK, type Theme } from "../../appearance/theme";
+import type { BorderSides } from "@opentui/core";
+
+export interface PaneGridProps {
+  headerHeight?: number;
+  sidebar?: React.ReactNode;
+  sidebarHeader?: React.ReactNode;
+  sidebarWidth?: number;
+  main: React.ReactNode;
+  mainHeader?: React.ReactNode;
+  inspector?: React.ReactNode;
+  inspectorHeader?: React.ReactNode;
+  inspectorWidth?: number;
+  footer?: React.ReactNode;
+  theme?: Theme;
+}
+
+interface PaneColumnProps {
+  width?: number;
+  grow?: boolean;
+  side?: BorderSides;
+  header: React.ReactNode;
+  body: React.ReactNode;
+  headerHeight: number;
+  theme: Theme;
+}
+
+function PaneColumn({
+  width,
+  grow,
+  side,
+  header,
+  body,
+  headerHeight,
+  theme,
+}: PaneColumnProps): React.ReactNode {
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        ...(grow ? { flexGrow: 1 } : { width }),
+        borderStyle: "single",
+        border: side ? [side] : [],
+        borderColor: theme.border,
+      }}
+    >
+      <box
+        style={{
+          height: headerHeight,
+          borderStyle: "single",
+          border: ["bottom"],
+          borderColor: theme.border,
+        }}
+      >
+        {header}
+      </box>
+      <box style={{ flexGrow: 1 }}>{body}</box>
+    </box>
+  );
+}
+
+export function PaneGrid({
+  headerHeight = 3,
+  sidebar,
+  sidebarHeader,
+  sidebarWidth = 28,
+  main,
+  mainHeader,
+  inspector,
+  inspectorHeader,
+  inspectorWidth = 40,
+  footer,
+  theme,
+}: PaneGridProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.background,
+      }}
+    >
+      <box style={{ flexDirection: "row", flexGrow: 1 }}>
+        {sidebar !== undefined ? (
+          <PaneColumn
+            width={sidebarWidth}
+            side="right"
+            header={sidebarHeader}
+            body={sidebar}
+            headerHeight={headerHeight}
+            theme={tokens}
+          />
+        ) : null}
+        <PaneColumn
+          grow
+          header={mainHeader}
+          body={main}
+          headerHeight={headerHeight}
+          theme={tokens}
+        />
+        {inspector !== undefined ? (
+          <PaneColumn
+            width={inspectorWidth}
+            side="left"
+            header={inspectorHeader}
+            body={inspector}
+            headerHeight={headerHeight}
+            theme={tokens}
+          />
+        ) : null}
+      </box>
+      {footer !== undefined ? (
+        <box style={{ borderStyle: "single", border: ["top"], borderColor: tokens.border }}>
+          {footer}
+        </box>
+      ) : null}
+    </box>
+  );
+}

package/src/app/components/PanelColumn.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { PanelColumn, FileTab } from "./PanelColumn";
+
+export const meta: StoryMeta = { title: "Surfaces/PanelColumn" };
+
+export const WithFileTab: Story = {
+  render: () => (
+    <box style={{ width: "100%", height: "100%", flexDirection: "row" }}>
+      <PanelColumn
+        width={40}
+        border="left"
+        header={<FileTab label="Welcome" active onClose={() => {}} theme={DARK} />}
+        theme={DARK}
+      >
+        <box style={{ paddingLeft: 1, paddingTop: 1 }}>
+          <text fg={DARK.textDim}>panel body</text>
+        </box>
+      </PanelColumn>
+    </box>
+  ),
+  expectedColors: [DARK.accent, DARK.border],
+  size: { width: 50, height: 8 },
+};

package/src/app/components/PanelColumn.tsx

@@ -0,0 +1,93 @@
+// A workbench panel: one full-height grid column with a file-tab header cell on
+// top and a body below. The header row carries the tabs on the left and optional
+// controls on the right, underlined by a thin rule in the same divider gray so the
+// header bottoms join the side rules into one grid. The side border runs from the top.
+
+import React, { useState } from "react";
+import type { Theme } from "../../appearance/theme";
+import { NERD, HEADER_UNDERLINE_CHARS } from "../../ui/components/primitives/icons";
+
+export interface FileTabProps {
+  label: string;
+  active?: boolean;
+  onClose?: () => void;
+  theme?: Theme;
+}
+
+/** A file tab: the label in the accent when active, with a hover-revealed close. */
+export function FileTab({ label, active, onClose, theme }: FileTabProps): React.ReactNode {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <box
+      style={{ flexDirection: "row", paddingRight: 1 }}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
+    >
+      <text fg={active ? theme?.accent : theme?.textDim}>{label}</text>
+      {onClose ? (
+        <box onMouseUp={onClose} style={{ paddingLeft: 1 }}>
+          <text fg={theme?.textDim}>{hovered ? NERD.close : " "}</text>
+        </box>
+      ) : null}
+    </box>
+  );
+}
+
+export interface PanelColumnProps {
+  width?: number;
+  border?: "left" | "right";
+  header: React.ReactNode;
+  headerRight?: React.ReactNode;
+  onFocus?: () => void;
+  children: React.ReactNode;
+  theme?: Theme;
+}
+
+export function PanelColumn({
+  width,
+  border,
+  header,
+  headerRight,
+  onFocus,
+  children,
+  theme,
+}: PanelColumnProps): React.ReactNode {
+  return (
+    <box
+      onMouseDown={onFocus}
+      style={{
+        width,
+        // grow panes split evenly and clip wide content (a long diff line) rather than stretching
+        flexGrow: width === undefined ? 1 : undefined,
+        flexBasis: width === undefined ? 0 : undefined,
+        minWidth: 0,
+        flexDirection: "column",
+        borderStyle: "single",
+        border: border ? [border] : [],
+        borderColor: theme?.border,
+      }}
+    >
+      <box
+        customBorderChars={HEADER_UNDERLINE_CHARS}
+        style={{
+          flexDirection: "row",
+          height: 2,
+          paddingLeft: 1,
+          // right controls need the same breathing room as the left, or the rightmost icon renders
+          // squeezed against the terminal's last column
+          paddingRight: 1,
+          backgroundColor: theme?.panel,
+          borderStyle: "single",
+          border: ["bottom"],
+          borderColor: theme?.border,
+        }}
+      >
+        {header}
+        <box style={{ flexGrow: 1 }} />
+        {headerRight}
+      </box>
+      <box style={{ flexGrow: 1, flexDirection: "column" }}>{children}</box>
+    </box>
+  );
+}

package/src/app/components/ShellHeader.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { ShellHeader } from "./ShellHeader";
+import { NERD } from "../../ui/components/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/app/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 "../../appearance/theme";
+import { NERD } from "../../ui/components/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/app/components/WorkspacePanels.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { ClientExtensionRegistry } from "../../integrations/client-extension-registry";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { WorkspacePanels } from "./WorkspacePanels";
+
+export const meta: StoryMeta = { title: "Extensions/WorkspacePanels" };
+
+const registry = new ClientExtensionRegistry();
+
+void registry.load("example", (api) => {
+  api.registerView({
+    id: "details",
+    zone: "workspace.panels",
+    title: "Details",
+    Component: () => <text>Extension details</text>,
+  });
+});
+
+export const RegisteredView: Story = {
+  render: () => (
+    <WorkspacePanels
+      width={32}
+      projectMode="tree"
+      projectPanel={<text>Project files</text>}
+      onToggleChanges={() => {}}
+      onToggleProject={() => {}}
+      onToggleRight={() => {}}
+      onFocus={() => {}}
+      registry={registry}
+      context={{ workspace: "/repo", threadId: "thread-1" }}
+      theme={DARK}
+    />
+  ),
+  size: { width: 32, height: 10 },
+};

package/src/app/components/WorkspacePanels.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { ExtensionUIContext } from "@cueloop/extension-api/client";
+import type { ClientExtensionRegistry } from "../../integrations/client-extension-registry";
+import type { Theme } from "../../appearance/theme";
+import type { ProjectPanelMode } from "./AppShell";
+import {
+  ExtensionZone,
+  useClientExtensionSnapshot,
+  visibleContributions,
+} from "../../integrations/components/ExtensionZone";
+import { FileTab, PanelColumn } from "./PanelColumn";
+import { IconButton } from "../../ui/components/primitives/IconButton";
+import { NERD } from "../../ui/components/primitives/icons";
+
+/** The existing right pane owns built-in modes and selectable extension views. */
+export function WorkspacePanels(props: {
+  width: number;
+  projectMode: ProjectPanelMode;
+  projectPanel: React.ReactNode;
+  onToggleChanges: () => void;
+  onToggleProject: () => void;
+  onToggleRight: () => void;
+  onFocus: () => void;
+  focused?: boolean;
+  registry: ClientExtensionRegistry;
+  context: ExtensionUIContext;
+  theme: Theme;
+  onExtensionError?: (message: string) => void;
+}): React.ReactNode {
+  const { registry, context, theme, onExtensionError } = props;
+  const snapshot = useClientExtensionSnapshot(registry);
+  const { workspace, threadId } = context;
+  const visibility = useMemo(
+    () => visibleContributions(snapshot.views, { workspace, threadId }),
+    [snapshot.views, workspace, threadId],
+  );
+
+  useEffect(() => {
+    for (const error of visibility.errors) onExtensionError?.(error);
+  }, [visibility, onExtensionError]);
+
+  const views = visibility.items;
+  const [selectedView, setSelectedView] = useState<(typeof views)[number] | null>(null);
+  const selected = views.find(
+    ({ key, value }) => key === selectedView?.key && value === selectedView.value,
+  );
+
+  const showBuiltIn = (toggle: () => void): void => {
+    setSelectedView(null);
+    toggle();
+  };
+
+  useKeyboard((key) => {
+    if (!props.focused || (key.name !== "[" && key.name !== "]")) return;
+    const choices = [null, ...views];
+    const current = selected ? views.indexOf(selected) + 1 : 0;
+    const step = key.name === "]" ? 1 : -1;
+
+    setSelectedView(choices[(current + step + choices.length) % choices.length] ?? null);
+  });
+
+  const toggles = (
+    <box style={{ flexDirection: "row", flexShrink: 0, alignItems: "center" }}>
+      <IconButton
+        glyph="changes"
+        active={!selected && props.projectMode === "changes"}
+        onPress={() => showBuiltIn(props.onToggleChanges)}
+        marginRight={2}
+        theme={theme}
+      />
+      <IconButton
+        glyph="project"
+        active={!selected && props.projectMode === "tree"}
+        onPress={() => showBuiltIn(props.onToggleProject)}
+        marginRight={2}
+        theme={theme}
+      />
+      <IconButton
+        glyph={NERD.sidebarRight}
+        onPress={props.onToggleRight}
+        tip="Toggle Sidebar"
+        theme={theme}
+      />
+    </box>
+  );
+
+  return (
+    <PanelColumn
+      width={props.width}
+      border="left"
+      header={
+        views.length > 0 ? (
+          <box style={{ flexDirection: "row", minWidth: 0 }}>
+            {views.map(({ key, value }) => (
+              <box key={key} onMouseUp={() => setSelectedView({ key, value })}>
+                <FileTab label={value.title} active={key === selected?.key} theme={theme} />
+              </box>
+            ))}
+          </box>
+        ) : null
+      }
+      headerRight={toggles}
+      onFocus={props.onFocus}
+      theme={theme}
+    >
+      {selected ? (
+        <ExtensionZone
+          zone="workspace.panels"
+          registry={registry}
+          context={context}
+          selectedViewId={selected.key}
+          onError={props.onExtensionError}
+        />
+      ) : (
+        props.projectPanel
+      )}
+    </PanelColumn>
+  );
+}