upfynai-code 0.1.0

package/src/components/canvas/shapes/SessionNodeShape.tsx

@@ -0,0 +1,93 @@
+import {
+  BaseBoxShapeUtil,
+  HTMLContainer,
+  type TLBaseShape,
+} from '@tldraw/tldraw';
+import { SHAPE_DEFAULTS, NODE_COLORS } from './shared-styles';
+
+export type SessionNodeShape = TLBaseShape<
+  'sessionNode',
+  {
+    w: number;
+    h: number;
+    model: string;
+    cwd: string;
+    sessionId: string;
+    toolCount: number;
+  }
+>;
+
+// @ts-expect-error — custom shape type not in tldraw's built-in TLShape union
+export class SessionNodeShapeUtil extends BaseBoxShapeUtil<SessionNodeShape> {
+  static type = 'sessionNode' as const;
+
+  getDefaultProps(): SessionNodeShape['props'] {
+    return {
+      w: 280,
+      h: 84,
+      model: 'unknown',
+      cwd: '',
+      sessionId: '',
+      toolCount: 0,
+    };
+  }
+
+  component(shape: SessionNodeShape) {
+    const color = NODE_COLORS.session;
+    return (
+      <HTMLContainer>
+        <div
+          style={{
+            width: shape.props.w,
+            height: shape.props.h,
+            background: '#1a1a2e',
+            border: `2px solid ${color}`,
+            borderRadius: SHAPE_DEFAULTS.borderRadius,
+            padding: SHAPE_DEFAULTS.padding,
+            fontFamily: 'Inter, system-ui, sans-serif',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            pointerEvents: 'all',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <span
+              style={{
+                background: color,
+                color: '#0a0a0f',
+                fontSize: 9,
+                fontWeight: 800,
+                padding: '2px 6px',
+                borderRadius: 3,
+                letterSpacing: 1,
+              }}
+            >
+              SESSION
+            </span>
+            <span style={{ color, fontSize: 13, fontWeight: 700 }}>
+              {shape.props.model}
+            </span>
+          </div>
+          <div style={{ color: '#787882', fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {shape.props.cwd}
+          </div>
+          <div style={{ color: '#505058', fontSize: 10 }}>
+            {shape.props.toolCount} tools available
+          </div>
+        </div>
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: SessionNodeShape) {
+    return (
+      <rect
+        width={shape.props.w}
+        height={shape.props.h}
+        rx={SHAPE_DEFAULTS.borderRadius}
+        ry={SHAPE_DEFAULTS.borderRadius}
+      />
+    );
+  }
+}

package/src/components/canvas/shapes/StatuslineWidgetShape.tsx

@@ -0,0 +1,125 @@
+import {
+  BaseBoxShapeUtil,
+  HTMLContainer,
+  type TLBaseShape,
+} from '@tldraw/tldraw';
+import { NODE_COLORS } from './shared-styles';
+
+export type StatuslineWidgetShape = TLBaseShape<
+  'statuslineWidget',
+  {
+    w: number;
+    h: number;
+    model: string;
+    cost: string;
+    tokensIn: string;
+    tokensOut: string;
+    contextPct: number;
+    skill: string;
+    turns: number;
+  }
+>;
+
+// @ts-expect-error — custom shape type not in tldraw's built-in TLShape union
+export class StatuslineWidgetShapeUtil extends BaseBoxShapeUtil<StatuslineWidgetShape> {
+  static type = 'statuslineWidget' as const;
+
+  getDefaultProps(): StatuslineWidgetShape['props'] {
+    return {
+      w: 220,
+      h: 140,
+      model: 'unknown',
+      cost: '$0.00',
+      tokensIn: '0',
+      tokensOut: '0',
+      contextPct: 0,
+      skill: 'Idle',
+      turns: 0,
+    };
+  }
+
+  component(shape: StatuslineWidgetShape) {
+    const { model, cost, tokensIn, tokensOut, contextPct, skill, turns } = shape.props;
+    const color = NODE_COLORS.statusline;
+
+    const ctxColor = contextPct > 90 ? '#dc2626'
+      : contextPct > 75 ? '#ef4444'
+      : contextPct > 40 ? '#fb923c'
+      : '#e4e4e7';
+
+    return (
+      <HTMLContainer>
+        <div
+          style={{
+            width: shape.props.w,
+            height: shape.props.h,
+            background: '#0a0a0f',
+            border: `1.5px solid ${color}50`,
+            borderRadius: 10,
+            padding: 10,
+            fontFamily: 'JetBrains Mono, monospace',
+            fontSize: 10,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 3,
+            pointerEvents: 'all',
+          }}
+        >
+          {/* Header */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }}>
+            <span style={{
+              background: color, color: '#0a0a0f', fontSize: 8,
+              fontWeight: 800, padding: '1px 4px', borderRadius: 2,
+              letterSpacing: 1,
+            }}>UC</span>
+            <span style={{ color, fontSize: 10, fontWeight: 600 }}>Statusline</span>
+          </div>
+
+          {/* Fields */}
+          <Row label="Model" value={model} color="#a855f7" />
+          <Row label="Skill" value={skill} color={color} />
+          <Row label="Tokens" value={`${tokensIn} + ${tokensOut}`} color="#f59e0b" />
+          <Row label="Cost" value={cost} color="#22c55e" />
+          <Row label="Turns" value={String(turns)} color="#787882" />
+
+          {/* Context bar */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 2 }}>
+            <span style={{ color: ctxColor, minWidth: 28 }}>Ctx</span>
+            <div style={{
+              flex: 1, height: 5, borderRadius: 3,
+              background: '#28282d', overflow: 'hidden',
+            }}>
+              <div style={{
+                width: `${contextPct}%`, height: '100%',
+                background: ctxColor, borderRadius: 3,
+              }} />
+            </div>
+            <span style={{ color: ctxColor, minWidth: 26, textAlign: 'right' }}>
+              {contextPct}%
+            </span>
+          </div>
+        </div>
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: StatuslineWidgetShape) {
+    return (
+      <rect
+        width={shape.props.w}
+        height={shape.props.h}
+        rx={10}
+        ry={10}
+      />
+    );
+  }
+}
+
+function Row({ label, value, color }: { label: string; value: string; color: string }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+      <span style={{ color: '#505058' }}>{label}</span>
+      <span style={{ color, fontWeight: 500 }}>{value}</span>
+    </div>
+  );
+}

package/src/components/canvas/shapes/TextResponseNodeShape.tsx

@@ -0,0 +1,86 @@
+import {
+  BaseBoxShapeUtil,
+  HTMLContainer,
+  type TLBaseShape,
+} from '@tldraw/tldraw';
+import { SHAPE_DEFAULTS, NODE_COLORS, truncate } from './shared-styles';
+
+export type TextResponseNodeShape = TLBaseShape<
+  'textResponseNode',
+  {
+    w: number;
+    h: number;
+    text: string;
+  }
+>;
+
+// @ts-expect-error — custom shape type not in tldraw's built-in TLShape union
+export class TextResponseNodeShapeUtil extends BaseBoxShapeUtil<TextResponseNodeShape> {
+  static type = 'textResponseNode' as const;
+
+  getDefaultProps(): TextResponseNodeShape['props'] {
+    return {
+      w: 280,
+      h: 72,
+      text: '',
+    };
+  }
+
+  component(shape: TextResponseNodeShape) {
+    const color = NODE_COLORS.textResponse;
+
+    return (
+      <HTMLContainer>
+        <div
+          style={{
+            width: shape.props.w,
+            height: shape.props.h,
+            background: '#141419',
+            border: `1.5px solid ${color}30`,
+            borderLeft: `3px solid ${color}`,
+            borderRadius: SHAPE_DEFAULTS.borderRadius,
+            padding: SHAPE_DEFAULTS.padding,
+            fontFamily: 'Inter, system-ui, sans-serif',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            overflow: 'hidden',
+            pointerEvents: 'all',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <span style={{ fontSize: 12 }}>💬</span>
+            <span style={{ color, fontSize: 11, fontWeight: 600 }}>
+              Claude Response
+            </span>
+          </div>
+          <div
+            style={{
+              color: '#a0a0a8',
+              fontSize: 11,
+              lineHeight: 1.4,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+            }}
+          >
+            {truncate(shape.props.text, 200)}
+          </div>
+        </div>
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: TextResponseNodeShape) {
+    return (
+      <rect
+        width={shape.props.w}
+        height={shape.props.h}
+        rx={SHAPE_DEFAULTS.borderRadius}
+        ry={SHAPE_DEFAULTS.borderRadius}
+      />
+    );
+  }
+}

package/src/components/canvas/shapes/ToolCallNodeShape.tsx

@@ -0,0 +1,107 @@
+import {
+  BaseBoxShapeUtil,
+  HTMLContainer,
+  type TLBaseShape,
+} from '@tldraw/tldraw';
+import { SHAPE_DEFAULTS, NODE_COLORS, getToolIcon, truncate } from './shared-styles';
+
+export type ToolCallNodeShape = TLBaseShape<
+  'toolCallNode',
+  {
+    w: number;
+    h: number;
+    toolName: string;
+    toolInput: string;
+    status: 'pending' | 'running' | 'complete' | 'denied';
+  }
+>;
+
+const STATUS_COLORS: Record<string, string> = {
+  pending: '#f59e0b',
+  running: '#60a5fa',
+  complete: '#22c55e',
+  denied: '#ef4444',
+};
+
+// @ts-expect-error — custom shape type not in tldraw's built-in TLShape union
+export class ToolCallNodeShapeUtil extends BaseBoxShapeUtil<ToolCallNodeShape> {
+  static type = 'toolCallNode' as const;
+
+  getDefaultProps(): ToolCallNodeShape['props'] {
+    return {
+      w: 260,
+      h: 72,
+      toolName: '',
+      toolInput: '',
+      status: 'complete',
+    };
+  }
+
+  component(shape: ToolCallNodeShape) {
+    const color = NODE_COLORS.toolCall;
+    const statusColor = STATUS_COLORS[shape.props.status];
+    const icon = getToolIcon(shape.props.toolName);
+
+    return (
+      <HTMLContainer>
+        <div
+          style={{
+            width: shape.props.w,
+            height: shape.props.h,
+            background: '#141419',
+            border: `1.5px solid ${color}40`,
+            borderLeft: `3px solid ${color}`,
+            borderRadius: SHAPE_DEFAULTS.borderRadius,
+            padding: SHAPE_DEFAULTS.padding,
+            fontFamily: 'Inter, system-ui, sans-serif',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            pointerEvents: 'all',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <span style={{ fontSize: 14 }}>{icon}</span>
+            <span style={{ color, fontSize: 12, fontWeight: 600 }}>
+              {shape.props.toolName}
+            </span>
+            <span
+              style={{
+                marginLeft: 'auto',
+                fontSize: 9,
+                color: statusColor,
+                fontWeight: 600,
+                textTransform: 'uppercase',
+              }}
+            >
+              {shape.props.status}
+            </span>
+          </div>
+          <div
+            style={{
+              color: '#787882',
+              fontSize: 10,
+              fontFamily: 'JetBrains Mono, monospace',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {truncate(shape.props.toolInput, 80)}
+          </div>
+        </div>
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: ToolCallNodeShape) {
+    return (
+      <rect
+        width={shape.props.w}
+        height={shape.props.h}
+        rx={SHAPE_DEFAULTS.borderRadius}
+        ry={SHAPE_DEFAULTS.borderRadius}
+      />
+    );
+  }
+}

package/src/components/canvas/shapes/ToolResultNodeShape.tsx

@@ -0,0 +1,87 @@
+import {
+  BaseBoxShapeUtil,
+  HTMLContainer,
+  type TLBaseShape,
+} from '@tldraw/tldraw';
+import { SHAPE_DEFAULTS, NODE_COLORS, truncate } from './shared-styles';
+
+export type ToolResultNodeShape = TLBaseShape<
+  'toolResultNode',
+  {
+    w: number;
+    h: number;
+    toolName: string;
+    outputSummary: string;
+    isError: boolean;
+  }
+>;
+
+// @ts-expect-error — custom shape type not in tldraw's built-in TLShape union
+export class ToolResultNodeShapeUtil extends BaseBoxShapeUtil<ToolResultNodeShape> {
+  static type = 'toolResultNode' as const;
+
+  getDefaultProps(): ToolResultNodeShape['props'] {
+    return {
+      w: 260,
+      h: 64,
+      toolName: '',
+      outputSummary: '',
+      isError: false,
+    };
+  }
+
+  component(shape: ToolResultNodeShape) {
+    const color = shape.props.isError ? NODE_COLORS.compaction : NODE_COLORS.toolResult;
+
+    return (
+      <HTMLContainer>
+        <div
+          style={{
+            width: shape.props.w,
+            height: shape.props.h,
+            background: '#141419',
+            border: `1.5px solid ${color}30`,
+            borderLeft: `3px solid ${color}`,
+            borderRadius: SHAPE_DEFAULTS.borderRadius,
+            padding: SHAPE_DEFAULTS.padding,
+            fontFamily: 'Inter, system-ui, sans-serif',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            pointerEvents: 'all',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <span style={{ fontSize: 12 }}>{shape.props.isError ? '❌' : '✅'}</span>
+            <span style={{ color, fontSize: 11, fontWeight: 600 }}>
+              {shape.props.toolName} result
+            </span>
+          </div>
+          <div
+            style={{
+              color: '#787882',
+              fontSize: 10,
+              fontFamily: 'JetBrains Mono, monospace',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {truncate(shape.props.outputSummary, 100)}
+          </div>
+        </div>
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: ToolResultNodeShape) {
+    return (
+      <rect
+        width={shape.props.w}
+        height={shape.props.h}
+        rx={SHAPE_DEFAULTS.borderRadius}
+        ry={SHAPE_DEFAULTS.borderRadius}
+      />
+    );
+  }
+}

package/src/components/canvas/shapes/shared-styles.ts

@@ -0,0 +1,35 @@
+// Shared constants and helpers for custom tldraw shapes
+export const SHAPE_DEFAULTS = {
+  width: 260,
+  height: 72,
+  padding: 12,
+  borderRadius: 8,
+  fontSize: 12,
+  labelSize: 10,
+};
+
+export const NODE_COLORS: Record<string, string> = {
+  session: '#a855f7',
+  toolCall: '#f59e0b',
+  toolResult: '#22c55e',
+  textResponse: '#60a5fa',
+  compaction: '#ef4444',
+  statusline: '#ec4899',
+};
+
+export const TOOL_ICONS: Record<string, string> = {
+  Read: '📄', Write: '✏️', Edit: '🔧', Bash: '⌨️', Glob: '🔍',
+  Grep: '🔎', Task: '🤖', WebSearch: '🌐', WebFetch: '📡',
+  MultiEdit: '🔧', Skill: '⚡', AskUserQuestion: '❓',
+  EnterPlanMode: '📋', ExitPlanMode: '✅', NotebookEdit: '📓',
+  default: '🔹',
+};
+
+export function getToolIcon(name: string): string {
+  return TOOL_ICONS[name] || TOOL_ICONS.default;
+}
+
+export function truncate(str: string, max: number): string {
+  if (str.length <= max) return str;
+  return str.slice(0, max - 1) + '…';
+}

package/src/components/chat/ChatPanel.tsx

@@ -0,0 +1,96 @@
+import { useRef, useEffect } from 'react';
+import { useChatStore } from '../../store/chat-store';
+import { useSessionStore } from '../../store/session-store';
+import { useThemeStore } from '../../themes';
+import { MessageList } from './MessageList';
+import { InputBar } from './InputBar';
+import { PermissionDialog } from './PermissionDialog';
+
+export function ChatPanel() {
+  const theme = useThemeStore((s) => s.activeTheme);
+  const messages = useChatStore((s) => s.messages);
+  const streamingText = useChatStore((s) => s.streamingText);
+  const isConnected = useSessionStore((s) => s.isConnected);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, streamingText]);
+
+  return (
+    <div style={{
+      flex: 1, display: 'flex', flexDirection: 'column',
+      minWidth: 400, position: 'relative',
+    }}>
+      {/* Connection indicator */}
+      <div style={{
+        padding: '4px 16px', fontSize: 11,
+        color: isConnected ? theme.colors.success : theme.colors.error,
+        background: theme.colors.bgSurface,
+        borderBottom: `1px solid ${theme.colors.border}`,
+      }}>
+        {isConnected ? '● Connected' : '○ Connecting...'}
+      </div>
+
+      {/* Messages */}
+      <div ref={scrollRef} style={{
+        flex: 1, overflowY: 'auto', padding: '12px 0',
+      }}>
+        {messages.length === 0 && !streamingText ? (
+          <WelcomeScreen />
+        ) : (
+          <MessageList messages={messages} streamingText={streamingText} />
+        )}
+      </div>
+
+      {/* Permission dialogs */}
+      <PermissionDialog />
+
+      {/* Input */}
+      <InputBar />
+    </div>
+  );
+}
+
+function WelcomeScreen() {
+  const theme = useThemeStore((s) => s.activeTheme);
+
+  return (
+    <div style={{
+      display: 'flex', flexDirection: 'column', alignItems: 'center',
+      justifyContent: 'center', height: '100%', gap: 16, padding: 40,
+    }}>
+      <div style={{
+        color: theme.colors.bg, fontWeight: 800, fontSize: 28,
+        background: theme.colors.skill, borderRadius: 8, padding: '8px 16px',
+        letterSpacing: 2,
+      }}>UC</div>
+      <div style={{ marginTop: 8 }}>
+        <span style={{ color: theme.colors.skill, fontWeight: 700, fontSize: 24 }}>UpfynAI</span>
+        <span style={{ color: theme.colors.accent, fontWeight: 700, fontSize: 24 }}>-Code</span>
+      </div>
+      <p style={{ color: theme.colors.textMuted, textAlign: 'center', maxWidth: 400, fontSize: 13 }}>
+        Visual AI coding interface powered by Claude Code SDK.
+        Type a message below to start a session.
+      </p>
+      <div style={{
+        display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center', marginTop: 8,
+      }}>
+        {['Read the README', 'Find all TODO comments', 'Explain the architecture'].map((s) => (
+          <button key={s} onClick={() => {
+            useChatStore.getState().setInput(s);
+          }} style={{
+            background: theme.colors.bgPanel, color: theme.colors.textMuted,
+            border: `1px solid ${theme.colors.border}`, borderRadius: 6,
+            padding: '6px 12px', fontSize: 12, cursor: 'pointer',
+          }}>
+            {s}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}