upfynai-code 0.1.0 → 2.2.0

package/src/components/chat/MessageList.tsx

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

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

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

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

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

package/src/components/statusline/StatuslineBar.tsx

@@ -1,114 +0,0 @@
-import { useStatuslineStore, fmtTok } from '../../store/statusline-store';
-import { useThemeStore } from '../../themes';
-
-// StatuslineBar is a CORE non-removable component of UC UpfynAI-Code.
-// It MUST always be rendered in App.tsx — do not add a close/dismiss/toggle button.
-// Proprietary software by Thinqmesh Technologies, Developed by Anit Chaudhary.
-
-export function StatuslineBar() {
-  const theme = useThemeStore((s) => s.activeTheme);
-  const sl = useStatuslineStore();
-  const c = theme.colors;
-
-  const ctxColor = sl.contextPct > 90 ? c.ctxCrit
-    : sl.contextPct > 75 ? c.ctxHigh
-    : sl.contextPct > 40 ? c.ctxMed
-    : c.ctxLow;
-
-  const barWidth = 200;
-  const filled = Math.round((sl.contextPct / 100) * barWidth);
-
-  return (
-    <div style={{
-      display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 0,
-      padding: '6px 16px', borderTop: `1px solid ${c.border}`,
-      background: c.bgSurface, fontFamily: 'var(--font-mono)',
-      fontSize: 11, flexShrink: 0, lineHeight: 1.6,
-    }}>
-      {/* Row 1: Skill | GitHub */}
-      <div style={{ width: '100%', display: 'flex', gap: 4 }}>
-        <Field label="Skill" value={sl.skill} color={c.skill} width="45%" />
-        <Sep color={c.separator} />
-        <Field label="GitHub" value={sl.github} color={c.github} width="50%"
-          suffix={
-            <>
-              {sl.gitDirty.staged && <span style={{ color: c.gitStaged }}>+</span>}
-              {sl.gitDirty.unstaged && <span style={{ color: c.gitUnstaged }}>~</span>}
-            </>
-          }
-        />
-      </div>
-
-      {/* Row 2: Model | Dir */}
-      <div style={{ width: '100%', display: 'flex', gap: 4 }}>
-        <Field label="Model" value={sl.model} color={c.model} width="45%" bold />
-        <Sep color={c.separator} />
-        <Field label="Dir" value={sl.dirShort} color={c.dir} width="50%" />
-      </div>
-
-      {/* Row 3: Tokens | Cost */}
-      <div style={{ width: '100%', display: 'flex', gap: 4 }}>
-        <Field label="Tokens" value={`${fmtTok(sl.tokensWinIn)} + ${fmtTok(sl.tokensWinOut)}`} color={c.tokens} width="45%" />
-        <Sep color={c.separator} />
-        <Field label="Cost" value={sl.costFormatted} color={c.cost} width="50%" />
-      </div>
-
-      {/* Row 4: Context bar */}
-      <div style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
-        <span style={{ color: ctxColor, minWidth: 55 }}>Context:</span>
-        <div style={{
-          flex: 1, maxWidth: barWidth, height: 8, borderRadius: 4,
-          background: c.barEmpty, overflow: 'hidden',
-        }}>
-          <div style={{
-            width: `${sl.contextPct}%`, height: '100%', borderRadius: 4,
-            background: ctxColor, transition: 'width 0.3s ease',
-          }} />
-        </div>
-        <span style={{ color: ctxColor, minWidth: 32 }}>{sl.contextPct}%</span>
-        {sl.compactionWarning && (
-          <span style={{
-            color: sl.isCompacting ? c.ctxCrit : c.ctxHigh,
-            fontWeight: sl.isCompacting ? 700 : 400, fontSize: 10,
-          }}>
-            {sl.compactionWarning}
-          </span>
-        )}
-      </div>
-
-      {/* Proprietary branding — non-removable */}
-      <div style={{
-        width: '100%', display: 'flex', justifyContent: 'space-between',
-        alignItems: 'center', marginTop: 2, paddingTop: 2,
-        borderTop: `1px solid ${c.border}`,
-      }}>
-        <span style={{ color: c.textDim, fontSize: 9, letterSpacing: 0.3 }}>
-          Thinqmesh Technologies
-        </span>
-        <span style={{ color: c.textDim, fontSize: 9, letterSpacing: 0.3 }}>
-          Developed by Anit Chaudhary
-        </span>
-      </div>
-    </div>
-  );
-}
-
-function Field({ label, value, color, width, bold, suffix }: {
-  label: string; value: string; color: string; width: string;
-  bold?: boolean; suffix?: React.ReactNode;
-}) {
-  const theme = useThemeStore((s) => s.activeTheme);
-  return (
-    <div style={{ width, display: 'flex', gap: 4, overflow: 'hidden' }}>
-      <span style={{ color: theme.colors.label }}>{label}:</span>
-      <span style={{ color, fontWeight: bold ? 700 : 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-        {value}
-      </span>
-      {suffix}
-    </div>
-  );
-}
-
-function Sep({ color }: { color: string }) {
-  return <span style={{ color, margin: '0 4px' }}>│</span>;
-}

package/src/main.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { App } from './App';
-import './styles/global.css';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);