claude-ws 0.1.0 → 0.1.1

package/src/app/api/git/generate-message/route.ts

@@ -0,0 +1,293 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import path from 'path';
+import fs from 'fs';
+import { query } from '@anthropic-ai/claude-agent-sdk';
+
+const execFileAsync = promisify(execFile);
+
+// Timeout for git commands (5 seconds)
+const GIT_TIMEOUT = 5000;
+
+// POST /api/git/generate-message
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { projectPath } = body;
+
+    if (!projectPath) {
+      return NextResponse.json(
+        { error: 'projectPath is required' },
+        { status: 400 }
+      );
+    }
+
+    // Validate project path exists and is a directory
+    const resolvedPath = path.resolve(projectPath);
+    if (!fs.existsSync(resolvedPath) || !fs.statSync(resolvedPath).isDirectory()) {
+      return NextResponse.json(
+        { error: 'Invalid project path' },
+        { status: 400 }
+      );
+    }
+
+    // Check if it's a git repository by running git status
+    try {
+      await execFileAsync('git', ['status'], {
+        cwd: resolvedPath,
+        timeout: GIT_TIMEOUT,
+      });
+    } catch (error) {
+      return NextResponse.json(
+        { error: 'Not a git repository' },
+        { status: 400 }
+      );
+    }
+
+    // Get diff of all changes (both staged and unstaged)
+    let diffOutput: string;
+    try {
+      // First get staged changes
+      const { stdout: stagedDiff } = await execFileAsync('git', ['diff', '--cached'], {
+        cwd: resolvedPath,
+        maxBuffer: 10 * 1024 * 1024, // 10MB buffer for large diffs
+        timeout: GIT_TIMEOUT,
+      });
+
+      // Then get unstaged changes
+      const { stdout: unstagedDiff } = await execFileAsync('git', ['diff'], {
+        cwd: resolvedPath,
+        maxBuffer: 10 * 1024 * 1024,
+        timeout: GIT_TIMEOUT,
+      });
+
+      // Combine both diffs
+      diffOutput = stagedDiff + unstagedDiff;
+    } catch (error) {
+      const err = error as { code?: string; message?: string };
+      if (err.code === 'ETIMEDOUT') {
+        return NextResponse.json(
+          { error: 'Git command timed out' },
+          { status: 504 }
+        );
+      }
+      console.error('Error getting git diff:', error);
+      return NextResponse.json(
+        { error: 'Failed to get git diff' },
+        { status: 500 }
+      );
+    }
+
+    // Check if there are any changes
+    if (!diffOutput || diffOutput.trim().length === 0) {
+      return NextResponse.json(
+        { error: 'No changes to generate commit message for' },
+        { status: 400 }
+      );
+    }
+
+    // Count additions and deletions
+    const { additions, deletions } = countDiffStats(diffOutput);
+
+    // Build prompt for Claude
+    const prompt = buildCommitMessagePrompt(diffOutput);
+
+    // Call Claude SDK to generate commit message
+    try {
+      const response = query({
+        prompt,
+        options: {
+          cwd: resolvedPath,
+          model: 'sonnet',
+          permissionMode: 'bypassPermissions' as const,
+        },
+      });
+
+      let buffer = '';
+      for await (const message of response) {
+        // Handle streaming events
+        if (message.type === 'stream_event') {
+          const streamMsg = message as {
+            type: 'stream_event';
+            event: { type: string; delta?: { type: string; text?: string } }
+          };
+          const event = streamMsg.event;
+          if (event?.type === 'content_block_delta' && event.delta?.type === 'text_delta' && event.delta.text) {
+            buffer += event.delta.text;
+          }
+        }
+
+        // Handle assistant messages for non-streaming responses
+        if (message.type === 'assistant') {
+          const assistantMsg = message as {
+            type: 'assistant';
+            message?: { content: Array<{ type: string; text?: string }> }
+          };
+          const content = assistantMsg.message?.content || [];
+          for (const block of content) {
+            if (block.type === 'text' && block.text) {
+              if (!buffer.includes(block.text)) {
+                buffer = block.text;
+              }
+            }
+          }
+        }
+      }
+
+      const { title, description } = extractCommitMessage(buffer);
+
+      // Validate non-empty title
+      if (!title || title.trim().length === 0) {
+        console.error('Claude SDK returned empty title. Buffer:', buffer);
+        return NextResponse.json(
+          { error: 'Generated message was empty. Try staging different files.' },
+          { status: 500 }
+        );
+      }
+
+      return NextResponse.json({
+        title,
+        description,
+        // Keep 'message' for backwards compatibility (title only)
+        message: title,
+        diff: {
+          additions,
+          deletions,
+        },
+      });
+    } catch (error) {
+      console.error('Error calling Claude SDK:', error);
+
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      const isRateLimitError = errorMessage.toLowerCase().includes('rate limit');
+      const isAuthError = errorMessage.toLowerCase().includes('api key') ||
+                          errorMessage.toLowerCase().includes('unauthorized');
+
+      return NextResponse.json(
+        {
+          error: isRateLimitError ? 'Rate limit exceeded. Try again later.' :
+                 isAuthError ? 'API authentication failed. Check server configuration.' :
+                 'Failed to generate commit message',
+        },
+        { status: isRateLimitError ? 429 : isAuthError ? 401 : 500 }
+      );
+    }
+  } catch (error: unknown) {
+    console.error('Error generating commit message:', error);
+    return NextResponse.json(
+      { error: 'Failed to generate commit message' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * Build prompt for Claude to generate commit message with title and description
+ */
+function buildCommitMessagePrompt(diff: string): string {
+  return `Generate a git commit message with title and description.
+
+TITLE RULES:
+- Format: type(scope): description
+- Types: feat, fix, docs, style, refactor, test, chore
+- Max 72 characters
+- Be specific about what changed
+
+DESCRIPTION RULES:
+- Use bullet points with "-" prefix
+- List files/components changed and their modifications
+- Focus on WHAT changed and its IMPACT
+- Be concise and technical
+- NO introductory sentences like "This commit introduces..."
+- NO concluding sentences like "These changes improve..."
+- Just the facts: file changes, features added/modified, breaking changes
+
+EXAMPLE OUTPUT:
+TITLE: feat(auth): add JWT token refresh mechanism
+DESCRIPTION:
+- auth-service.ts: add refreshToken() method with 7-day expiry
+- auth-middleware.ts: check token expiry before each request
+- user-store.ts: persist refresh token in localStorage
+- Breaking: removed deprecated session-based auth
+
+OUTPUT FORMAT:
+TITLE: <commit title>
+DESCRIPTION:
+<bullet points>
+
+<git-diff>
+${diff}
+</git-diff>`;
+}
+
+/**
+ * Extract commit title and description from Claude's response
+ * Handles cases where Claude might add markdown fences or extra text
+ */
+function extractCommitMessage(response: string): { title: string; description: string } {
+  let message = response.trim();
+
+  // Remove markdown code fences if present
+  const fenceMatch = message.match(/^```[\w]*\n?([\s\S]*?)```$/);
+  if (fenceMatch) {
+    message = fenceMatch[1].trim();
+  }
+
+  // Parse TITLE: and DESCRIPTION: format
+  const titleMatch = message.match(/TITLE:\s*(.+?)(?:\n|$)/i);
+  const descriptionMatch = message.match(/DESCRIPTION:\s*([\s\S]*?)$/i);
+
+  let title = '';
+  let description = '';
+
+  if (titleMatch) {
+    title = titleMatch[1].trim();
+    // Remove quotes if wrapped
+    if (title.startsWith('"') && title.endsWith('"')) {
+      title = title.slice(1, -1);
+    }
+  } else {
+    // Fallback: use first line as title
+    title = message.split('\n')[0].trim();
+    if (title.startsWith('"') && title.endsWith('"')) {
+      title = title.slice(1, -1);
+    }
+  }
+
+  if (descriptionMatch) {
+    description = descriptionMatch[1].trim();
+    // Clean up description - remove TITLE part if included
+    description = description.replace(/^TITLE:.*?\n/i, '').trim();
+  }
+
+  return { title, description };
+}
+
+/**
+ * Count diff statistics (additions and deletions)
+ */
+function countDiffStats(diff: string): { additions: number; deletions: number } {
+  let additions = 0;
+  let deletions = 0;
+
+  const lines = diff.split('\n');
+  for (const line of lines) {
+    // Skip diff headers
+    if (line.startsWith('+++') || line.startsWith('---')) continue;
+    if (line.startsWith('@@')) continue;
+    if (line.startsWith('diff ')) continue;
+    if (line.startsWith('index ')) continue;
+
+    // Count additions (lines starting with +)
+    if (line.startsWith('+')) {
+      additions++;
+    }
+    // Count deletions (lines starting with -)
+    else if (line.startsWith('-')) {
+      deletions++;
+    }
+  }
+
+  return { additions, deletions };
+}

package/src/app/api/git/log/route.ts

@@ -15,14 +15,31 @@ export interface GitCommit {
   date: string;
   parents: string[];
   refs: string[];
+  isLocal?: boolean;
+  isMerge?: boolean;
 }
 
-// GET /api/git/log?path=/project/path&limit=50
+async function getRemoteCommitHashes(cwd: string): Promise<Set<string>> {
+  try {
+    const { stdout } = await execFileAsync(
+      'git',
+      ['log', '--remotes', '--format=%H'],
+      { cwd, timeout: GIT_TIMEOUT }
+    );
+    return new Set(stdout.trim().split('\n').filter(Boolean));
+  } catch (error) {
+    console.error('Failed to get remote commits:', error);
+    return new Set();
+  }
+}
+
+// GET /api/git/log?path=/project/path&limit=50&filter=current
 export async function GET(request: NextRequest) {
   try {
     const searchParams = request.nextUrl.searchParams;
     const projectPath = searchParams.get('path');
     const limit = parseInt(searchParams.get('limit') || '50', 10);
+    const filter = searchParams.get('filter') || 'current'; // 'current' or 'all'
 
     if (!projectPath) {
       return NextResponse.json(
@@ -39,16 +56,26 @@ export async function GET(request: NextRequest) {
       );
     }
 
+    // Build git log args based on filter
+    const logArgs = ['log'];
+
+    if (filter === 'all') {
+      logArgs.push('--all');
+    } else {
+      // Default: current branch only (HEAD)
+      logArgs.push('HEAD');
+    }
+
+    logArgs.push(
+      `--max-count=${limit}`,
+      '--format=%H|%h|%s|%an|%ar|%P|%D'
+    );
+
     // Get git log with graph info
     // Format: hash|short_hash|subject|author|date|parents|refs
     const { stdout } = await execFileAsync(
       'git',
-      [
-        'log',
-        '--all',
-        `--max-count=${limit}`,
-        '--format=%H|%h|%s|%an|%ar|%P|%D',
-      ],
+      logArgs,
       {
         cwd: resolvedPath,
         timeout: GIT_TIMEOUT,
@@ -58,18 +85,25 @@ export async function GET(request: NextRequest) {
     const commits: GitCommit[] = [];
     const lines = stdout.trim().split('\n');
 
+    // Get remote commit hashes for local detection
+    const remoteHashes = await getRemoteCommitHashes(resolvedPath);
+
     for (const line of lines) {
       if (!line) continue;
       const [hash, shortHash, message, author, date, parents, refs] = line.split('|');
 
+      const parentsList = parents ? parents.split(' ').filter(Boolean) : [];
+
       commits.push({
         hash,
         shortHash,
         message,
         author,
         date,
-        parents: parents ? parents.split(' ').filter(Boolean) : [],
+        parents: parentsList,
         refs: refs ? refs.split(', ').filter(Boolean) : [],
+        isLocal: !remoteHashes.has(hash),
+        isMerge: parentsList.length > 1,
       });
     }
 

package/src/app/api/git/show/route.ts

@@ -0,0 +1,115 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import path from 'path';
+import fs from 'fs';
+import type { CommitDetails, CommitFile } from '@/types';
+
+const execFileAsync = promisify(execFile);
+const GIT_TIMEOUT = 10000;
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const projectPath = searchParams.get('path');
+  const hash = searchParams.get('hash');
+
+  if (!projectPath || !hash) {
+    return NextResponse.json(
+      { error: 'path and hash parameters are required' },
+      { status: 400 }
+    );
+  }
+
+  if (!/^[a-f0-9]{7,40}$/.test(hash)) {
+    return NextResponse.json(
+      { error: 'Invalid commit hash format' },
+      { status: 400 }
+    );
+  }
+
+  const resolvedPath = path.resolve(projectPath);
+  if (!fs.existsSync(resolvedPath) || !fs.statSync(resolvedPath).isDirectory()) {
+    return NextResponse.json(
+      { error: 'Invalid project path' },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const { stdout: showOutput } = await execFileAsync(
+      'git',
+      ['show', '-s', '--format=%H|%h|%an|%ae|%aI|%ar|%s|%b', hash],
+      { cwd: resolvedPath, timeout: GIT_TIMEOUT }
+    );
+
+    const parts = showOutput.trim().split('|');
+    const [fullHash, shortHash, author, authorEmail, date, dateRelative, subject] = parts.slice(0, 7);
+    const body = parts.slice(7).join('|').trim();
+
+    const { stdout: statsOutput } = await execFileAsync(
+      'git',
+      ['diff-tree', '--no-commit-id', '--numstat', '-r', hash],
+      { cwd: resolvedPath, timeout: GIT_TIMEOUT }
+    );
+
+    const { stdout: statusOutput } = await execFileAsync(
+      'git',
+      ['diff-tree', '--no-commit-id', '--name-status', '-r', hash],
+      { cwd: resolvedPath, timeout: GIT_TIMEOUT }
+    );
+
+    const statusMap = new Map<string, string>();
+    for (const line of statusOutput.trim().split('\n')) {
+      const match = line.match(/^([AMDRC])\s+(.+)$/);
+      if (match) statusMap.set(match[2], match[1]);
+    }
+
+    const files: CommitFile[] = [];
+    let totalAdditions = 0;
+    let totalDeletions = 0;
+
+    for (const line of statsOutput.trim().split('\n')) {
+      const [addStr, delStr, filePath] = line.split('\t');
+      if (!filePath) continue;
+
+      const additions = addStr === '-' ? 0 : parseInt(addStr, 10) || 0;
+      const deletions = delStr === '-' ? 0 : parseInt(delStr, 10) || 0;
+
+      files.push({
+        path: filePath,
+        status: (statusMap.get(filePath) || 'M') as CommitFile['status'],
+        additions,
+        deletions,
+      });
+
+      totalAdditions += additions;
+      totalDeletions += deletions;
+    }
+
+    const commitDetails: CommitDetails = {
+      hash: fullHash,
+      shortHash,
+      author,
+      authorEmail,
+      date,
+      dateRelative,
+      subject,
+      body,
+      files,
+      stats: {
+        filesChanged: files.length,
+        additions: totalAdditions,
+        deletions: totalDeletions,
+      },
+    };
+
+    return NextResponse.json(commitDetails);
+  } catch (error: unknown) {
+    console.error('Error getting commit details:', error);
+    const err = error as { message?: string };
+    return NextResponse.json(
+      { error: err.message || 'Failed to get commit details' },
+      { status: 500 }
+    );
+  }
+}

package/src/app/api/tasks/[id]/stats/route.ts

@@ -0,0 +1,84 @@
+import { db, schema } from '@/lib/db';
+import { eq, desc } from 'drizzle-orm';
+import { NextResponse } from 'next/server';
+import { calculateContextHealth } from '@/lib/context-health';
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id: taskId } = await params;
+
+    // Get all attempts for this task
+    const attempts = await db.query.attempts.findMany({
+      where: eq(schema.attempts.taskId, taskId),
+      orderBy: [desc(schema.attempts.createdAt)],
+    });
+
+    // Aggregate stats from all attempts
+    let totalTokens = 0;
+    let totalCostUSD = 0;
+    let totalTurns = 0;
+    let totalDurationMs = 0;
+    let totalAdditions = 0;
+    let totalDeletions = 0;
+    let filesChanged = 0;
+
+    // Context usage: Use LATEST attempt only (most recent)
+    // Each attempt is a separate session - context doesn't accumulate across attempts
+    const latestAttempt = attempts[0]; // Already ordered by createdAt DESC
+    const contextUsed = latestAttempt?.contextUsed || 0;
+    const contextLimit = latestAttempt?.contextLimit || 200000;
+    const contextPercentage = latestAttempt?.contextPercentage || 0;
+
+    // Calculate context health metrics (ClaudeKit formulas)
+    // Note: We approximate input/output split since DB only stores total contextUsed
+    // For stats API, we use contextUsed as total and calculate health accordingly
+    const contextHealth = calculateContextHealth(
+      contextUsed, // Using total as input approximation
+      0,           // Output already included in contextUsed from usage-tracker
+      contextLimit
+    );
+
+    for (const attempt of attempts) {
+      totalTokens += attempt.totalTokens || 0;
+      totalCostUSD += parseFloat(attempt.totalCostUSD || '0');
+      totalTurns += attempt.numTurns || 0;
+      totalDurationMs += attempt.durationMs || 0;
+      totalAdditions += attempt.diffAdditions || 0;
+      totalDeletions += attempt.diffDeletions || 0;
+      if ((attempt.diffAdditions || 0) > 0 || (attempt.diffDeletions || 0) > 0) {
+        filesChanged++;
+      }
+    }
+
+    return NextResponse.json({
+      totalTokens,
+      totalCostUSD,
+      totalTurns,
+      totalDurationMs,
+      totalAdditions,
+      totalDeletions,
+      filesChanged,
+      contextUsed,
+      contextLimit,
+      contextPercentage,
+      contextHealth: {
+        status: contextHealth.status,
+        score: contextHealth.score,
+        utilizationPercent: contextHealth.utilizationPercent,
+        shouldCompact: contextHealth.shouldCompact,
+        compactThreshold: contextHealth.compactThreshold,
+      },
+      attemptCount: attempts.length,
+      lastUpdatedAt: attempts[0]?.completedAt || Date.now(),
+    });
+  } catch (error) {
+    console.error('Error getting task stats:', error);
+    return NextResponse.json(
+      { error: 'Failed to get task stats' },
+      { status: 500 }
+    );
+  }
+}

package/src/app/globals.css

@@ -265,9 +265,9 @@
   --muted: oklch(0.315 0.028 275);
   --muted-foreground: oklch(0.512 0.067 260);
 
-  /* Accent: Pink #FF79C6 */
-  --accent: oklch(0.718 0.195 350);
-  --accent-foreground: oklch(0.224 0.023 277);
+  /* Accent: Light grey for hover states */
+  --accent: oklch(0.38 0.015 275);
+  --accent-foreground: oklch(0.975 0.005 110);
 
   /* Destructive: Red #FF5555 */
   --destructive: oklch(0.658 0.254 22);
@@ -294,7 +294,7 @@
   --sidebar-foreground: oklch(0.975 0.005 110);
   --sidebar-primary: oklch(0.720 0.160 295);
   --sidebar-primary-foreground: oklch(0.975 0.005 110);
-  --sidebar-accent: oklch(0.315 0.028 275);
+  --sidebar-accent: oklch(0.38 0.015 275);
   --sidebar-accent-foreground: oklch(0.975 0.005 110);
   --sidebar-border: oklch(0.38 0.03 275);
   --sidebar-ring: oklch(0.720 0.160 295);
@@ -310,6 +310,59 @@
   }
 }
 
+/* Custom scrollbar styling - minimal and modern */
+.custom-scrollbar,
+.custom-scrollbar * {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0.4 0 0 / 0.5) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar,
+.custom-scrollbar *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track,
+.custom-scrollbar *::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb,
+.custom-scrollbar *::-webkit-scrollbar-thumb {
+  background-color: oklch(0.4 0 0 / 0.5);
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover,
+.custom-scrollbar *::-webkit-scrollbar-thumb:hover {
+  background-color: oklch(0.5 0 0 / 0.7);
+}
+
+/* Light theme scrollbar */
+:root .custom-scrollbar,
+:root .custom-scrollbar * {
+  scrollbar-color: oklch(0.7 0 0 / 0.4) transparent;
+}
+
+:root .custom-scrollbar::-webkit-scrollbar-thumb,
+:root .custom-scrollbar *::-webkit-scrollbar-thumb {
+  background-color: oklch(0.7 0 0 / 0.4);
+}
+
+:root .custom-scrollbar::-webkit-scrollbar-thumb:hover,
+:root .custom-scrollbar *::-webkit-scrollbar-thumb:hover {
+  background-color: oklch(0.6 0 0 / 0.6);
+}
+
+/* Scrollbar corner */
+.custom-scrollbar::-webkit-scrollbar-corner,
+.custom-scrollbar *::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 /* Spinning border animation for running tasks */
 @keyframes spin-border {
   0% {