style: fix formatting with Prettier

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/ui/src/lib/agent-context-parser.ts

@@ -7,7 +7,7 @@ export interface AgentTaskInfo {
   // Task list extracted from TodoWrite tool calls
   todos: {
     content: string;
-    status: "pending" | "in_progress" | "completed";
+    status: 'pending' | 'in_progress' | 'completed';
   }[];
 
   // Progress stats
@@ -15,7 +15,7 @@ export interface AgentTaskInfo {
   lastToolUsed?: string;
 
   // Phase info
-  currentPhase?: "planning" | "action" | "verification";
+  currentPhase?: 'planning' | 'action' | 'verification';
 
   // Summary (if feature is completed)
   summary?: string;
@@ -27,16 +27,16 @@ export interface AgentTaskInfo {
 /**
  * Default model used by the feature executor
  */
-export const DEFAULT_MODEL = "claude-opus-4-5-20251101";
+export const DEFAULT_MODEL = 'claude-opus-4-5-20251101';
 
 /**
  * Formats a model name for display
  */
 export function formatModelName(model: string): string {
-  if (model.includes("opus")) return "Opus 4.5";
-  if (model.includes("sonnet")) return "Sonnet 4.5";
-  if (model.includes("haiku")) return "Haiku 4.5";
-  return model.split("-").slice(1, 3).join(" ");
+  if (model.includes('opus')) return 'Opus 4.5';
+  if (model.includes('sonnet')) return 'Sonnet 4.5';
+  if (model.includes('haiku')) return 'Haiku 4.5';
+  return model.split('-').slice(1, 3).join(' ');
 }
 
 /**
@@ -44,11 +44,13 @@ export function formatModelName(model: string): string {
  * Looks for TodoWrite tool calls in the format:
  * TodoWrite: [{"content": "...", "status": "..."}]
  */
-function extractTodos(content: string): AgentTaskInfo["todos"] {
-  const todos: AgentTaskInfo["todos"] = [];
+function extractTodos(content: string): AgentTaskInfo['todos'] {
+  const todos: AgentTaskInfo['todos'] = [];
 
   // Look for TodoWrite tool inputs
-  const todoMatches = content.matchAll(/TodoWrite.*?(?:"todos"\s*:\s*)?(\[[\s\S]*?\](?=\s*(?:\}|$|🔧|📋|⚡|✅|❌)))/g);
+  const todoMatches = content.matchAll(
+    /TodoWrite.*?(?:"todos"\s*:\s*)?(\[[\s\S]*?\](?=\s*(?:\}|$|🔧|📋|⚡|✅|❌)))/g
+  );
 
   for (const match of todoMatches) {
     try {
@@ -61,7 +63,7 @@ function extractTodos(content: string): AgentTaskInfo["todos"] {
           for (const item of parsed) {
             if (item.content && item.status) {
               // Check if this todo already exists (avoid duplicates)
-              if (!todos.some(t => t.content === item.content)) {
+              if (!todos.some((t) => t.content === item.content)) {
                 todos.push({
                   content: item.content,
                   status: item.status,
@@ -79,12 +81,12 @@ function extractTodos(content: string): AgentTaskInfo["todos"] {
   // Also try to extract from markdown task lists
   const markdownTodos = content.matchAll(/- \[([ xX])\] (.+)/g);
   for (const match of markdownTodos) {
-    const isCompleted = match[1].toLowerCase() === "x";
+    const isCompleted = match[1].toLowerCase() === 'x';
     const content = match[2].trim();
-    if (!todos.some(t => t.content === content)) {
+    if (!todos.some((t) => t.content === content)) {
       todos.push({
         content,
-        status: isCompleted ? "completed" : "pending",
+        status: isCompleted ? 'completed' : 'pending',
       });
     }
   }
@@ -114,18 +116,18 @@ function getLastToolUsed(content: string): string | undefined {
 /**
  * Determines the current phase from the content
  */
-function getCurrentPhase(content: string): "planning" | "action" | "verification" | undefined {
+function getCurrentPhase(content: string): 'planning' | 'action' | 'verification' | undefined {
   // Find the last phase marker
-  const planningIndex = content.lastIndexOf("📋");
-  const actionIndex = content.lastIndexOf("⚡");
-  const verificationIndex = content.lastIndexOf("✅");
+  const planningIndex = content.lastIndexOf('📋');
+  const actionIndex = content.lastIndexOf('⚡');
+  const verificationIndex = content.lastIndexOf('✅');
 
   const maxIndex = Math.max(planningIndex, actionIndex, verificationIndex);
 
   if (maxIndex === -1) return undefined;
-  if (maxIndex === verificationIndex) return "verification";
-  if (maxIndex === actionIndex) return "action";
-  return "planning";
+  if (maxIndex === verificationIndex) return 'verification';
+  if (maxIndex === actionIndex) return 'action';
+  return 'planning';
 }
 
 /**
@@ -147,13 +149,17 @@ function extractSummary(content: string): string | undefined {
   }
 
   // Look for completion markers and extract surrounding text
-  const completionMatch = content.match(/✓ (?:Feature|Verification|Task) (?:successfully|completed|verified)[^\n]*(?:\n[^\n]{1,200})?/i);
+  const completionMatch = content.match(
+    /✓ (?:Feature|Verification|Task) (?:successfully|completed|verified)[^\n]*(?:\n[^\n]{1,200})?/i
+  );
   if (completionMatch) {
     return completionMatch[0].trim();
   }
 
   // Look for "What was done" type sections
-  const whatWasDoneMatch = content.match(/(?:What was done|Changes made|Implemented)[^\n]*\n([\s\S]*?)(?=\n## [^#]|\n🔧|$)/i);
+  const whatWasDoneMatch = content.match(
+    /(?:What was done|Changes made|Implemented)[^\n]*\n([\s\S]*?)(?=\n## [^#]|\n🔧|$)/i
+  );
   if (whatWasDoneMatch) {
     return whatWasDoneMatch[1].trim();
   }
@@ -165,11 +171,15 @@ function extractSummary(content: string): string | undefined {
  * Calculates progress percentage based on phase and context
  * Uses a more dynamic approach that better reflects actual progress
  */
-function calculateProgress(phase: AgentTaskInfo["currentPhase"], toolCallCount: number, todos: AgentTaskInfo["todos"]): number {
+function calculateProgress(
+  phase: AgentTaskInfo['currentPhase'],
+  toolCallCount: number,
+  todos: AgentTaskInfo['todos']
+): number {
   // If we have todos, primarily use them for progress calculation
   if (todos.length > 0) {
-    const completedCount = todos.filter(t => t.status === "completed").length;
-    const inProgressCount = todos.filter(t => t.status === "in_progress").length;
+    const completedCount = todos.filter((t) => t.status === 'completed').length;
+    const inProgressCount = todos.filter((t) => t.status === 'in_progress').length;
 
     // Weight: completed = 1, in_progress = 0.5, pending = 0
     const progress = ((completedCount + inProgressCount * 0.5) / todos.length) * 90;
@@ -181,15 +191,15 @@ function calculateProgress(phase: AgentTaskInfo["currentPhase"], toolCallCount:
   // Fallback: use phase-based progress with tool call scaling
   let phaseProgress = 0;
   switch (phase) {
-    case "planning":
+    case 'planning':
       // Planning phase: 5-25%
       phaseProgress = 5 + Math.min(toolCallCount * 1, 20);
       break;
-    case "action":
+    case 'action':
       // Action phase: 25-75% based on tool calls (logarithmic scaling)
       phaseProgress = 25 + Math.min(Math.log2(toolCallCount + 1) * 10, 50);
       break;
-    case "verification":
+    case 'verification':
       // Verification phase: 75-95%
       phaseProgress = 75 + Math.min(toolCallCount * 0.5, 20);
       break;
@@ -247,7 +257,7 @@ export function getQuickStats(content: string): QuickStats {
   const info = parseAgentContext(content);
   return {
     toolCalls: info.toolCallCount,
-    completedTasks: info.todos.filter(t => t.status === "completed").length,
+    completedTasks: info.todos.filter((t) => t.status === 'completed').length,
     totalTasks: info.todos.length,
     phase: info.currentPhase,
   };

apps/ui/src/lib/log-parser.ts

@@ -4,32 +4,40 @@
  */
 
 export type LogEntryType =
-  | "prompt"
-  | "tool_call"
-  | "tool_result"
-  | "phase"
-  | "error"
-  | "success"
-  | "info"
-  | "debug"
-  | "warning"
-  | "thinking";
+  | 'prompt'
+  | 'tool_call'
+  | 'tool_result'
+  | 'phase'
+  | 'error'
+  | 'success'
+  | 'info'
+  | 'debug'
+  | 'warning'
+  | 'thinking';
 
-export type ToolCategory = 'read' | 'edit' | 'write' | 'bash' | 'search' | 'todo' | 'task' | 'other';
+export type ToolCategory =
+  | 'read'
+  | 'edit'
+  | 'write'
+  | 'bash'
+  | 'search'
+  | 'todo'
+  | 'task'
+  | 'other';
 
 const TOOL_CATEGORIES: Record<string, ToolCategory> = {
-  'Read': 'read',
-  'Edit': 'edit',
-  'Write': 'write',
-  'Bash': 'bash',
-  'Grep': 'search',
-  'Glob': 'search',
-  'WebSearch': 'search',
-  'WebFetch': 'read',
-  'TodoWrite': 'todo',
-  'Task': 'task',
-  'NotebookEdit': 'edit',
-  'KillShell': 'bash',
+  Read: 'read',
+  Edit: 'edit',
+  Write: 'write',
+  Bash: 'bash',
+  Grep: 'search',
+  Glob: 'search',
+  WebSearch: 'search',
+  WebFetch: 'read',
+  TodoWrite: 'todo',
+  Task: 'task',
+  NotebookEdit: 'edit',
+  KillShell: 'bash',
 };
 
 /**
@@ -73,7 +81,7 @@ const generateDeterministicId = (content: string, lineIndex: number): string =>
   const str = stableContent + '|' + lineIndex.toString();
   for (let i = 0; i < str.length; i++) {
     const char = str.charCodeAt(i);
-    hash = ((hash << 5) - hash) + char;
+    hash = (hash << 5) - hash + char;
     hash = hash & hash; // Convert to 32bit integer
   }
   return 'log_' + Math.abs(hash).toString(36);
@@ -86,85 +94,89 @@ function detectEntryType(content: string): LogEntryType {
   const trimmed = content.trim();
 
   // Tool calls
-  if (trimmed.startsWith("🔧 Tool:") || trimmed.match(/^Tool:\s*/)) {
-    return "tool_call";
+  if (trimmed.startsWith('🔧 Tool:') || trimmed.match(/^Tool:\s*/)) {
+    return 'tool_call';
   }
 
   // Tool results / Input
-  if (trimmed.startsWith("Input:") || trimmed.startsWith("Result:") || trimmed.startsWith("Output:")) {
-    return "tool_result";
+  if (
+    trimmed.startsWith('Input:') ||
+    trimmed.startsWith('Result:') ||
+    trimmed.startsWith('Output:')
+  ) {
+    return 'tool_result';
   }
 
   // Phase changes
   if (
-    trimmed.startsWith("📋") ||
-    trimmed.startsWith("⚡") ||
-    trimmed.startsWith("✅") ||
+    trimmed.startsWith('📋') ||
+    trimmed.startsWith('⚡') ||
+    trimmed.startsWith('✅') ||
     trimmed.match(/^(Planning|Action|Verification)/i) ||
     trimmed.match(/\[Phase:\s*([^\]]+)\]/) ||
     trimmed.match(/Phase:\s*\w+/i)
   ) {
-    return "phase";
+    return 'phase';
   }
-  
+
   // Feature creation events
   if (
     trimmed.match(/\[Feature Creation\]/i) ||
     trimmed.match(/Feature Creation/i) ||
     trimmed.match(/Creating feature/i)
   ) {
-    return "success";
+    return 'success';
   }
 
   // Errors
-  if (trimmed.startsWith("❌") || trimmed.toLowerCase().includes("error:")) {
-    return "error";
+  if (trimmed.startsWith('❌') || trimmed.toLowerCase().includes('error:')) {
+    return 'error';
   }
 
   // Success messages and summary sections
   if (
-    trimmed.startsWith("✅") ||
-    trimmed.toLowerCase().includes("success") ||
-    trimmed.toLowerCase().includes("completed") ||
+    trimmed.startsWith('✅') ||
+    trimmed.toLowerCase().includes('success') ||
+    trimmed.toLowerCase().includes('completed') ||
     // Summary tags (preferred format from agent)
-    trimmed.startsWith("<summary>") ||
+    trimmed.startsWith('<summary>') ||
     // Markdown summary headers (fallback)
     trimmed.match(/^##\s+(Summary|Feature|Changes|Implementation)/i) ||
     trimmed.match(/^(I've|I have) (successfully |now )?(completed|finished|implemented)/i)
   ) {
-    return "success";
+    return 'success';
   }
 
   // Warnings
-  if (trimmed.startsWith("⚠️") || trimmed.toLowerCase().includes("warning:")) {
-    return "warning";
+  if (trimmed.startsWith('⚠️') || trimmed.toLowerCase().includes('warning:')) {
+    return 'warning';
   }
 
   // Thinking/Preparation info (be specific to avoid matching summary content)
   if (
-    trimmed.toLowerCase().includes("ultrathink") ||
+    trimmed.toLowerCase().includes('ultrathink') ||
     trimmed.match(/thinking level[:\s]*(low|medium|high|none|\d)/i) ||
     trimmed.match(/^thinking level\s*$/i) ||
-    trimmed.toLowerCase().includes("estimated cost") ||
-    trimmed.toLowerCase().includes("estimated time") ||
-    trimmed.toLowerCase().includes("budget tokens") ||
+    trimmed.toLowerCase().includes('estimated cost') ||
+    trimmed.toLowerCase().includes('estimated time') ||
+    trimmed.toLowerCase().includes('budget tokens') ||
     trimmed.match(/thinking.*preparation/i)
   ) {
-    return "thinking";
+    return 'thinking';
   }
 
   // Debug info (JSON, stack traces, etc.)
   if (
-    trimmed.startsWith("{") ||
-    trimmed.startsWith("[") ||
-    trimmed.includes("at ") ||
+    trimmed.startsWith('{') ||
+    trimmed.startsWith('[') ||
+    trimmed.includes('at ') ||
     trimmed.match(/^\s*\d+\s*\|/)
   ) {
-    return "debug";
+    return 'debug';
   }
 
   // Default to info
-  return "info";
+  return 'info';
 }
 
 /**
@@ -181,9 +193,9 @@ function extractToolName(content: string): string | undefined {
  * Extracts phase name from a phase entry
  */
 function extractPhase(content: string): string | undefined {
-  if (content.includes("📋")) return "planning";
-  if (content.includes("⚡")) return "action";
-  if (content.includes("✅")) return "verification";
+  if (content.includes('📋')) return 'planning';
+  if (content.includes('⚡')) return 'action';
+  if (content.includes('✅')) return 'verification';
 
   // Extract from [Phase: ...] format
   const phaseMatch = content.match(/\[Phase:\s*([^\]]+)\]/);
@@ -328,48 +340,52 @@ export function shouldCollapseByDefault(entry: LogEntry): boolean {
  */
 function generateTitle(type: LogEntryType, content: string): string {
   switch (type) {
-    case "tool_call": {
+    case 'tool_call': {
       const toolName = extractToolName(content);
-      return toolName ? `Tool Call: ${toolName}` : "Tool Call";
+      return toolName ? `Tool Call: ${toolName}` : 'Tool Call';
     }
-    case "tool_result":
-      return "Tool Input/Result";
-    case "phase": {
+    case 'tool_result':
+      return 'Tool Input/Result';
+    case 'phase': {
       const phase = extractPhase(content);
       if (phase) {
         // Capitalize first letter of each word
-        const formatted = phase.split(/\s+/).map(word => 
-          word.charAt(0).toUpperCase() + word.slice(1)
-        ).join(" ");
+        const formatted = phase
+          .split(/\s+/)
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(' ');
         return `Phase: ${formatted}`;
       }
-      return "Phase Change";
+      return 'Phase Change';
     }
-    case "error":
-      return "Error";
-    case "success": {
+    case 'error':
+      return 'Error';
+    case 'success': {
       // Check if it's a summary section
-      if (content.startsWith("<summary>") || content.includes("<summary>")) {
-        return "Summary";
+      if (content.startsWith('<summary>') || content.includes('<summary>')) {
+        return 'Summary';
       }
       if (content.match(/^##\s+(Summary|Feature|Changes|Implementation)/i)) {
-        return "Summary";
+        return 'Summary';
       }
-      if (content.match(/^All tasks completed/i) || content.match(/^(I've|I have) (successfully |now )?(completed|finished|implemented)/i)) {
-        return "Summary";
+      if (
+        content.match(/^All tasks completed/i) ||
+        content.match(/^(I've|I have) (successfully |now )?(completed|finished|implemented)/i)
+      ) {
+        return 'Summary';
       }
-      return "Success";
+      return 'Success';
     }
-    case "warning":
-      return "Warning";
-    case "thinking":
-      return "Thinking Level";
-    case "debug":
-      return "Debug Info";
-    case "prompt":
-      return "Prompt";
+    case 'warning':
+      return 'Warning';
+    case 'thinking':
+      return 'Thinking Level';
+    case 'debug':
+      return 'Debug Info';
+    case 'prompt':
+      return 'Prompt';
     default:
-      return "Info";
+      return 'Info';
   }
 }
 
@@ -415,9 +431,9 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
   }
 
   const entries: LogEntry[] = [];
-  const lines = rawOutput.split("\n");
+  const lines = rawOutput.split('\n');
 
-  let currentEntry: Omit<LogEntry, 'id'> & { id?: string } | null = null;
+  let currentEntry: (Omit<LogEntry, 'id'> & { id?: string }) | null = null;
   let currentContent: string[] = [];
   let entryStartLine = 0; // Track the starting line for deterministic ID generation
 
@@ -431,7 +447,7 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
 
   const finalizeEntry = () => {
     if (currentEntry && currentContent.length > 0) {
-      currentEntry.content = currentContent.join("\n").trim();
+      currentEntry.content = currentContent.join('\n').trim();
       if (currentEntry.content) {
         // Populate enhanced metadata for tool calls
         const toolName = currentEntry.metadata?.toolName;
@@ -450,7 +466,7 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
 
         // Generate deterministic ID based on content and position
         const entryWithId: LogEntry = {
-          ...currentEntry as Omit<LogEntry, 'id'>,
+          ...(currentEntry as Omit<LogEntry, 'id'>),
           id: generateDeterministicId(currentEntry.content, entryStartLine),
         };
         entries.push(entryWithId);
@@ -494,7 +510,7 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
     if (inSummaryAccumulation) {
       currentContent.push(line);
       // Summary is complete when we see closing tag
-      if (trimmedLine.includes("</summary>")) {
+      if (trimmedLine.includes('</summary>')) {
         inSummaryAccumulation = false;
         // Don't finalize here - let normal flow handle it
       }
@@ -505,13 +521,13 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
     // Detect if this line starts a new entry
     const lineType = detectEntryType(trimmedLine);
     const isNewEntry =
-      trimmedLine.startsWith("🔧") ||
-      trimmedLine.startsWith("📋") ||
-      trimmedLine.startsWith("⚡") ||
-      trimmedLine.startsWith("✅") ||
-      trimmedLine.startsWith("❌") ||
-      trimmedLine.startsWith("⚠️") ||
-      trimmedLine.startsWith("🧠") ||
+      trimmedLine.startsWith('🔧') ||
+      trimmedLine.startsWith('📋') ||
+      trimmedLine.startsWith('⚡') ||
+      trimmedLine.startsWith('✅') ||
+      trimmedLine.startsWith('❌') ||
+      trimmedLine.startsWith('⚠️') ||
+      trimmedLine.startsWith('🧠') ||
       trimmedLine.match(/\[Phase:\s*([^\]]+)\]/) ||
       trimmedLine.match(/\[Feature Creation\]/i) ||
       trimmedLine.match(/\[Tool\]/i) ||
@@ -519,10 +535,10 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
       trimmedLine.match(/\[Complete\]/i) ||
       trimmedLine.match(/\[ERROR\]/i) ||
       trimmedLine.match(/\[Status\]/i) ||
-      trimmedLine.toLowerCase().includes("ultrathink preparation") ||
+      trimmedLine.toLowerCase().includes('ultrathink preparation') ||
       trimmedLine.match(/thinking level[:\s]*(low|medium|high|none|\d)/i) ||
       // Summary tags (preferred format from agent)
-      trimmedLine.startsWith("<summary>") ||
+      trimmedLine.startsWith('<summary>') ||
       // Agent summary sections (markdown headers - fallback)
       trimmedLine.match(/^##\s+(Summary|Feature|Changes|Implementation)/i) ||
       // Summary introduction lines
@@ -530,7 +546,7 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
       trimmedLine.match(/^(I've|I have) (successfully |now )?(completed|finished|implemented)/i);
 
     // Check if this is an Input: line that should trigger JSON accumulation
-    const isInputLine = trimmedLine.startsWith("Input:") && currentEntry?.type === "tool_call";
+    const isInputLine = trimmedLine.startsWith('Input:') && currentEntry?.type === 'tool_call';
 
     if (isNewEntry) {
       // Finalize previous entry
@@ -543,7 +559,7 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
       currentEntry = {
         type: lineType,
         title: generateTitle(lineType, trimmedLine),
-        content: "",
+        content: '',
         metadata: {
           toolName: extractToolName(trimmedLine),
           phase: extractPhase(trimmedLine),
@@ -552,7 +568,7 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
       currentContent.push(trimmedLine);
 
       // If this is a <summary> tag, start summary accumulation mode
-      if (trimmedLine.startsWith("<summary>") && !trimmedLine.includes("</summary>")) {
+      if (trimmedLine.startsWith('<summary>') && !trimmedLine.includes('</summary>')) {
         inSummaryAccumulation = true;
       }
     } else if (isInputLine && currentEntry) {
@@ -595,9 +611,9 @@ export function parseLogOutput(rawOutput: string): LogEntry[] {
 
       // No current entry, create a default info entry
       currentEntry = {
-        type: "info",
-        title: "Info",
-        content: "",
+        type: 'info',
+        title: 'Info',
+        content: '',
       };
       currentContent.push(line);
     }
@@ -626,11 +642,11 @@ function mergeConsecutiveEntries(entries: LogEntry[]): LogEntry[] {
   for (const entry of entries) {
     if (
       current &&
-      (current.type === "debug" || current.type === "info") &&
+      (current.type === 'debug' || current.type === 'info') &&
       current.type === entry.type
     ) {
       // Merge into current - regenerate ID based on merged content
-      current.content += "\n\n" + entry.content;
+      current.content += '\n\n' + entry.content;
       current.id = generateDeterministicId(current.content, mergeIndex);
     } else {
       if (current) {
@@ -659,85 +675,85 @@ export function getLogTypeColors(type: LogEntryType): {
   badge: string;
 } {
   switch (type) {
-    case "prompt":
+    case 'prompt':
       return {
-        bg: "bg-blue-500/10",
-        border: "border-blue-500/30",
-        text: "text-blue-300",
-        icon: "text-blue-400",
-        badge: "bg-blue-500/20 text-blue-300",
+        bg: 'bg-blue-500/10',
+        border: 'border-blue-500/30',
+        text: 'text-blue-300',
+        icon: 'text-blue-400',
+        badge: 'bg-blue-500/20 text-blue-300',
       };
-    case "tool_call":
+    case 'tool_call':
       return {
-        bg: "bg-amber-500/10",
-        border: "border-amber-500/30",
-        text: "text-amber-300",
-        icon: "text-amber-400",
-        badge: "bg-amber-500/20 text-amber-300",
+        bg: 'bg-amber-500/10',
+        border: 'border-amber-500/30',
+        text: 'text-amber-300',
+        icon: 'text-amber-400',
+        badge: 'bg-amber-500/20 text-amber-300',
       };
-    case "tool_result":
+    case 'tool_result':
       return {
-        bg: "bg-slate-500/10",
-        border: "border-slate-400/30",
-        text: "text-slate-300",
-        icon: "text-slate-400",
-        badge: "bg-slate-500/20 text-slate-300",
+        bg: 'bg-slate-500/10',
+        border: 'border-slate-400/30',
+        text: 'text-slate-300',
+        icon: 'text-slate-400',
+        badge: 'bg-slate-500/20 text-slate-300',
       };
-    case "phase":
+    case 'phase':
       return {
-        bg: "bg-cyan-500/10",
-        border: "border-cyan-500/30",
-        text: "text-cyan-300",
-        icon: "text-cyan-400",
-        badge: "bg-cyan-500/20 text-cyan-300",
+        bg: 'bg-cyan-500/10',
+        border: 'border-cyan-500/30',
+        text: 'text-cyan-300',
+        icon: 'text-cyan-400',
+        badge: 'bg-cyan-500/20 text-cyan-300',
       };
-    case "error":
+    case 'error':
       return {
-        bg: "bg-red-500/10",
-        border: "border-red-500/30",
-        text: "text-red-300",
-        icon: "text-red-400",
-        badge: "bg-red-500/20 text-red-300",
+        bg: 'bg-red-500/10',
+        border: 'border-red-500/30',
+        text: 'text-red-300',
+        icon: 'text-red-400',
+        badge: 'bg-red-500/20 text-red-300',
       };
-    case "success":
+    case 'success':
       return {
-        bg: "bg-emerald-500/10",
-        border: "border-emerald-500/30",
-        text: "text-emerald-300",
-        icon: "text-emerald-400",
-        badge: "bg-emerald-500/20 text-emerald-300",
+        bg: 'bg-emerald-500/10',
+        border: 'border-emerald-500/30',
+        text: 'text-emerald-300',
+        icon: 'text-emerald-400',
+        badge: 'bg-emerald-500/20 text-emerald-300',
       };
-    case "warning":
+    case 'warning':
       return {
-        bg: "bg-orange-500/10",
-        border: "border-orange-500/30",
-        text: "text-orange-300",
-        icon: "text-orange-400",
-        badge: "bg-orange-500/20 text-orange-300",
+        bg: 'bg-orange-500/10',
+        border: 'border-orange-500/30',
+        text: 'text-orange-300',
+        icon: 'text-orange-400',
+        badge: 'bg-orange-500/20 text-orange-300',
       };
-    case "thinking":
+    case 'thinking':
       return {
-        bg: "bg-indigo-500/10",
-        border: "border-indigo-500/30",
-        text: "text-indigo-300",
-        icon: "text-indigo-400",
-        badge: "bg-indigo-500/20 text-indigo-300",
+        bg: 'bg-indigo-500/10',
+        border: 'border-indigo-500/30',
+        text: 'text-indigo-300',
+        icon: 'text-indigo-400',
+        badge: 'bg-indigo-500/20 text-indigo-300',
       };
-    case "debug":
+    case 'debug':
       return {
-        bg: "bg-primary/10",
-        border: "border-primary/30",
-        text: "text-primary",
-        icon: "text-primary",
-        badge: "bg-primary/20 text-primary",
+        bg: 'bg-primary/10',
+        border: 'border-primary/30',
+        text: 'text-primary',
+        icon: 'text-primary',
+        badge: 'bg-primary/20 text-primary',
       };
     default:
       return {
-        bg: "bg-zinc-500/10",
-        border: "border-zinc-500/30",
-        text: "text-zinc-300",
-        icon: "text-zinc-400",
-        badge: "bg-zinc-500/20 text-zinc-300",
+        bg: 'bg-zinc-500/10',
+        border: 'border-zinc-500/30',
+        text: 'text-zinc-300',
+        icon: 'text-zinc-400',
+        badge: 'bg-zinc-500/20 text-zinc-300',
       };
   }
 }

apps/ui/src/lib/templates.ts

@@ -11,72 +11,93 @@ export interface StarterTemplate {
   repoUrl: string;
   techStack: string[];
   features: string[];
-  category: "fullstack" | "frontend" | "backend" | "ai" | "other";
+  category: 'fullstack' | 'frontend' | 'backend' | 'ai' | 'other';
   author: string;
 }
 
 export const starterTemplates: StarterTemplate[] = [
   {
-    id: "automaker-starter-kit",
-    name: "Automaker Starter Kit",
-    description: "An online community and training platform template for aspiring full stack engineers. Master frontend and backend development, build real-world projects, and launch your software engineering career.",
-    repoUrl: "https://github.com/webdevcody/automaker-starter-kit",
-    techStack: ["TanStack Start", "PostgreSQL", "Drizzle ORM", "Better Auth", "Tailwind CSS", "Radix UI", "Stripe", "AWS S3/R2"],
-    features: [
-      "Community posts with comments and reactions",
-      "User profiles and portfolios",
-      "Calendar event management",
-      "Direct messaging",
-      "Member discovery directory",
-      "Real-time notifications",
-      "Classroom modules for learning",
-      "Tiered subscriptions (free/basic/pro)",
-      "File uploads with presigned URLs"
+    id: 'automaker-starter-kit',
+    name: 'Automaker Starter Kit',
+    description:
+      'An online community and training platform template for aspiring full stack engineers. Master frontend and backend development, build real-world projects, and launch your software engineering career.',
+    repoUrl: 'https://github.com/webdevcody/automaker-starter-kit',
+    techStack: [
+      'TanStack Start',
+      'PostgreSQL',
+      'Drizzle ORM',
+      'Better Auth',
+      'Tailwind CSS',
+      'Radix UI',
+      'Stripe',
+      'AWS S3/R2',
     ],
-    category: "fullstack",
-    author: "webdevcody"
+    features: [
+      'Community posts with comments and reactions',
+      'User profiles and portfolios',
+      'Calendar event management',
+      'Direct messaging',
+      'Member discovery directory',
+      'Real-time notifications',
+      'Classroom modules for learning',
+      'Tiered subscriptions (free/basic/pro)',
+      'File uploads with presigned URLs',
+    ],
+    category: 'fullstack',
+    author: 'webdevcody',
   },
   {
-    id: "agentic-jumpstart",
-    name: "Agentic Jumpstart",
-    description: "A starter template for building agentic AI applications with a pre-configured development environment including database setup, Docker support, and TypeScript configuration.",
-    repoUrl: "https://github.com/webdevcody/agentic-jumpstart-starter-kit",
-    techStack: ["TypeScript", "Vite", "Drizzle ORM", "Docker", "PostCSS"],
+    id: 'agentic-jumpstart',
+    name: 'Agentic Jumpstart',
+    description:
+      'A starter template for building agentic AI applications with a pre-configured development environment including database setup, Docker support, and TypeScript configuration.',
+    repoUrl: 'https://github.com/webdevcody/agentic-jumpstart-starter-kit',
+    techStack: ['TypeScript', 'Vite', 'Drizzle ORM', 'Docker', 'PostCSS'],
     features: [
-      "Pre-configured VS Code settings",
-      "Docker Compose setup",
-      "Database migrations with Drizzle",
-      "Type-safe development",
-      "Environment setup with .env.example"
+      'Pre-configured VS Code settings',
+      'Docker Compose setup',
+      'Database migrations with Drizzle',
+      'Type-safe development',
+      'Environment setup with .env.example',
     ],
-    category: "ai",
-    author: "webdevcody"
+    category: 'ai',
+    author: 'webdevcody',
   },
   {
-    id: "full-stack-campus",
-    name: "Full Stack Campus",
-    description: "A feature-driven development template for building community platforms. Includes authentication, Stripe payments, file uploads, and real-time features using TanStack Start.",
-    repoUrl: "https://github.com/webdevcody/full-stack-campus",
-    techStack: ["TanStack Start", "PostgreSQL", "Drizzle ORM", "Better Auth", "Tailwind CSS", "Radix UI", "Stripe", "AWS S3/R2"],
-    features: [
-      "Community posts with comments and reactions",
-      "User profiles and portfolios",
-      "Calendar event management",
-      "Direct messaging",
-      "Member discovery directory",
-      "Real-time notifications",
-      "Tiered subscriptions (free/basic/pro)",
-      "File uploads with presigned URLs"
+    id: 'full-stack-campus',
+    name: 'Full Stack Campus',
+    description:
+      'A feature-driven development template for building community platforms. Includes authentication, Stripe payments, file uploads, and real-time features using TanStack Start.',
+    repoUrl: 'https://github.com/webdevcody/full-stack-campus',
+    techStack: [
+      'TanStack Start',
+      'PostgreSQL',
+      'Drizzle ORM',
+      'Better Auth',
+      'Tailwind CSS',
+      'Radix UI',
+      'Stripe',
+      'AWS S3/R2',
     ],
-    category: "fullstack",
-    author: "webdevcody"
-  }
+    features: [
+      'Community posts with comments and reactions',
+      'User profiles and portfolios',
+      'Calendar event management',
+      'Direct messaging',
+      'Member discovery directory',
+      'Real-time notifications',
+      'Tiered subscriptions (free/basic/pro)',
+      'File uploads with presigned URLs',
+    ],
+    category: 'fullstack',
+    author: 'webdevcody',
+  },
 ];
 
 export function getTemplateById(id: string): StarterTemplate | undefined {
-  return starterTemplates.find(t => t.id === id);
+  return starterTemplates.find((t) => t.id === id);
 }
 
-export function getTemplatesByCategory(category: StarterTemplate["category"]): StarterTemplate[] {
-  return starterTemplates.filter(t => t.category === category);
+export function getTemplatesByCategory(category: StarterTemplate['category']): StarterTemplate[] {
+  return starterTemplates.filter((t) => t.category === category);
 }