upfynai-code 0.1.0

package/src/components/chat/InputBar.tsx

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

package/src/components/chat/MessageList.tsx

@@ -0,0 +1,130 @@
+import type { ChatMessage } from '../../types/sdk-messages';
+import { useThemeStore } from '../../themes';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface Props {
+  messages: ChatMessage[];
+  streamingText: string;
+}
+
+export function MessageList({ messages, streamingText }: Props) {
+  const theme = useThemeStore((s) => s.activeTheme);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      {messages.map((msg) => (
+        <MessageBubble key={msg.id} message={msg} />
+      ))}
+
+      {/* Streaming text */}
+      {streamingText && (
+        <div className="animate-fade-in" style={{
+          padding: '8px 16px', borderLeft: `2px solid ${theme.colors.accent}`,
+          margin: '0 16px',
+        }}>
+          <div className="markdown-content" style={{ color: theme.colors.text, fontSize: 13 }}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{streamingText}</ReactMarkdown>
+          </div>
+          <span className="animate-pulse" style={{
+            color: theme.colors.accent, fontSize: 16, marginLeft: 2,
+          }}>▌</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MessageBubble({ message }: { message: ChatMessage }) {
+  const theme = useThemeStore((s) => s.activeTheme);
+
+  const styles: Record<string, React.CSSProperties> = {
+    user: {
+      background: theme.colors.bgPanel,
+      borderLeft: `2px solid ${theme.colors.accent}`,
+      color: theme.colors.text,
+    },
+    assistant: {
+      background: 'transparent',
+      borderLeft: `2px solid ${theme.colors.model}`,
+      color: theme.colors.text,
+    },
+    tool_call: {
+      background: theme.colors.bgSurface,
+      borderLeft: `2px solid ${theme.colors.tokens}`,
+      color: theme.colors.text,
+    },
+    tool_result: {
+      background: theme.colors.bgSurface,
+      borderLeft: `2px solid ${message.isError ? theme.colors.error : theme.colors.success}`,
+      color: theme.colors.text,
+    },
+    system: {
+      background: 'transparent',
+      borderLeft: `2px solid ${message.isError ? theme.colors.error : theme.colors.textDim}`,
+      color: message.isError ? theme.colors.error : theme.colors.textMuted,
+    },
+  };
+
+  const roleLabels: Record<string, string> = {
+    user: 'You',
+    assistant: 'Claude',
+    tool_call: message.toolName || 'Tool',
+    tool_result: `${message.toolName || 'Result'}`,
+    system: 'System',
+  };
+
+  const roleColors: Record<string, string> = {
+    user: theme.colors.accent,
+    assistant: theme.colors.model,
+    tool_call: theme.colors.tokens,
+    tool_result: message.isError ? theme.colors.error : theme.colors.success,
+    system: theme.colors.textDim,
+  };
+
+  const isToolResult = message.role === 'tool_result';
+  const isToolCall = message.role === 'tool_call';
+  const isCollapsible = (isToolResult || isToolCall) && message.content.length > 200;
+
+  return (
+    <div className="animate-fade-in" style={{
+      padding: '8px 16px', margin: '0 16px', borderRadius: 4,
+      ...styles[message.role],
+    }}>
+      {/* Role label */}
+      <div style={{
+        fontSize: 11, fontWeight: 600, marginBottom: 4,
+        color: roleColors[message.role],
+        display: 'flex', alignItems: 'center', gap: 6,
+      }}>
+        <span>{roleLabels[message.role]}</span>
+        {isToolCall && (
+          <span style={{
+            fontSize: 10, padding: '1px 6px', borderRadius: 3,
+            background: theme.colors.bgHover, color: theme.colors.tokens,
+          }}>
+            {message.toolName}
+          </span>
+        )}
+      </div>
+
+      {/* Content */}
+      {message.role === 'assistant' || message.role === 'user' ? (
+        <div className="markdown-content" style={{ fontSize: 13 }}>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
+        </div>
+      ) : (
+        <pre style={{
+          fontSize: 12, fontFamily: 'var(--font-mono)',
+          whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+          maxHeight: isCollapsible ? 150 : undefined,
+          overflow: isCollapsible ? 'hidden' : undefined,
+          color: theme.colors.text, background: 'transparent',
+          padding: 0, margin: 0,
+        }}>
+          {message.content}
+        </pre>
+      )}
+    </div>
+  );
+}

package/src/components/chat/PermissionDialog.tsx

@@ -0,0 +1,70 @@
+import { usePermissionStore } from '../../store/permission-store';
+import { useThemeStore } from '../../themes';
+import { respondPermission } from '../../services/stream-consumer';
+
+export function PermissionDialog() {
+  const theme = useThemeStore((s) => s.activeTheme);
+  const pending = usePermissionStore((s) => s.pending);
+
+  if (pending.length === 0) return null;
+
+  const request = pending[0];
+
+  // Risk level by tool name
+  const highRisk = ['Bash', 'Write', 'Edit', 'MultiEdit', 'NotebookEdit'];
+  const isHigh = highRisk.includes(request.toolName);
+
+  return (
+    <div className="animate-slide-up" style={{
+      position: 'absolute', bottom: 80, left: 16, right: 16,
+      background: theme.colors.bgSurface, borderRadius: 8,
+      border: `1px solid ${isHigh ? theme.colors.warning : theme.colors.border}`,
+      padding: 16, zIndex: 100,
+      boxShadow: `0 4px 24px rgba(0,0,0,0.4)`,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+        <span style={{
+          fontSize: 10, fontWeight: 600, padding: '2px 6px', borderRadius: 3,
+          background: isHigh ? theme.colors.warning : theme.colors.success,
+          color: theme.colors.bg,
+        }}>
+          {isHigh ? 'HIGH RISK' : 'LOW RISK'}
+        </span>
+        <span style={{ color: theme.colors.text, fontWeight: 600, fontSize: 14 }}>
+          {request.toolName}
+        </span>
+        {pending.length > 1 && (
+          <span style={{ color: theme.colors.textDim, fontSize: 11 }}>
+            +{pending.length - 1} more
+          </span>
+        )}
+      </div>
+
+      <pre style={{
+        fontSize: 11, fontFamily: 'var(--font-mono)', color: theme.colors.textMuted,
+        background: theme.colors.bgPanel, borderRadius: 4, padding: 8,
+        maxHeight: 120, overflow: 'auto', whiteSpace: 'pre-wrap',
+        marginBottom: 12,
+      }}>
+        {JSON.stringify(request.toolInput, null, 2)}
+      </pre>
+
+      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+        <button onClick={() => respondPermission(request.requestId, false)} style={{
+          background: theme.colors.bgPanel, color: theme.colors.error,
+          border: `1px solid ${theme.colors.error}`, borderRadius: 6,
+          padding: '6px 16px', fontSize: 12, fontWeight: 600, cursor: 'pointer',
+        }}>
+          Deny
+        </button>
+        <button onClick={() => respondPermission(request.requestId, true)} style={{
+          background: theme.colors.success, color: '#fff',
+          border: 'none', borderRadius: 6,
+          padding: '6px 16px', fontSize: 12, fontWeight: 600, cursor: 'pointer',
+        }}>
+          Allow
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/layout/FolderSelector.tsx

@@ -0,0 +1,152 @@
+import { useState, useEffect } from 'react';
+import { useThemeStore } from '../../themes';
+
+interface Project {
+  path: string;
+  name: string;
+  lastUsed: number;
+}
+
+interface Props {
+  currentCwd: string;
+  onSelect: (path: string) => void;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function FolderSelector({ currentCwd, onSelect, isOpen, onClose }: Props) {
+  const theme = useThemeStore((s) => s.activeTheme);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [customPath, setCustomPath] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      loadProjects();
+    }
+  }, [isOpen]);
+
+  async function loadProjects() {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/projects');
+      if (res.ok) {
+        const data = await res.json();
+        setProjects(data.projects || []);
+      }
+    } catch {
+      // Server might not have this endpoint yet
+    }
+    setLoading(false);
+  }
+
+  if (!isOpen) return null;
+
+  const c = theme.colors;
+
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, zIndex: 1000,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)',
+    }} onClick={onClose}>
+      <div style={{
+        background: c.bgSurface, border: `1px solid ${c.border}`,
+        borderRadius: 12, padding: 24, width: 480, maxHeight: '70vh',
+        display: 'flex', flexDirection: 'column', gap: 16,
+      }} onClick={(e) => e.stopPropagation()}>
+        {/* Header */}
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <div>
+            <h2 style={{ color: c.text, fontSize: 16, fontWeight: 700, margin: 0 }}>
+              Open Project
+            </h2>
+            <p style={{ color: c.textMuted, fontSize: 12, margin: '4px 0 0' }}>
+              Select a folder to start a Claude Code session
+            </p>
+          </div>
+          <button onClick={onClose} style={{
+            background: 'none', border: 'none', color: c.textMuted,
+            fontSize: 20, cursor: 'pointer', padding: 4,
+          }}>×</button>
+        </div>
+
+        {/* Custom path input */}
+        <div style={{ display: 'flex', gap: 8 }}>
+          <input
+            type="text"
+            value={customPath}
+            onChange={(e) => setCustomPath(e.target.value)}
+            placeholder="Enter folder path..."
+            style={{
+              flex: 1, background: c.bgPanel, color: c.text,
+              border: `1px solid ${c.border}`, borderRadius: 6,
+              padding: '8px 12px', fontSize: 13, outline: 'none',
+              fontFamily: 'var(--font-mono)',
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && customPath.trim()) {
+                onSelect(customPath.trim());
+                onClose();
+              }
+            }}
+          />
+          <button onClick={() => {
+            if (customPath.trim()) {
+              onSelect(customPath.trim());
+              onClose();
+            }
+          }} style={{
+            background: c.accent, color: '#fff', border: 'none',
+            borderRadius: 6, padding: '8px 16px', fontSize: 12,
+            fontWeight: 600, cursor: 'pointer', flexShrink: 0,
+          }}>
+            Open
+          </button>
+        </div>
+
+        {/* Current project */}
+        {currentCwd && (
+          <div style={{
+            background: c.bgPanel, borderRadius: 6, padding: '8px 12px',
+            border: `1px solid ${c.accent}30`,
+          }}>
+            <div style={{ fontSize: 10, color: c.accent, fontWeight: 600, marginBottom: 2 }}>
+              CURRENT
+            </div>
+            <div style={{ fontSize: 12, color: c.text, fontFamily: 'var(--font-mono)' }}>
+              {currentCwd}
+            </div>
+          </div>
+        )}
+
+        {/* Discovered projects */}
+        {projects.length > 0 && (
+          <div style={{ flex: 1, overflowY: 'auto' }}>
+            <div style={{ fontSize: 10, color: c.textDim, fontWeight: 600, marginBottom: 8 }}>
+              RECENT PROJECTS
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+              {projects.map((p) => (
+                <button key={p.path} onClick={() => { onSelect(p.path); onClose(); }} style={{
+                  background: c.bgPanel, border: `1px solid ${c.border}`,
+                  borderRadius: 6, padding: '8px 12px', cursor: 'pointer',
+                  textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 2,
+                }}>
+                  <span style={{ color: c.text, fontSize: 13, fontWeight: 500 }}>{p.name}</span>
+                  <span style={{ color: c.textDim, fontSize: 11, fontFamily: 'var(--font-mono)' }}>{p.path}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {loading && (
+          <div style={{ color: c.textMuted, fontSize: 12, textAlign: 'center', padding: 16 }}>
+            Scanning for projects...
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/layout/ModelSelector.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { useSessionStore } from '../../store/session-store';
+import { useThemeStore } from '../../themes';
+
+const MODELS = [
+  { id: 'claude-opus-4-6', name: 'Opus 4.6', tier: 'max' },
+  { id: 'claude-sonnet-4-6', name: 'Sonnet 4.6', tier: 'balanced' },
+  { id: 'claude-sonnet-4-20250514', name: 'Sonnet 4', tier: 'balanced' },
+  { id: 'claude-haiku-4-5-20251001', name: 'Haiku 4.5', tier: 'fast' },
+];
+
+const TIER_COLORS: Record<string, string> = {
+  max: '#a855f7',
+  balanced: '#60a5fa',
+  fast: '#22c55e',
+};
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (modelId: string) => void;
+}
+
+export function ModelSelector({ isOpen, onClose, onSelect }: Props) {
+  const theme = useThemeStore((s) => s.activeTheme);
+  const currentModel = useSessionStore((s) => s.model);
+  const c = theme.colors;
+
+  if (!isOpen) return null;
+
+  return (
+    <div style={{
+      position: 'absolute', top: '100%', right: 0, marginTop: 4,
+      background: c.bgSurface, border: `1px solid ${c.border}`,
+      borderRadius: 8, padding: 4, width: 220, zIndex: 100,
+      boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+    }}>
+      <div style={{ padding: '4px 8px', fontSize: 10, color: c.textDim, fontWeight: 600 }}>
+        SELECT MODEL
+      </div>
+      {MODELS.map((m) => {
+        const isActive = currentModel.toLowerCase().includes(m.name.toLowerCase().split(' ')[0].toLowerCase());
+        return (
+          <button key={m.id} onClick={() => { onSelect(m.id); onClose(); }} style={{
+            width: '100%', background: isActive ? `${c.accent}15` : 'transparent',
+            border: isActive ? `1px solid ${c.accent}30` : '1px solid transparent',
+            borderRadius: 6, padding: '8px 10px', cursor: 'pointer',
+            display: 'flex', alignItems: 'center', gap: 8, textAlign: 'left',
+          }}>
+            <span style={{
+              width: 6, height: 6, borderRadius: '50%',
+              background: TIER_COLORS[m.tier],
+              flexShrink: 0,
+            }} />
+            <div style={{ flex: 1 }}>
+              <div style={{ color: c.text, fontSize: 13, fontWeight: 500 }}>{m.name}</div>
+              <div style={{ color: c.textDim, fontSize: 10 }}>{m.tier}</div>
+            </div>
+            {isActive && <span style={{ color: c.accent, fontSize: 12 }}>●</span>}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/layout/SessionManager.tsx

@@ -0,0 +1,115 @@
+import { useThemeStore } from '../../themes';
+import { useSessionStore } from '../../store/session-store';
+import { useStatuslineStore } from '../../store/statusline-store';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onResume: (sessionId: string) => void;
+}
+
+export function SessionManager({ isOpen, onClose, onResume }: Props) {
+  const theme = useThemeStore((s) => s.activeTheme);
+  const sessionId = useSessionStore((s) => s.sessionId);
+  const model = useStatuslineStore((s) => s.model);
+  const cost = useStatuslineStore((s) => s.costFormatted);
+  const turns = useStatuslineStore((s) => s.numTurns);
+  const duration = useStatuslineStore((s) => s.durationFormatted);
+  const c = theme.colors;
+
+  if (!isOpen) return null;
+
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, zIndex: 1000,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)',
+    }} onClick={onClose}>
+      <div style={{
+        background: c.bgSurface, border: `1px solid ${c.border}`,
+        borderRadius: 12, padding: 24, width: 420,
+        display: 'flex', flexDirection: 'column', gap: 16,
+      }} onClick={(e) => e.stopPropagation()}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <h2 style={{ color: c.text, fontSize: 16, fontWeight: 700, margin: 0 }}>
+            Session Info
+          </h2>
+          <button onClick={onClose} style={{
+            background: 'none', border: 'none', color: c.textMuted,
+            fontSize: 20, cursor: 'pointer',
+          }}>×</button>
+        </div>
+
+        {sessionId ? (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <InfoRow label="Session ID" value={sessionId} color={c.accent} mono />
+            <InfoRow label="Model" value={model} color={c.model} />
+            <InfoRow label="Cost" value={cost} color={c.cost} />
+            <InfoRow label="Turns" value={String(turns)} color={c.text} />
+            <InfoRow label="Duration" value={duration} color={c.textMuted} />
+
+            <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
+              <button onClick={() => {
+                navigator.clipboard.writeText(sessionId);
+              }} style={{
+                flex: 1, background: c.bgPanel, color: c.text,
+                border: `1px solid ${c.border}`, borderRadius: 6,
+                padding: '8px 12px', fontSize: 12, cursor: 'pointer',
+              }}>
+                Copy Session ID
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div style={{ color: c.textMuted, fontSize: 13, textAlign: 'center', padding: 16 }}>
+            No active session. Send a message to start one.
+          </div>
+        )}
+
+        {/* Resume section */}
+        <div style={{ borderTop: `1px solid ${c.border}`, paddingTop: 16 }}>
+          <div style={{ fontSize: 10, color: c.textDim, fontWeight: 600, marginBottom: 8 }}>
+            RESUME SESSION
+          </div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <input
+              type="text"
+              placeholder="Paste session ID..."
+              style={{
+                flex: 1, background: c.bgPanel, color: c.text,
+                border: `1px solid ${c.border}`, borderRadius: 6,
+                padding: '8px 12px', fontSize: 12, outline: 'none',
+                fontFamily: 'var(--font-mono)',
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  const val = (e.target as HTMLInputElement).value.trim();
+                  if (val) { onResume(val); onClose(); }
+                }
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function InfoRow({ label, value, color, mono }: {
+  label: string; value: string; color: string; mono?: boolean;
+}) {
+  const theme = useThemeStore((s) => s.activeTheme);
+  return (
+    <div style={{
+      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+      padding: '6px 10px', background: theme.colors.bgPanel, borderRadius: 4,
+    }}>
+      <span style={{ color: theme.colors.textMuted, fontSize: 12 }}>{label}</span>
+      <span style={{
+        color, fontSize: 12, fontWeight: 500,
+        fontFamily: mono ? 'var(--font-mono)' : 'inherit',
+        maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis',
+      }}>{value}</span>
+    </div>
+  );
+}