@tangle-network/ui 1.0.0

package/src/primitives/tabs.tsx

@@ -0,0 +1,71 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    variant?: "default" | "pills" | "underline";
+  }
+>(({ className, variant = "default", ...props }, ref) => {
+  const variants = {
+    default:
+      "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+    pills: "inline-flex items-center gap-2",
+    underline: "inline-flex items-center gap-4 border-b border-border",
+  };
+
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(variants[variant], className)}
+      {...props}
+    />
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    variant?: "default" | "pills" | "underline";
+  }
+>(({ className, variant = "default", ...props }, ref) => {
+  const variants = {
+    default:
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+    pills:
+      "inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:bg-muted",
+    underline:
+      "inline-flex items-center justify-center whitespace-nowrap pb-3 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground",
+  };
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(variants[variant], className)}
+      {...props}
+    />
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-2 data-[state=active]:animate-in",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/primitives/terminal-display.stories.tsx

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import {
+  TerminalCursor,
+  TerminalDisplay,
+  TerminalInput,
+  TerminalLine,
+} from './terminal-display'
+
+const meta: Meta<typeof TerminalDisplay> = {
+  title: 'Primitives/TerminalDisplay',
+  component: TerminalDisplay,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj<typeof TerminalDisplay>
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => (
+    <TerminalDisplay title="bash — sess_01j9x8k2m" className="w-[640px]">
+      <TerminalLine type="command">npm install</TerminalLine>
+      <TerminalLine type="output">
+        {'added 312 packages, and audited 313 packages in 4s'}
+      </TerminalLine>
+      <TerminalLine type="output">{'found 0 vulnerabilities'}</TerminalLine>
+      <TerminalLine type="command">npm run build</TerminalLine>
+      <TerminalLine type="output">
+        {'\n> sandbox-app@1.0.0 build\n> tsc && vite build'}
+      </TerminalLine>
+      <TerminalLine type="success">
+        {'✓ built in 2.14s'}
+      </TerminalLine>
+      <TerminalLine type="command">
+        node dist/index.js<TerminalCursor />
+      </TerminalLine>
+    </TerminalDisplay>
+  ),
+}
+
+export const SandboxVariant: Story = {
+  name: 'Sandbox Variant',
+  render: () => (
+    <TerminalDisplay
+      variant="sandbox"
+      title="agent — sess_01j9x8k2m"
+      className="w-[640px]"
+    >
+      <TerminalLine type="info" timestamp="14:02:11">
+        Session initialized · node:20-alpine · us-east-1
+      </TerminalLine>
+      <TerminalLine type="command">
+        git clone https://github.com/acme/api-service.git
+      </TerminalLine>
+      <TerminalLine type="output">
+        {'Cloning into \'api-service\'...\nremote: Enumerating objects: 1847, done.'}
+      </TerminalLine>
+      <TerminalLine type="output">
+        {'Receiving objects: 100% (1847/1847), 2.31 MiB | 14.2 MiB/s, done.'}
+      </TerminalLine>
+      <TerminalLine type="command">cd api-service && npm ci</TerminalLine>
+      <TerminalLine type="output">
+        {'added 421 packages in 6s'}
+      </TerminalLine>
+      <TerminalLine type="command">npm test -- --reporter=dot</TerminalLine>
+      <TerminalLine type="output">
+        {'............................................'}
+      </TerminalLine>
+      <TerminalLine type="success">
+        {'✓ 44 tests passed (2.8s)'}
+      </TerminalLine>
+      <TerminalLine type="thinking">
+        Analyzing test coverage...
+      </TerminalLine>
+    </TerminalDisplay>
+  ),
+}
+
+export const WithErrors: Story = {
+  name: 'With Errors',
+  render: () => (
+    <TerminalDisplay title="bash — sess_01j9x7r9" className="w-[640px]">
+      <TerminalLine type="command">python main.py</TerminalLine>
+      <TerminalLine type="output">Loading model weights...</TerminalLine>
+      <TerminalLine type="error">
+        {'Traceback (most recent call last):\n  File "main.py", line 12, in <module>\n    model = load_checkpoint(args.ckpt)'}
+      </TerminalLine>
+      <TerminalLine type="error">
+        {'FileNotFoundError: [Errno 2] No such file or directory: \'model.pt\''}
+      </TerminalLine>
+      <TerminalLine type="warning">
+        Checkpoint not found. Run download_weights.sh first.
+      </TerminalLine>
+      <TerminalLine type="command">
+        ./download_weights.sh<TerminalCursor />
+      </TerminalLine>
+    </TerminalDisplay>
+  ),
+}
+
+export const AgentSession: Story = {
+  name: 'Agent Session',
+  render: () => (
+    <TerminalDisplay
+      variant="sandbox"
+      title="Claude — task execution"
+      className="w-[640px]"
+      maxHeight="320px"
+    >
+      <TerminalLine type="info" timestamp="14:49:58">
+        Task: Write and run unit tests for auth module
+      </TerminalLine>
+      <TerminalLine type="thinking">Reading src/auth/jwt.ts...</TerminalLine>
+      <TerminalLine type="output">Found 4 exported functions to test</TerminalLine>
+      <TerminalLine type="command">
+        {'cat > src/auth/__tests__/jwt.test.ts << \'EOF\''}
+      </TerminalLine>
+      <TerminalLine type="output">
+        {'Writing 6 test cases for: signToken, verifyToken, refreshToken, revokeToken'}
+      </TerminalLine>
+      <TerminalLine type="command">npx vitest run src/auth/__tests__/jwt.test.ts</TerminalLine>
+      <TerminalLine type="output">
+        {'✓ signToken returns a valid JWT (12ms)\n✓ verifyToken accepts valid tokens (3ms)\n✓ verifyToken rejects expired tokens (2ms)\n✓ refreshToken issues new token (8ms)\n✗ revokeToken marks token invalid (5ms)'}
+      </TerminalLine>
+      <TerminalLine type="error">
+        AssertionError: Expected token to be revoked but found status: "active"
+      </TerminalLine>
+      <TerminalLine type="thinking">
+        Investigating revocation logic...
+      </TerminalLine>
+      <TerminalLine type="output">
+        Found bug: redis.del() call missing await. Patching...
+      </TerminalLine>
+      <TerminalLine type="command">npx vitest run src/auth/__tests__/jwt.test.ts</TerminalLine>
+      <TerminalLine type="success">
+        {'✓ 6 tests passed (31ms)'}
+      </TerminalLine>
+      <TerminalLine type="info">Task complete. Patch written to src/auth/jwt.ts:L84.</TerminalLine>
+    </TerminalDisplay>
+  ),
+}
+
+export const NoHeader: Story = {
+  name: 'No Header',
+  render: () => (
+    <TerminalDisplay showHeader={false} className="w-[480px]">
+      <TerminalLine type="command">ls -la /workspace</TerminalLine>
+      <TerminalLine type="output">
+        {'total 48\ndrwxr-xr-x 8 node node 4096 Mar 30 14:02 .\ndrwxr-xr-x 3 root root 4096 Mar 30 14:00 ..\n-rw-r--r-- 1 node node  842 Mar 30 14:01 package.json\ndrwxr-xr-x 4 node node 4096 Mar 30 14:02 src'}
+      </TerminalLine>
+      <TerminalLine type="command">
+        {'cat package.json | jq \'.scripts\''}
+      </TerminalLine>
+      <TerminalLine type="output">
+        {'{\n  "build": "tsc && vite build",\n  "test": "vitest",\n  "dev": "vite"\n}'}
+      </TerminalLine>
+    </TerminalDisplay>
+  ),
+}
+
+export const WithInput: Story = {
+  name: 'With Input',
+  render: () => {
+    const [lines, setLines] = useState<{ type: 'info' | 'command' | 'output' | 'error' | 'success' | 'warning' | 'thinking'; text: string }[]>([
+      { type: 'info', text: 'Session ready · node:20-alpine' },
+    ])
+
+    return (
+      <div className="flex flex-col gap-2 w-[560px]">
+        <TerminalDisplay title="interactive shell" maxHeight="240px">
+          {lines.map((l, i) => (
+            <TerminalLine key={i} type={l.type}>
+              {l.text}
+            </TerminalLine>
+          ))}
+        </TerminalDisplay>
+        <TerminalInput
+          placeholder="Enter a command..."
+          onSubmit={(cmd) => {
+            setLines((prev) => [
+              ...prev,
+              { type: 'command', text: cmd },
+              { type: 'output', text: `[${cmd}] executed` },
+            ])
+          }}
+        />
+      </div>
+    )
+  },
+}

package/src/primitives/terminal-display.tsx

@@ -0,0 +1,189 @@
+import * as React from "react";
+import { useEffect, useRef } from "react";
+import { cn } from "../lib/utils";
+
+export interface TerminalDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "sandbox";
+  title?: string;
+  showHeader?: boolean;
+  autoScroll?: boolean;
+  maxHeight?: string;
+}
+
+const TerminalDisplay = React.forwardRef<HTMLDivElement, TerminalDisplayProps>(
+  (
+    {
+      className,
+      variant = "default",
+      title = "Terminal",
+      showHeader = true,
+      autoScroll = true,
+      maxHeight = "400px",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      if (autoScroll && containerRef.current) {
+        containerRef.current.scrollTop = containerRef.current.scrollHeight;
+      }
+    }, [autoScroll]);
+
+    const variants = {
+      default: "border-border",
+      sandbox: "border-border shadow-[var(--shadow-accent)]",
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "overflow-hidden rounded-xl border bg-background font-mono text-sm",
+          variants[variant],
+          className,
+        )}
+        {...props}
+      >
+        {showHeader && (
+          <div className="flex items-center border-b border-border bg-card px-4 py-3">
+            <span className="text-muted-foreground text-xs">{title}</span>
+          </div>
+        )}
+        <div
+          ref={containerRef}
+          className="overflow-auto p-4"
+          style={{ maxHeight }}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+TerminalDisplay.displayName = "TerminalDisplay";
+
+export interface TerminalLineProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  type?:
+    | "input"
+    | "output"
+    | "error"
+    | "success"
+    | "info"
+    | "thinking"
+    | "command"
+    | "warning";
+  prompt?: string;
+  timestamp?: string;
+}
+
+const TerminalLine = React.forwardRef<HTMLDivElement, TerminalLineProps>(
+  (
+    { className, type = "output", prompt = "$", timestamp, children, ...props },
+    ref,
+  ) => {
+    const typeStyles = {
+      input:    "text-foreground",
+      output:   "text-foreground",
+      error:    "text-[var(--surface-danger-text)]",
+      success:  "text-[var(--surface-success-text)]",
+      info:     "text-[var(--surface-info-text)]",
+      thinking: "text-[var(--surface-warning-text)] animate-pulse",
+      command:  "text-foreground",
+      warning:  "text-[var(--surface-warning-text)]",
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-start gap-2 py-0.5 leading-relaxed",
+          typeStyles[type],
+          className,
+        )}
+        {...props}
+      >
+        {(type === "input" || type === "command") && (
+          <span className="shrink-0 select-none text-[var(--surface-success-text)]">{prompt}</span>
+        )}
+        {type === "thinking" && (
+          <span className="shrink-0 select-none">...</span>
+        )}
+        {timestamp && (
+          <span className="shrink-0 select-none text-muted-foreground opacity-50">
+            [{timestamp}]
+          </span>
+        )}
+        <span className="whitespace-pre-wrap break-all">{children}</span>
+      </div>
+    );
+  },
+);
+TerminalLine.displayName = "TerminalLine";
+
+const TerminalCursor = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    className={cn(
+      "ml-0.5 inline-block h-4 w-2 animate-pulse bg-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TerminalCursor.displayName = "TerminalCursor";
+
+export interface TerminalInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onSubmit"> {
+  onSubmit?: (value: string) => void;
+  variant?: "default" | "sandbox";
+}
+
+const TerminalInput = React.forwardRef<HTMLInputElement, TerminalInputProps>(
+  ({ className, onSubmit, variant = "default", ...props }, ref) => {
+    const [value, setValue] = React.useState("");
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" && value.trim() && onSubmit) {
+        onSubmit(value.trim());
+        setValue("");
+      }
+    };
+
+    const variants = {
+      default: "border-border focus-within:border-border",
+      sandbox: "border-border focus-within:border-[var(--border-accent-hover)]",
+    };
+
+    return (
+      <div
+        className={cn(
+          "flex items-center rounded-lg border bg-background px-4 py-2.5 font-mono text-sm transition-colors",
+          variants[variant],
+          className,
+        )}
+      >
+        <span className="mr-2 select-none text-[var(--surface-success-text)]">$</span>
+        <input
+          ref={ref}
+          type="text"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          className="flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground"
+          {...props}
+        />
+        <TerminalCursor />
+      </div>
+    );
+  },
+);
+TerminalInput.displayName = "TerminalInput";
+
+export { TerminalDisplay, TerminalLine, TerminalCursor, TerminalInput };

package/src/primitives/theme-toggle.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ThemeToggle } from './theme-toggle'
+
+const meta: Meta<typeof ThemeToggle> = {
+  title: 'Primitives/ThemeToggle',
+  component: ThemeToggle,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj<typeof ThemeToggle>
+
+export const Default: Story = {}
+
+export const InToolbar: Story = {
+  name: 'In Toolbar',
+  render: () => (
+    <div className="flex items-center gap-1 rounded-lg border border-border bg-card px-2 py-1">
+      <button className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground">
+        Sessions
+      </button>
+      <button className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground">
+        Logs
+      </button>
+      <button className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground">
+        Billing
+      </button>
+      <div className="mx-2 h-4 w-px bg-border" />
+      <ThemeToggle />
+    </div>
+  ),
+}

package/src/primitives/theme-toggle.tsx

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+function getSystemTheme(): "light" | "dark" {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function applyTheme(theme: Theme) {
+  const resolved = theme === "system" ? getSystemTheme() : theme;
+  document.documentElement.classList.toggle("dark", resolved === "dark");
+}
+
+export function useTheme() {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window === "undefined") return "system";
+    return (localStorage.getItem("theme") as Theme) ?? "system";
+  });
+
+  const setTheme = useCallback((next: Theme) => {
+    setThemeState(next);
+    if (next === "system") {
+      localStorage.removeItem("theme");
+    } else {
+      localStorage.setItem("theme", next);
+    }
+    applyTheme(next);
+  }, []);
+
+  useEffect(() => {
+    applyTheme(theme);
+    if (theme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => applyTheme("system");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+
+  return { theme, setTheme };
+}
+
+const iconClass = "h-4 w-4";
+
+function SunIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={iconClass}
+    >
+      <circle cx={12} cy={12} r={5} />
+      <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+    </svg>
+  );
+}
+
+function MoonIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={iconClass}
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const resolved =
+    theme === "system" ? getSystemTheme() : theme;
+
+  return (
+    <button
+      type="button"
+      onClick={() => setTheme(resolved === "dark" ? "light" : "dark")}
+      className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+      aria-label={`Switch to ${resolved === "dark" ? "light" : "dark"} mode`}
+    >
+      {resolved === "dark" ? <SunIcon /> : <MoonIcon />}
+    </button>
+  );
+}