npm - upfynai-code - Versions diffs - 0.1.0 - Mend

upfynai-code 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/LICENSE +22 -0
package/bin/cli.js +86 -0
package/dist/assets/CanvasPanel-B48gAKVY.js +538 -0
package/dist/assets/CanvasPanel-B48gAKVY.js.map +1 -0
package/dist/assets/CanvasPanel-BsOG3EVs.css +1 -0
package/dist/assets/index-CEhTwG68.css +1 -0
package/dist/assets/index-GqAGWpJI.js +70 -0
package/dist/assets/index-GqAGWpJI.js.map +1 -0
package/dist/index.html +18 -0
package/index.html +17 -0
package/package.json +67 -0
package/src/App.tsx +226 -0
package/src/components/canvas/CanvasPanel.tsx +62 -0
package/src/components/canvas/layout/graph-builder.ts +136 -0
package/src/components/canvas/shapes/CompactionNodeShape.tsx +76 -0
package/src/components/canvas/shapes/SessionNodeShape.tsx +93 -0
package/src/components/canvas/shapes/StatuslineWidgetShape.tsx +125 -0
package/src/components/canvas/shapes/TextResponseNodeShape.tsx +86 -0
package/src/components/canvas/shapes/ToolCallNodeShape.tsx +107 -0
package/src/components/canvas/shapes/ToolResultNodeShape.tsx +87 -0
package/src/components/canvas/shapes/shared-styles.ts +35 -0
package/src/components/chat/ChatPanel.tsx +96 -0
package/src/components/chat/InputBar.tsx +81 -0
package/src/components/chat/MessageList.tsx +130 -0
package/src/components/chat/PermissionDialog.tsx +70 -0
package/src/components/layout/FolderSelector.tsx +152 -0
package/src/components/layout/ModelSelector.tsx +65 -0
package/src/components/layout/SessionManager.tsx +115 -0
package/src/components/statusline/StatuslineBar.tsx +114 -0
package/src/main.tsx +10 -0
package/src/server/claude-session.ts +156 -0
package/src/server/index.ts +149 -0
package/src/services/stream-consumer.ts +330 -0
package/src/statusline-core/bin/statusline.sh +121 -0
package/src/statusline-core/commands/sls-config.md +42 -0
package/src/statusline-core/commands/sls-doctor.md +35 -0
package/src/statusline-core/commands/sls-help.md +48 -0
package/src/statusline-core/commands/sls-layout.md +38 -0
package/src/statusline-core/commands/sls-preview.md +34 -0
package/src/statusline-core/commands/sls-theme.md +40 -0
package/src/statusline-core/installer.js +228 -0
package/src/statusline-core/layouts/compact.sh +21 -0
package/src/statusline-core/layouts/full.sh +62 -0
package/src/statusline-core/layouts/standard.sh +39 -0
package/src/statusline-core/lib/core.sh +389 -0
package/src/statusline-core/lib/helpers.sh +81 -0
package/src/statusline-core/lib/json-parser.sh +71 -0
package/src/statusline-core/themes/catppuccin.sh +32 -0
package/src/statusline-core/themes/default.sh +37 -0
package/src/statusline-core/themes/gruvbox.sh +32 -0
package/src/statusline-core/themes/nord.sh +32 -0
package/src/statusline-core/themes/tokyo-night.sh +32 -0
package/src/store/canvas-store.ts +50 -0
package/src/store/chat-store.ts +60 -0
package/src/store/permission-store.ts +29 -0
package/src/store/session-store.ts +52 -0
package/src/store/statusline-store.ts +160 -0
package/src/styles/global.css +117 -0
package/src/themes/index.ts +149 -0
package/src/types/canvas-graph.ts +24 -0
package/src/types/sdk-messages.ts +156 -0
package/src/types/statusline-fields.ts +67 -0
package/src/vite-env.d.ts +1 -0
package/tsconfig.json +26 -0
package/vite.config.ts +24 -0

package/dist/index.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UC UpfynAI-Code — Visual AI Coding Interface</title>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      body { background: #0a0a0f; color: #e4e4e7; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
+      #root { width: 100vw; height: 100vh; overflow: hidden; }
+    </style>
+    <script type="module" crossorigin src="/assets/index-GqAGWpJI.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CEhTwG68.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/index.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UC UpfynAI-Code — Visual AI Coding Interface</title>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      body { background: #0a0a0f; color: #e4e4e7; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
+      #root { width: 100vw; height: 100vh; overflow: hidden; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,67 @@
+{
+  "name": "upfynai-code",
+  "version": "0.1.0",
+  "description": "UC UpfynAI-Code — Visual AI coding interface with built-in statusline. Proprietary software by Thinqmesh Technologies, Developed by Anit Chaudhary.",
+  "type": "module",
+  "bin": {
+    "upfynai-code": "bin/cli.js",
+    "uc": "bin/cli.js"
+  },
+  "scripts": {
+    "dev": "node bin/cli.js",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "files": [
+    "bin/",
+    "dist/",
+    "src/",
+    "index.html",
+    "vite.config.ts",
+    "tsconfig.json"
+  ],
+  "keywords": [
+    "claude-code",
+    "ai-coding",
+    "tldraw",
+    "terminal-ui",
+    "statusline",
+    "anthropic",
+    "developer-tools"
+  ],
+  "author": {
+    "name": "Anit Chaudhary",
+    "url": "https://github.com/AnitChaudhry"
+  },
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://upfyn.ai",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AnitChaudhry/UpfynAI-Code.git"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.13.0",
+    "@tldraw/tldraw": "^4.4.0",
+    "hono": "^4.7.0",
+    "open": "^10.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.0",
+    "remark-gfm": "^4.0.0",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,226 @@
+import { useEffect, useState, useCallback } from 'react';
+import { lazy, Suspense } from 'react';
+import { ChatPanel } from './components/chat/ChatPanel';
+import { StatuslineBar } from './components/statusline/StatuslineBar';
+import { FolderSelector } from './components/layout/FolderSelector';
+import { ModelSelector } from './components/layout/ModelSelector';
+import { SessionManager } from './components/layout/SessionManager';
+import { useThemeStore } from './themes';
+import { useSessionStore } from './store/session-store';
+import { useStatuslineStore } from './store/statusline-store';
+import { connectSSE, sendPrompt } from './services/stream-consumer';
+const CanvasPanel = lazy(() => import('./components/canvas/CanvasPanel').then(m => ({ default: m.CanvasPanel })));
+export function App() {
+  const theme = useThemeStore((s) => s.activeTheme);
+  const cwd = useSessionStore((s) => s.cwd);
+  const isConnected = useSessionStore((s) => s.isConnected);
+  const model = useStatuslineStore((s) => s.model);
+  const [folderOpen, setFolderOpen] = useState(false);
+  const [modelOpen, setModelOpen] = useState(false);
+  const [sessionOpen, setSessionOpen] = useState(false);
+  const [canvasVisible, setCanvasVisible] = useState(true);
+  useEffect(() => {
+    const sse = connectSSE();
+    return () => sse.close();
+  }, []);
+  // Keyboard shortcuts
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.ctrlKey && e.key === 'o') { e.preventDefault(); setFolderOpen(true); }
+      if (e.ctrlKey && e.key === 'i') { e.preventDefault(); setSessionOpen(true); }
+      if (e.ctrlKey && e.key === 'b') { e.preventDefault(); setCanvasVisible((v) => !v); }
+      if (e.key === 'Escape') { setFolderOpen(false); setModelOpen(false); setSessionOpen(false); }
+    }
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, []);
+  const handleFolderSelect = useCallback((path: string) => {
+    useSessionStore.getState().setCwd(path);
+  }, []);
+  const handleModelSelect = useCallback((modelId: string) => {
+    useSessionStore.getState().setModel(modelId);
+  }, []);
+  const handleResume = useCallback((sessionId: string) => {
+    sendPrompt(`/resume ${sessionId}`);
+  }, []);
+  // Apply theme as CSS variables
+  const themeVars = {
+    '--color-bg': theme.colors.bg,
+    '--color-surface': theme.colors.bgSurface,
+    '--color-panel': theme.colors.bgPanel,
+    '--color-hover': theme.colors.bgHover,
+    '--color-text': theme.colors.text,
+    '--color-text-muted': theme.colors.textMuted,
+    '--color-text-dim': theme.colors.textDim,
+    '--color-border': theme.colors.border,
+    '--color-accent': theme.colors.accent,
+    '--color-error': theme.colors.error,
+    '--color-success': theme.colors.success,
+    '--color-warning': theme.colors.warning,
+    '--color-skill': theme.colors.skill,
+    '--color-model': theme.colors.model,
+    '--color-dir': theme.colors.dir,
+    '--color-github': theme.colors.github,
+    '--color-tokens': theme.colors.tokens,
+    '--color-cost': theme.colors.cost,
+    '--color-ctx-low': theme.colors.ctxLow,
+    '--color-ctx-med': theme.colors.ctxMed,
+    '--color-ctx-high': theme.colors.ctxHigh,
+    '--color-ctx-crit': theme.colors.ctxCrit,
+    '--color-bar-empty': theme.colors.barEmpty,
+    '--color-bar-filled': theme.colors.barFilled,
+    '--color-separator': theme.colors.separator,
+  } as React.CSSProperties;
+  return (
+    <div className="app-root" style={{ ...themeVars, background: theme.colors.bg, color: theme.colors.text, width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
+      {/* Header */}
+      <header style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        padding: '8px 16px', borderBottom: `1px solid ${theme.colors.border}`,
+        background: theme.colors.bgSurface, flexShrink: 0,
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <span style={{
+            color: theme.colors.bg, fontWeight: 800, fontSize: 12,
+            background: theme.colors.skill, borderRadius: 3, padding: '2px 6px',
+            letterSpacing: 1,
+          }}>UC</span>
+          <span style={{ color: theme.colors.skill, fontWeight: 700, fontSize: 18, marginLeft: 6 }}>UpfynAI</span>
+          <span style={{ color: theme.colors.accent, fontWeight: 700, fontSize: 18 }}>-Code</span>
+          <span style={{ color: theme.colors.textDim, fontSize: 11, marginLeft: 8 }}>by Thinqmesh Technologies</span>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          {/* Folder selector */}
+          <ToolbarButton theme={theme} onClick={() => setFolderOpen(true)} title="Open Project (Ctrl+O)">
+            <span style={{ fontSize: 14 }}>📂</span>
+            <span style={{ maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {cwd ? cwd.split(/[/\\]/).pop() : 'Open'}
+            </span>
+          </ToolbarButton>
+          {/* Model selector */}
+          <div style={{ position: 'relative' }}>
+            <ToolbarButton theme={theme} onClick={() => setModelOpen(!modelOpen)} title="Select Model">
+              <span style={{ width: 6, height: 6, borderRadius: '50%', background: theme.colors.model, flexShrink: 0 }} />
+              <span>{model || 'Model'}</span>
+            </ToolbarButton>
+            <ModelSelector isOpen={modelOpen} onClose={() => setModelOpen(false)} onSelect={handleModelSelect} />
+          </div>
+          {/* Session info */}
+          <ToolbarButton theme={theme} onClick={() => setSessionOpen(true)} title="Session Info (Ctrl+I)">
+            <ConnectionDot connected={isConnected} />
+            <span>Session</span>
+          </ToolbarButton>
+          {/* Toggle canvas */}
+          <ToolbarButton theme={theme} onClick={() => setCanvasVisible(!canvasVisible)} title="Toggle Canvas (Ctrl+B)">
+            <span style={{ fontSize: 13 }}>{canvasVisible ? '◧' : '▣'}</span>
+          </ToolbarButton>
+          {/* Theme picker */}
+          <ThemePicker />
+        </div>
+      </header>
+      {/* Main content */}
+      <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+        <ChatPanel />
+        {/* Canvas panel — tldraw agent workflow visualization */}
+        {canvasVisible && (
+          <div style={{
+            width: '40%', borderLeft: `1px solid ${theme.colors.border}`,
+            minWidth: 300, position: 'relative',
+          }}>
+            <Suspense fallback={
+              <div style={{
+                width: '100%', height: '100%', display: 'flex',
+                alignItems: 'center', justifyContent: 'center',
+                background: theme.colors.bgPanel, color: theme.colors.textDim,
+              }}>
+                Loading canvas...
+              </div>
+            }>
+              <CanvasPanel />
+            </Suspense>
+          </div>
+        )}
+      </div>
+      {/* StatuslineBar — CORE COMPONENT: Always rendered, cannot be toggled or hidden */}
+      <StatuslineBar />
+      {/* Modals */}
+      <FolderSelector
+        currentCwd={cwd}
+        onSelect={handleFolderSelect}
+        isOpen={folderOpen}
+        onClose={() => setFolderOpen(false)}
+      />
+      <SessionManager
+        isOpen={sessionOpen}
+        onClose={() => setSessionOpen(false)}
+        onResume={handleResume}
+      />
+    </div>
+  );
+}
+function ToolbarButton({ theme, onClick, title, children }: {
+  theme: any; onClick: () => void; title: string; children: React.ReactNode;
+}) {
+  return (
+    <button onClick={onClick} title={title} style={{
+      display: 'flex', alignItems: 'center', gap: 6,
+      background: theme.colors.bgPanel, color: theme.colors.text,
+      border: `1px solid ${theme.colors.border}`, borderRadius: 6,
+      padding: '5px 10px', fontSize: 12, cursor: 'pointer',
+      whiteSpace: 'nowrap',
+    }}>
+      {children}
+    </button>
+  );
+}
+function ConnectionDot({ connected }: { connected: boolean }) {
+  return (
+    <span style={{
+      width: 7, height: 7, borderRadius: '50%',
+      background: connected ? '#22c55e' : '#ef4444',
+      flexShrink: 0, boxShadow: connected ? '0 0 4px #22c55e' : 'none',
+    }} />
+  );
+}
+function ThemePicker() {
+  const { activeTheme, setTheme } = useThemeStore();
+  const themes = ['default', 'nord', 'tokyo-night', 'catppuccin', 'gruvbox'];
+  return (
+    <select
+      value={activeTheme.id}
+      onChange={(e) => setTheme(e.target.value)}
+      style={{
+        background: activeTheme.colors.bgPanel,
+        color: activeTheme.colors.text,
+        border: `1px solid ${activeTheme.colors.border}`,
+        borderRadius: 4, padding: '4px 8px', fontSize: 12,
+        cursor: 'pointer', outline: 'none',
+      }}
+    >
+      {themes.map((t) => (
+        <option key={t} value={t}>{t.charAt(0).toUpperCase() + t.slice(1).replace('-', ' ')}</option>
+      ))}
+    </select>
+  );
+}

package/src/components/canvas/CanvasPanel.tsx ADDED Viewed

@@ -0,0 +1,62 @@
+import { useEffect, useCallback, useRef } from 'react';
+import { Tldraw, type Editor } from '@tldraw/tldraw';
+import '@tldraw/tldraw/tldraw.css';
+import { SessionNodeShapeUtil } from './shapes/SessionNodeShape';
+import { ToolCallNodeShapeUtil } from './shapes/ToolCallNodeShape';
+import { ToolResultNodeShapeUtil } from './shapes/ToolResultNodeShape';
+import { TextResponseNodeShapeUtil } from './shapes/TextResponseNodeShape';
+import { CompactionNodeShapeUtil } from './shapes/CompactionNodeShape';
+import { StatuslineWidgetShapeUtil } from './shapes/StatuslineWidgetShape';
+import { syncCanvasToEditor } from './layout/graph-builder';
+import { useCanvasStore } from '../../store/canvas-store';
+import { useStatuslineStore } from '../../store/statusline-store';
+// Register custom shapes alongside tldraw's built-in shapes
+const customShapeUtils = [
+  SessionNodeShapeUtil,
+  ToolCallNodeShapeUtil,
+  ToolResultNodeShapeUtil,
+  TextResponseNodeShapeUtil,
+  CompactionNodeShapeUtil,
+  StatuslineWidgetShapeUtil,
+] as any[];
+export function CanvasPanel() {
+  const editorRef = useRef<Editor | null>(null);
+  const nodes = useCanvasStore((s) => s.nodes);
+  const contextPct = useStatuslineStore((s) => s.contextPct);
+  const cost = useStatuslineStore((s) => s.costFormatted);
+  const skill = useStatuslineStore((s) => s.skill);
+  const handleMount = useCallback((editor: Editor) => {
+    editorRef.current = editor;
+    // Set dark mode via official API
+    editor.user.updateUserPreferences({ colorScheme: 'dark' });
+    // Initial sync of agent workflow nodes
+    syncCanvasToEditor(editor);
+  }, []);
+  // Sync custom agent nodes on state changes
+  useEffect(() => {
+    if (editorRef.current) {
+      syncCanvasToEditor(editorRef.current);
+    }
+  }, [nodes, contextPct, cost, skill]);
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      {/*
+        Official tldraw component — all core features preserved:
+        - Full toolbar (draw, select, eraser, arrow, text, shapes, etc.)
+        - Zoom controls, minimap, page management
+        - Undo/redo, keyboard shortcuts
+        - Export, copy/paste, multi-select
+        - Custom shapes are ADDED alongside built-in shapes
+      */}
+      <Tldraw
+        shapeUtils={customShapeUtils}
+        onMount={handleMount}
+      />
+    </div>
+  );
+}

package/src/components/canvas/layout/graph-builder.ts ADDED Viewed

@@ -0,0 +1,136 @@
+import type { Editor } from '@tldraw/tldraw';
+import { useCanvasStore } from '../../../store/canvas-store';
+import { useStatuslineStore, fmtTok } from '../../../store/statusline-store';
+import type { CanvasNode } from '../../../types/canvas-graph';
+const COLUMN_X = 120;
+const START_Y = 120;
+const SPACING_Y = 100;
+const WIDGET_X = 500;
+const WIDGET_Y = 60;
+let shapeCount = 0;
+export function syncCanvasToEditor(editor: Editor) {
+  const { nodes } = useCanvasStore.getState();
+  const sl = useStatuslineStore.getState();
+  // Collect existing shape IDs
+  const existingIds = new Set(
+    editor.getCurrentPageShapeIds()
+  );
+  // Add new nodes as shapes
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const shapeId = `shape:${node.id}` as any;
+    if (existingIds.has(shapeId)) continue;
+    const y = START_Y + i * SPACING_Y;
+    switch (node.type) {
+      case 'session':
+        editor.createShape({
+          id: shapeId,
+          type: 'sessionNode' as any,
+          x: COLUMN_X,
+          y,
+          props: {
+            model: (node.data as any).model || 'unknown',
+            cwd: (node.data as any).cwd || '',
+            sessionId: (node.data as any).session_id || '',
+            toolCount: (node.data as any).tools?.length || 0,
+          },
+        } as any);
+        break;
+      case 'toolCall':
+        editor.createShape({
+          id: shapeId,
+          type: 'toolCallNode' as any,
+          x: COLUMN_X,
+          y,
+          props: {
+            toolName: (node.data as any).name || '',
+            toolInput: JSON.stringify((node.data as any).input || {}).slice(0, 200),
+            status: 'complete',
+          },
+        } as any);
+        break;
+      case 'toolResult':
+        editor.createShape({
+          id: shapeId,
+          type: 'toolResultNode' as any,
+          x: COLUMN_X + 20,
+          y,
+          props: {
+            toolName: (node.data as any).toolName || '',
+            outputSummary: String((node.data as any).content || '').slice(0, 200),
+            isError: !!(node.data as any).is_error,
+          },
+        } as any);
+        break;
+      case 'textResponse':
+        editor.createShape({
+          id: shapeId,
+          type: 'textResponseNode' as any,
+          x: COLUMN_X,
+          y,
+          props: {
+            text: (node.data as any).text || '',
+          },
+        } as any);
+        break;
+      case 'compaction':
+        editor.createShape({
+          id: shapeId,
+          type: 'compactionNode' as any,
+          x: COLUMN_X,
+          y,
+          props: {
+            preTokens: (node.data as any).pre_tokens || 0,
+            trigger: (node.data as any).trigger || 'auto',
+          },
+        } as any);
+        break;
+    }
+  }
+  // Update or create statusline widget
+  updateStatuslineWidget(editor, sl);
+}
+function updateStatuslineWidget(editor: Editor, sl: ReturnType<typeof useStatuslineStore.getState>) {
+  const widgetId = 'shape:statusline-widget' as any;
+  const props = {
+    model: sl.model,
+    cost: sl.costFormatted,
+    tokensIn: fmtTok(sl.tokensCumIn),
+    tokensOut: fmtTok(sl.tokensCumOut),
+    contextPct: sl.contextPct,
+    skill: sl.skill,
+    turns: sl.numTurns,
+  };
+  const existing = editor.getShape(widgetId);
+  if (existing) {
+    editor.updateShape({
+      id: widgetId,
+      type: 'statuslineWidget' as any,
+      props,
+    } as any);
+  } else {
+    editor.createShape({
+      id: widgetId,
+      type: 'statuslineWidget' as any,
+      x: WIDGET_X,
+      y: WIDGET_Y,
+      props,
+    } as any);
+  }
+}

package/src/components/canvas/shapes/CompactionNodeShape.tsx ADDED Viewed

@@ -0,0 +1,76 @@
+import {
+  BaseBoxShapeUtil,
+  HTMLContainer,
+  type TLBaseShape,
+} from '@tldraw/tldraw';
+import { SHAPE_DEFAULTS, NODE_COLORS } from './shared-styles';
+export type CompactionNodeShape = TLBaseShape<
+  'compactionNode',
+  {
+    w: number;
+    h: number;
+    preTokens: number;
+    trigger: string;
+  }
+>;
+// @ts-expect-error — custom shape type not in tldraw's built-in TLShape union
+export class CompactionNodeShapeUtil extends BaseBoxShapeUtil<CompactionNodeShape> {
+  static type = 'compactionNode' as const;
+  getDefaultProps(): CompactionNodeShape['props'] {
+    return {
+      w: 260,
+      h: 48,
+      preTokens: 0,
+      trigger: 'auto',
+    };
+  }
+  component(shape: CompactionNodeShape) {
+    const color = NODE_COLORS.compaction;
+    const tokensK = Math.round(shape.props.preTokens / 1000);
+    return (
+      <HTMLContainer>
+        <div
+          style={{
+            width: shape.props.w,
+            height: shape.props.h,
+            background: `${color}15`,
+            border: `1.5px dashed ${color}60`,
+            borderRadius: SHAPE_DEFAULTS.borderRadius,
+            padding: '8px 12px',
+            fontFamily: 'Inter, system-ui, sans-serif',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            pointerEvents: 'all',
+          }}
+        >
+          <span style={{ fontSize: 14 }}>⚠️</span>
+          <div>
+            <div style={{ color, fontSize: 11, fontWeight: 700 }}>
+              CONTEXT COMPACTED
+            </div>
+            <div style={{ color: '#787882', fontSize: 10 }}>
+              Was {tokensK}k tokens — {shape.props.trigger}
+            </div>
+          </div>
+        </div>
+      </HTMLContainer>
+    );
+  }
+  indicator(shape: CompactionNodeShape) {
+    return (
+      <rect
+        width={shape.props.w}
+        height={shape.props.h}
+        rx={SHAPE_DEFAULTS.borderRadius}
+        ry={SHAPE_DEFAULTS.borderRadius}
+      />
+    );
+  }
+}