upfynai-code 0.1.0

package/src/components/statusline/StatuslineBar.tsx

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

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

package/src/server/claude-session.ts

@@ -0,0 +1,156 @@
+import { spawn, type ChildProcess } from 'node:child_process';
+import { createInterface } from 'node:readline';
+import type { SDKMessage } from '../types/sdk-messages.js';
+
+interface SessionOptions {
+  cwd: string;
+  model?: string;
+  permissionMode?: string;
+  onMessage: (msg: SDKMessage) => void;
+}
+
+interface PendingPermission {
+  resolve: (approved: boolean) => void;
+}
+
+export class ClaudeSession {
+  private process: ChildProcess | null = null;
+  private options: SessionOptions;
+  private pendingPermissions = new Map<string, PendingPermission>();
+  private sessionId: string | null = null;
+  private isRunning = false;
+
+  constructor(options: SessionOptions) {
+    this.options = options;
+  }
+
+  async sendPrompt(prompt: string, resumeSessionId?: string): Promise<void> {
+    if (this.isRunning) {
+      // If already running with stream-json input, send as user message
+      if (this.process?.stdin?.writable) {
+        const msg = JSON.stringify({
+          type: 'user',
+          message: { role: 'user', content: prompt },
+        });
+        this.process.stdin.write(msg + '\n');
+        return;
+      }
+      throw new Error('Session is busy');
+    }
+
+    this.isRunning = true;
+
+    const args = [
+      '--print',
+      '--verbose',
+      '--output-format', 'stream-json',
+      '--input-format', 'stream-json',
+    ];
+
+    if (this.options.model) {
+      args.push('--model', this.options.model);
+    }
+
+    if (this.options.permissionMode && this.options.permissionMode !== 'default') {
+      args.push('--permission-mode', this.options.permissionMode);
+    }
+
+    if (resumeSessionId) {
+      args.push('--resume', resumeSessionId);
+    }
+
+    this.process = spawn('claude', args, {
+      stdio: ['pipe', 'pipe', 'pipe'],
+      cwd: this.options.cwd,
+      shell: true,
+    });
+
+    // Send the initial prompt
+    if (this.process.stdin) {
+      const msg = JSON.stringify({
+        type: 'user',
+        message: { role: 'user', content: prompt },
+      });
+      this.process.stdin.write(msg + '\n');
+    }
+
+    // Read NDJSON from stdout
+    if (this.process.stdout) {
+      const rl = createInterface({ input: this.process.stdout });
+      rl.on('line', (line: string) => {
+        if (!line.trim()) return;
+        try {
+          const event = JSON.parse(line) as SDKMessage;
+
+          // Track session ID
+          if (event.type === 'system' && 'subtype' in event && event.subtype === 'init') {
+            this.sessionId = event.session_id;
+          }
+
+          // Handle result — mark as not running
+          if (event.type === 'result') {
+            this.isRunning = false;
+          }
+
+          this.options.onMessage(event);
+        } catch {
+          // Non-JSON line (debug output)
+        }
+      });
+    }
+
+    // Log stderr
+    if (this.process.stderr) {
+      const rl = createInterface({ input: this.process.stderr });
+      rl.on('line', (line: string) => {
+        if (line.trim()) {
+          console.error(`  [claude stderr] ${line}`);
+        }
+      });
+    }
+
+    this.process.on('exit', (code) => {
+      this.isRunning = false;
+      this.process = null;
+    });
+
+    this.process.on('error', (err) => {
+      this.isRunning = false;
+      console.error('  Claude process error:', err.message);
+    });
+  }
+
+  resolvePermission(requestId: string, approved: boolean): void {
+    const pending = this.pendingPermissions.get(requestId);
+    if (pending) {
+      pending.resolve(approved);
+      this.pendingPermissions.delete(requestId);
+    }
+
+    // Also send permission response through stdin if process is running
+    if (this.process?.stdin?.writable) {
+      const response = JSON.stringify({
+        type: 'permission_response',
+        tool_use_id: requestId,
+        allowed: approved,
+      });
+      this.process.stdin.write(response + '\n');
+    }
+  }
+
+  getSessionId(): string | null {
+    return this.sessionId;
+  }
+
+  isActive(): boolean {
+    return this.isRunning;
+  }
+
+  kill(): void {
+    if (this.process) {
+      this.process.kill('SIGTERM');
+      this.process = null;
+      this.isRunning = false;
+    }
+  }
+}

package/src/server/index.ts

@@ -0,0 +1,149 @@
+import { Hono } from 'hono';
+import { serve } from '@hono/node-server';
+import { streamSSE } from 'hono/streaming';
+import { cors } from 'hono/cors';
+import { ClaudeSession } from './claude-session.js';
+import type { SDKMessage } from '../types/sdk-messages.js';
+
+const app = new Hono();
+app.use('*', cors());
+
+let session: ClaudeSession | null = null;
+const sseClients: Set<(msg: SDKMessage) => void> = new Set();
+
+const PROJECT_CWD = process.env.UPFYN_CWD || process.cwd();
+
+// Broadcast to all SSE clients
+function broadcast(msg: SDKMessage) {
+  for (const send of sseClients) {
+    send(msg);
+  }
+}
+
+// SSE stream endpoint
+app.get('/api/stream', (c) => {
+  return streamSSE(c, async (stream) => {
+    const send = (msg: SDKMessage) => {
+      stream.writeSSE({ data: JSON.stringify(msg), event: 'message' });
+    };
+    sseClients.add(send);
+
+    // Keep alive
+    const keepAlive = setInterval(() => {
+      stream.writeSSE({ data: '', event: 'ping' });
+    }, 15000);
+
+    stream.onAbort(() => {
+      sseClients.delete(send);
+      clearInterval(keepAlive);
+    });
+
+    // Block until aborted
+    await new Promise(() => {});
+  });
+});
+
+// Send a prompt
+app.post('/api/prompt', async (c) => {
+  const body = await c.req.json<{ prompt: string; sessionId?: string; cwd?: string }>();
+
+  if (!session) {
+    session = new ClaudeSession({
+      cwd: body.cwd || PROJECT_CWD,
+      onMessage: broadcast,
+    });
+  }
+
+  try {
+    await session.sendPrompt(body.prompt, body.sessionId);
+    return c.json({ ok: true });
+  } catch (err: any) {
+    return c.json({ ok: false, error: err.message }, 500);
+  }
+});
+
+// Respond to permission request
+app.post('/api/permission/respond', async (c) => {
+  const body = await c.req.json<{ requestId: string; approved: boolean }>();
+
+  if (session) {
+    session.resolvePermission(body.requestId, body.approved);
+  }
+
+  return c.json({ ok: true });
+});
+
+// Get session info
+app.get('/api/session', (c) => {
+  return c.json({
+    active: session !== null,
+    cwd: PROJECT_CWD,
+  });
+});
+
+// Git status endpoint (for statusline)
+app.get('/api/git-status', async (c) => {
+  const cwd = c.req.query('cwd') || PROJECT_CWD;
+  const { execSync } = await import('child_process');
+
+  try {
+    const branch = execSync('git symbolic-ref --short HEAD 2>/dev/null || git rev-parse --short HEAD', { cwd, encoding: 'utf-8' }).trim();
+    let remoteUrl = '';
+    try { remoteUrl = execSync('git remote get-url origin', { cwd, encoding: 'utf-8' }).trim(); } catch {}
+
+    let ghUser = '', ghRepo = '';
+    const ghMatch = remoteUrl.match(/github\.com[:/]([^/]+)\/([^/.]+)/);
+    if (ghMatch) { ghUser = ghMatch[1]; ghRepo = ghMatch[2]; }
+
+    let staged = false, unstaged = false;
+    try { execSync('git diff --cached --quiet', { cwd }); } catch { staged = true; }
+    try { execSync('git diff --quiet', { cwd }); } catch { unstaged = true; }
+
+    return c.json({ branch, ghUser, ghRepo, staged, unstaged });
+  } catch {
+    return c.json({ branch: 'no-git', ghUser: '', ghRepo: '', staged: false, unstaged: false });
+  }
+});
+
+// Discover Claude Code projects from ~/.claude/projects/
+app.get('/api/projects', async (c) => {
+  const { readdirSync, statSync } = await import('fs');
+  const { join } = await import('path');
+  const home = process.env.HOME || process.env.USERPROFILE || '';
+  const projectsDir = join(home, '.claude', 'projects');
+
+  try {
+    const entries = readdirSync(projectsDir);
+    const projects = entries
+      .map((name) => {
+        const fullPath = join(projectsDir, name);
+        try {
+          const stat = statSync(fullPath);
+          if (!stat.isDirectory()) return null;
+          // Decode the project hash back to a path
+          let decoded = name
+            .replace(/^([A-Z])--/, '$1:/')
+            .replace(/-/g, '/');
+          return {
+            path: decoded,
+            name: decoded.split('/').pop() || name,
+            lastUsed: stat.mtimeMs,
+          };
+        } catch { return null; }
+      })
+      .filter(Boolean)
+      .sort((a: any, b: any) => b.lastUsed - a.lastUsed)
+      .slice(0, 20);
+
+    return c.json({ projects });
+  } catch {
+    return c.json({ projects: [] });
+  }
+});
+
+// Health check
+app.get('/api/health', (c) => c.json({ status: 'ok', version: '0.1.0' }));
+
+const port = parseInt(process.env.UPFYN_PORT || '3210');
+console.log(`  \x1b[38;2;34;197;94m✓\x1b[0m API server running on http://localhost:${port}`);
+serve({ fetch: app.fetch, port });