upfynai-code 0.1.0 → 2.2.0

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

@@ -1,125 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,35 +0,0 @@
-// 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

@@ -1,96 +0,0 @@
-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>
-  );
-}

package/src/components/chat/InputBar.tsx

@@ -1,81 +0,0 @@
-import { useRef, useCallback } from 'react';
-import { useChatStore } from '../../store/chat-store';
-import { useSessionStore } from '../../store/session-store';
-import { useThemeStore } from '../../themes';
-import { sendPrompt } from '../../services/stream-consumer';
-
-export function InputBar() {
-  const theme = useThemeStore((s) => s.activeTheme);
-  const input = useChatStore((s) => s.input);
-  const isWaiting = useChatStore((s) => s.isWaiting);
-  const isStreaming = useSessionStore((s) => s.isStreaming);
-  const setInput = useChatStore((s) => s.setInput);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const handleSend = useCallback(() => {
-    const text = input.trim();
-    if (!text || isWaiting || isStreaming) return;
-    sendPrompt(text);
-  }, [input, isWaiting, isStreaming]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  }, [handleSend]);
-
-  return (
-    <div style={{
-      padding: '8px 16px', borderTop: `1px solid ${theme.colors.border}`,
-      background: theme.colors.bgSurface, flexShrink: 0,
-    }}>
-      <div style={{
-        display: 'flex', gap: 8, alignItems: 'flex-end',
-        background: theme.colors.bgPanel, borderRadius: 8,
-        border: `1px solid ${theme.colors.border}`, padding: '8px 12px',
-      }}>
-        <textarea
-          ref={textareaRef}
-          value={input}
-          onChange={(e) => {
-            setInput(e.target.value);
-            // Auto-resize
-            e.target.style.height = 'auto';
-            e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
-          }}
-          onKeyDown={handleKeyDown}
-          placeholder={isWaiting ? 'Waiting for response...' : 'Message Claude Code...'}
-          disabled={isWaiting || isStreaming}
-          rows={1}
-          style={{
-            flex: 1, background: 'transparent', border: 'none', outline: 'none',
-            color: theme.colors.text, fontFamily: 'var(--font-sans)', fontSize: 14,
-            resize: 'none', lineHeight: 1.5, maxHeight: 200,
-          }}
-        />
-        <button
-          onClick={handleSend}
-          disabled={!input.trim() || isWaiting || isStreaming}
-          style={{
-            background: input.trim() && !isWaiting ? theme.colors.accent : theme.colors.bgHover,
-            color: input.trim() && !isWaiting ? '#fff' : theme.colors.textDim,
-            border: 'none', borderRadius: 6, padding: '6px 16px',
-            fontSize: 13, fontWeight: 600, cursor: input.trim() && !isWaiting ? 'pointer' : 'default',
-            transition: 'background 0.15s',
-            flexShrink: 0,
-          }}
-        >
-          {isWaiting || isStreaming ? '...' : 'Send'}
-        </button>
-      </div>
-      <div style={{
-        display: 'flex', justifyContent: 'space-between', marginTop: 4,
-        fontSize: 11, color: theme.colors.textDim, padding: '0 4px',
-      }}>
-        <span>Enter to send, Shift+Enter for newline</span>
-        <span>Powered by Claude Code SDK</span>
-      </div>
-    </div>
-  );
-}