jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/MessageBlock.tsx

@@ -0,0 +1,468 @@
+import { useState, memo } from 'react';
+import { lazy, Suspense } from 'react';
+import type { ClaudeMessage, StreamStatus } from '../lib/session-stream-manager';
+import { Button } from '@/components/ui/Button';
+import { claudeCode } from '@/lib/tauri-bridge';
+
+const LazyMarkdown = lazy(() => import('./LazyMarkdown'));
+
+// Tool name → human-friendly verb mapping for activity indicator
+export const TOOL_VERBS: Record<string, string> = {
+  Read: 'Reading',
+  Grep: 'Searching for',
+  Glob: 'Finding files matching',
+  Bash: 'Running',
+  Edit: 'Editing',
+  Write: 'Writing',
+  Task: 'Delegating',
+  WebFetch: 'Fetching',
+  WebSearch: 'Searching web for',
+};
+
+function extractFilename(path: string): string {
+  return path.split('/').pop() || path;
+}
+
+export function humanizeToolCall(toolName: string, param: string): string {
+  const verb = TOOL_VERBS[toolName] || toolName;
+  if (['Read', 'Edit', 'Write'].includes(toolName)) {
+    return `${verb} ${extractFilename(param)}...`;
+  }
+  if (toolName === 'Bash') {
+    const short = param.length > 40 ? param.slice(0, 40) : param;
+    return `${verb} ${short}...`;
+  }
+  if (['Grep', 'Glob', 'WebSearch'].includes(toolName)) {
+    const short = param.length > 30 ? param.slice(0, 30) : param;
+    return `${verb} ${short}...`;
+  }
+  return `${verb} ${param}...`;
+}
+
+// Unescape content that may have literal \n, \t, \r from JSON stringification
+export function unescapeContent(content: string | undefined): string {
+  if (!content) return '';
+  return content
+    .replace(/\\n/g, '\n')
+    .replace(/\\t/g, '\t')
+    .replace(/\\r/g, '\r')
+    .replace(/\\"/g, '"');
+}
+
+// Detect if error message is about Claude CLI needing an update
+function isVersionUpdateError(content: string | undefined): boolean {
+  if (!content) return false;
+  return content.includes('needs an update') ||
+         content.includes('version') && content.includes('required');
+}
+
+// Collapse repeated phrases in tool output (e.g. repeated warnings, stack traces)
+// Finds substantial phrases (50+ chars) appearing 3+ times and shows each once with a count
+function deduplicateToolOutput(text: string): string {
+  // Split on sentence/line boundaries to extract candidate phrases
+  const phrases = text.split(/(?<=[\.\n])\s*/);
+  const counts = new Map<string, number>();
+
+  for (const phrase of phrases) {
+    const key = phrase.trim();
+    if (key.length >= 50) {
+      counts.set(key, (counts.get(key) || 0) + 1);
+    }
+  }
+
+  // Get repeated phrases, longest first to avoid partial match issues
+  const repeated = [...counts.entries()]
+    .filter(([, c]) => c >= 3)
+    .sort((a, b) => b[0].length - a[0].length);
+
+  if (repeated.length === 0) return text;
+
+  let result = text;
+  for (const [phrase, count] of repeated) {
+    const escaped = phrase.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    let idx = 0;
+    result = result.replace(new RegExp(escaped, 'g'), () => {
+      idx++;
+      return idx === 1 ? `${phrase} [×${count}]` : '';
+    });
+  }
+
+  // Clean up artifacts from removal
+  result = result.replace(/\n{3,}/g, '\n');
+  result = result.replace(/ {2,}/g, ' ');
+
+  return result;
+}
+
+// Noise patterns - truly internal/system content that users shouldn't see
+const NOISE_PATTERNS = [
+    // Skill headers and metadata (internal prompt injections)
+    'Base directory for this skill:',
+    '# Request Routing Skill',
+    '# Simple Improvement Skill',
+    '# Bug Planning Skill',
+    '# Chore Planning Skill',
+    '# Feature Planning Skill',
+    '# Epic Planning Skill',
+    '# Bug Mode Skill',
+    '# Chore Mode Skill',
+    '# Speed Mode Skill',
+    '# Stable Mode Skill',
+    '# Production Mode Skill',
+    'FORBIDDEN during this skill',
+    'ALLOWED during this skill',
+    'ARGUMENTS:',
+    // System/context tags
+    '<system-reminder>',
+    '</system-reminder>',
+    '<claude_context',
+    '</claude_context>',
+    '<jettypod_essentials>',
+    '<communication_style>',
+    // File content dumps (usually from Read tool)
+    'Contents of /',
+    'File: /',
+    // Internal skill invocation phrases (Claude talking to system, not user)
+    'Let me invoke',
+    'I\'ll invoke',
+    'I will invoke',
+    'I need to invoke',
+    'I should invoke',
+    'invoke request-routing',
+    'invoke bug-planning',
+    'invoke chore-planning',
+    'invoke feature-planning',
+    'invoke epic-planning',
+    'invoke simple-improvement',
+    'invoke bug-mode',
+    'invoke chore-mode',
+    'invoke speed-mode',
+    'invoke stable-mode',
+    'invoke production-mode',
+    'Launching skill:',
+    'Invoking skill:',
+    // Routing decision arrows (internal logging)
+    '→ bug-planning',
+    '→ chore-planning',
+    '→ feature-planning',
+    '→ epic-planning',
+    '→ simple-improvement',
+    '→ bug-mode',
+    '→ chore-mode',
+    '→ speed-mode',
+    '→ stable-mode',
+    // Claude CLI initialization metadata
+    '"apiKeySource"',
+    '"claude_code_version"',
+    '"output_style"',
+    '"skills":',
+    '"agents":',
+    '"plugins":',
+    // Tool response metadata (from Read, Glob, Grep, etc.)
+    '"numLines":',
+    '"startLine":',
+    '"totalLines":',
+    // Gate markers (already parsed by stream manager, hide raw output)
+    '[GATE:',
+    '[/GATE]',
+];
+
+// Filter for system noise - returns true if content should be HIDDEN.
+// Used for standalone messages (assistant text, unpaired tool_results).
+// NOT used inside MergedToolBlock — merged blocks show raw tool output
+// (file reads, grep results, etc.) which would otherwise be filtered here.
+export function isSystemNoise(content: string | undefined): boolean {
+  if (!content) return true;
+
+  const trimmed = content.trim();
+
+  // Hide raw JSON messages (system init, tool calls, etc.)
+  if (trimmed.startsWith('{"') || trimmed.startsWith('[{"')) {
+    return true;
+  }
+
+  if (NOISE_PATTERNS.some(p => content.includes(p))) {
+    return true;
+  }
+
+  // Hide if it has line number prefixes (file reads): "123→" anywhere in content
+  // This catches file content from Read tool
+  if (/\d+→/.test(content)) {
+    return true;
+  }
+
+  // Hide if content ends with JSON-like tool response metadata
+  if (/"\w+":\s*\d+\s*\}\}\}?\s*$/.test(trimmed)) {
+    return true;
+  }
+
+  // Hide if >50% of lines start with numbers (grep/search results)
+  const lines = content.split('\n').filter(l => l.trim());
+  const numberedLines = lines.filter(l => /^\s*\d+[→|:]/.test(l));
+  if (lines.length > 3 && numberedLines.length / lines.length > 0.5) {
+    return true;
+  }
+
+  return false;
+}
+
+const STATUS_COLORS: Record<StreamStatus, string> = {
+  idle: 'bg-zinc-500',
+  connecting: 'bg-yellow-500 animate-pulse',
+  creating: 'bg-yellow-500 animate-pulse',
+  streaming: 'bg-[#819D9F] animate-pulse',
+  done: 'bg-green-500',
+  error: 'bg-red-500',
+};
+
+export function StatusIndicator({ status }: { status: StreamStatus }) {
+  const colorClass = STATUS_COLORS[status];
+  return <div className={`w-2 h-2 rounded-full ${colorClass}`} />;
+}
+
+export function ErrorIcon() {
+  return (
+    <svg className="w-3.5 h-3.5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  );
+}
+
+export function UserIcon() {
+  return (
+    <svg className="w-3.5 h-3.5 text-[#819D9F]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+    </svg>
+  );
+}
+
+function UpdateClaudeButton() {
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [updateResult, setUpdateResult] = useState<{ success: boolean; error?: string } | null>(null);
+
+  const handleUpdate = async () => {
+    setIsUpdating(true);
+    setUpdateResult(null);
+
+    try {
+      const result = await claudeCode.update();
+      setUpdateResult(result);
+      if (result.success) {
+        // Reload after successful update
+        setTimeout(() => window.location.reload(), 1500);
+      }
+    } catch (err) {
+      setUpdateResult({ success: false, error: String(err) });
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  if (updateResult?.success) {
+    return (
+      <div className="mt-2 text-base text-green-600" data-testid="update-success">
+        Update successful! Reloading...
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-2">
+      <Button
+        onClick={handleUpdate}
+        disabled={isUpdating}
+        variant="destructive"
+        size="sm"
+        loading={isUpdating}
+        data-testid="update-claude-button"
+      >
+        {isUpdating ? 'Updating...' : 'Update Claude'}
+      </Button>
+      {updateResult?.error && (
+        <p className="mt-1 text-base text-red-500">{updateResult.error}</p>
+      )}
+    </div>
+  );
+}
+
+export const MessageBlock = memo(function MessageBlock({ message }: { message: ClaudeMessage }) {
+  if (message.type === 'user') {
+    return (
+      <div className="bg-[#e8f0f0] border-2 border-[#819D9F]/30 rounded-lg p-4 ml-8" data-testid="user-message">
+        <div className="flex items-center gap-3 mb-1.5">
+          <UserIcon />
+          <span className="text-base font-medium text-[#5a7d7f]">You</span>
+        </div>
+        <div className="text-base text-zinc-900 [&_p]:my-1 [&_h1]:text-lg [&_h1]:font-bold [&_h1]:my-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:my-2 [&_h3]:font-semibold [&_h3]:my-1 [&_pre]:bg-[#d8e8e8] [&_pre]:p-2 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:my-2 [&_code]:text-[#5a7d7f] [&_code]:bg-[#d8e8e8] [&_code]:px-1 [&_code]:rounded [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_li]:my-0.5 [&_a]:text-[#5a7d7f] [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-[#819D9F] [&_blockquote]:pl-3 [&_blockquote]:italic">
+          <LazyMarkdown>{unescapeContent(message.content)}</LazyMarkdown>
+        </div>
+      </div>
+    );
+  }
+
+  if (message.type === 'assistant' || message.type === 'text') {
+    // Aggressive filtering: hide everything that's not genuine Claude conversation
+    if (isSystemNoise(message.content)) {
+      return null;
+    }
+
+    const displayContent = message.content;
+    if (!displayContent) {
+      return null;
+    }
+
+    return (
+      <div className="bg-zinc-50 rounded-lg p-4" data-testid="output-block">
+        <div className="text-zinc-700 text-base [&_p]:my-1 [&_h1]:text-lg [&_h1]:font-bold [&_h1]:my-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:my-2 [&_h3]:font-semibold [&_h3]:my-1 [&_pre]:bg-zinc-100 [&_pre]:p-2 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:my-2 [&_pre]:text-xs [&_code]:text-zinc-600 [&_code]:bg-zinc-100 [&_code]:px-1 [&_code]:rounded [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_li]:my-0.5 [&_a]:text-[#5a7d7f] [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-zinc-400 [&_blockquote]:pl-3 [&_blockquote]:italic [&_table]:text-xs [&_table]:w-full [&_th]:bg-zinc-100 [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_td]:px-2 [&_td]:py-1 [&_td]:border-t [&_td]:border-zinc-200">
+          <LazyMarkdown>{unescapeContent(displayContent)}</LazyMarkdown>
+        </div>
+      </div>
+    );
+  }
+
+  if (message.type === 'tool_use') {
+    // In detail mode, tool_use is rendered via MergedToolBlock from ClaudePanel.
+    // This fallback renders in summary/raw modes or when not paired.
+    const firstParamValue = message.tool_input ? Object.values(message.tool_input)[0] : null;
+    const displayValue = typeof firstParamValue === 'string'
+      ? (firstParamValue.length > 50 ? firstParamValue.slice(0, 50) + '...' : firstParamValue)
+      : null;
+
+    return (
+      <div className="flex items-center gap-3 py-1.5" data-testid="tool-call">
+        <span className="bg-zinc-200 text-zinc-700 px-3 py-1 rounded text-xs">{message.tool_name}</span>
+        {displayValue && <span className="text-xs text-zinc-500 truncate">{displayValue}</span>}
+      </div>
+    );
+  }
+
+  // Standalone tool_result fallback (unpaired results not consumed by MergedToolBlock).
+  // Noise filtering applies here — line-numbered file reads, grep output, etc. get hidden
+  // because there's no tool_use header to give them context. In detail mode, these are
+  // paired into MergedToolBlock which shows them with the tool name for context.
+  if (message.type === 'tool_result') {
+    const result = message.result || '';
+
+    if (isSystemNoise(result)) {
+      return null;
+    }
+
+    const deduped = deduplicateToolOutput(result);
+    const isLong = deduped.length > 200;
+    const preview = isLong ? deduped.slice(0, 200) + '...' : deduped;
+
+    return (
+      <details className="bg-zinc-100 rounded-lg text-xs group" data-testid="tool-result">
+        <summary className="px-4 py-3 cursor-pointer text-zinc-500 hover:text-zinc-700 flex items-center gap-3 list-none">
+          <svg className="w-3 h-3 transition-transform duration-200 ease-out group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+          <span className="font-medium">Tool result</span>
+          {!isLong && <span className="text-zinc-400 truncate max-w-[200px]">{preview}</span>}
+        </summary>
+        <div className="px-4 pb-3 pt-0">
+          <pre className="text-zinc-600 whitespace-pre-wrap break-words overflow-x-auto max-h-[300px] overflow-y-auto">
+            {deduped}
+          </pre>
+        </div>
+      </details>
+    );
+  }
+
+  if (message.type === 'error') {
+    const isVersionError = isVersionUpdateError(message.content);
+    return (
+      <div className="bg-red-50 border-2 border-red-200 rounded-lg p-4">
+        <div className="flex items-center gap-3 mb-1.5">
+          <ErrorIcon />
+          <span className="text-xs font-medium text-red-600">Error</span>
+        </div>
+        <pre className="text-base text-red-700 whitespace-pre-wrap font-sans">{unescapeContent(message.content)}</pre>
+        {isVersionError && <UpdateClaudeButton />}
+      </div>
+    );
+  }
+
+  if (message.type === 'done') {
+    return null;
+  }
+
+  return null;
+});
+
+// Number of lines to show in collapsed tool block preview
+const PREVIEW_LINES = 4;
+
+// Merged tool block: combines tool_use + tool_result into a single expandable block.
+// Claude Code-style: bold tool name, param in parens, 4-line preview, click to expand.
+// Intentionally does NOT apply isSystemNoise — tool output (file content, grep results)
+// is legitimate content here because it's shown with the tool name header for context.
+export const MergedToolBlock = memo(function MergedToolBlock({
+  toolMessage,
+  resultMessage,
+}: {
+  toolMessage: ClaudeMessage;
+  resultMessage?: ClaudeMessage;
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  const toolName = toolMessage.tool_name || 'Tool';
+  const firstParamValue = toolMessage.tool_input ? Object.values(toolMessage.tool_input)[0] : null;
+  const displayValue = typeof firstParamValue === 'string'
+    ? (firstParamValue.length > 60 ? firstParamValue.slice(0, 60) + '...' : firstParamValue)
+    : null;
+
+  const rawResult = resultMessage?.result || '';
+  const result = deduplicateToolOutput(unescapeContent(rawResult));
+  const lines = result.split('\n');
+  const hasMoreLines = lines.length > PREVIEW_LINES;
+  const previewLines = lines.slice(0, PREVIEW_LINES).join('\n');
+  const remaining = lines.length - PREVIEW_LINES;
+
+  return (
+    <div className="bg-zinc-100 rounded-xl text-sm" data-testid="merged-tool-block">
+      <div
+        className="flex items-center gap-2.5 px-3.5 py-2.5 cursor-pointer select-none transition-[background-color] duration-200 ease-out hover:bg-zinc-200 rounded-t-xl"
+        onClick={() => setExpanded(prev => !prev)}
+        data-testid="tool-block-header"
+      >
+        <svg
+          className={`w-3 h-3 text-zinc-400 flex-shrink-0 transition-transform duration-200 ease-out ${expanded ? 'rotate-90' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+        <span className="font-semibold text-zinc-900 text-sm">{toolName}</span>
+        {displayValue && (
+          <span className="text-zinc-500 text-sm truncate flex-1 min-w-0">({displayValue})</span>
+        )}
+      </div>
+      {result && (
+        <>
+          {expanded ? (
+            <div className="px-3.5 pb-3 pt-0 pl-9">
+              <pre className="text-zinc-600 text-xs font-mono whitespace-pre-wrap break-words overflow-x-auto max-h-[400px] overflow-y-auto leading-relaxed">
+                {result}
+              </pre>
+            </div>
+          ) : hasMoreLines ? (
+            <div className="px-3.5 pb-3 pt-0 pl-9">
+              <pre className="text-zinc-500 text-xs font-mono whitespace-pre-wrap break-words leading-relaxed">
+                {previewLines}
+              </pre>
+              <span className="text-zinc-400 text-xs italic">... {remaining} more line{remaining !== 1 ? 's' : ''}</span>
+            </div>
+          ) : (
+            <div className="px-3.5 pb-3 pt-0 pl-9">
+              <pre className="text-zinc-500 text-xs font-mono whitespace-pre-wrap break-words leading-relaxed">
+                {result}
+              </pre>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+});

package/apps/dashboard/components/ModeStartCard.tsx

@@ -1,6 +1,5 @@
-'use client';
 
-import { motion, useReducedMotion } from 'framer-motion';
+import { m, useReducedMotion } from 'framer-motion';
 import { useState, useRef } from 'react';
 
 // Mode configuration - icons, labels, colors, animations
@@ -24,7 +23,7 @@ const MODE_CONFIGS: Record<string, {
     title: 'Building the happy path',
     subtitle: 'Making it work first',
     gradient: 'linear-gradient(135deg, #fffbeb 0%, #fef3c7 40%, #fde68a 100%)',
-    border: '1px solid #fbbf24',
+    border: '2px solid #fbbf24',
     iconBg: 'rgba(245, 158, 11, 0.15)',
     labelColor: '#92400e',
     titleColor: '#78350f',
@@ -38,7 +37,7 @@ const MODE_CONFIGS: Record<string, {
     title: 'Hardening with error handling',
     subtitle: 'Making it resilient',
     gradient: 'linear-gradient(135deg, #eff6ff 0%, #dbeafe 40%, #bfdbfe 100%)',
-    border: '1px solid #60a5fa',
+    border: '2px solid #60a5fa',
     iconBg: 'rgba(59, 130, 246, 0.15)',
     labelColor: '#1e40af',
     titleColor: '#1e3a5f',
@@ -52,7 +51,7 @@ const MODE_CONFIGS: Record<string, {
     title: 'Final hardening & validation',
     subtitle: 'Making it bulletproof',
     gradient: 'linear-gradient(135deg, #faf5ff 0%, #f3e8ff 40%, #e9d5ff 100%)',
-    border: '1px solid #a78bfa',
+    border: '2px solid #a78bfa',
     iconBg: 'rgba(139, 92, 246, 0.15)',
     labelColor: '#5b21b6',
     titleColor: '#4c1d95',
@@ -80,7 +79,7 @@ function Particle({ color, delay, left, top, size }: {
   size: number;
 }) {
   return (
-    <motion.div
+    <m.div
       style={{
         position: 'absolute',
         left,
@@ -101,7 +100,7 @@ function Particle({ color, delay, left, top, size }: {
 // Light streak overlay
 function LightStreak({ color }: { color: string }) {
   return (
-    <motion.div
+    <m.div
       style={{
         position: 'absolute',
         top: '-50%',
@@ -140,7 +139,7 @@ export function ModeStartCard({ gateType }: ModeStartCardProps) {
   });
 
   return (
-    <motion.div
+    <m.div
       data-testid={`mode-start-card-${gateType}`}
       style={{
         position: 'relative',
@@ -177,9 +176,9 @@ export function ModeStartCard({ gateType }: ModeStartCardProps) {
       )}
 
       {/* Content */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 16, position: 'relative', zIndex: 2 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 18, position: 'relative', zIndex: 2 }}>
         {/* Icon - drops in with spring (instant when reduced motion) */}
-        <motion.div
+        <m.div
           style={{
             width: 44,
             height: 44,
@@ -200,10 +199,10 @@ export function ModeStartCard({ gateType }: ModeStartCardProps) {
           }}
         >
           {config.icon}
-        </motion.div>
+        </m.div>
 
         {/* Text - sweeps in from left (instant when reduced motion) */}
-        <motion.div
+        <m.div
           style={{ flex: 1 }}
           initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, x: -16 }}
           animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, x: 0 }}
@@ -226,21 +225,21 @@ export function ModeStartCard({ gateType }: ModeStartCardProps) {
           <div style={{
             fontSize: 15,
             fontWeight: 600,
-            marginTop: 2,
+            marginTop: 3,
             color: config.titleColor,
           }}>
             {config.title}
           </div>
           <div style={{
             fontSize: 12,
-            marginTop: 4,
+            marginTop: 5,
             color: config.subtitleColor,
             opacity: 0.6,
           }}>
             {config.subtitle}
           </div>
-        </motion.div>
+        </m.div>
       </div>
-    </motion.div>
+    </m.div>
   );
 }