feat: initial prototype

2026-01-14 20:56:28 -08:00
parent daf1bfecb8
commit f393dfb359
68 changed files with 9391 additions and 12 deletions
@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { claudeStore, type TerminalLine } from "$lib/stores/claude";
+  import { onMount, afterUpdate } from "svelte";
+
+  let terminalElement: HTMLDivElement;
+  let shouldAutoScroll = true;
+  let lines: TerminalLine[] = [];
+
+  claudeStore.terminalLines.subscribe((value) => {
+    lines = value;
+  });
+
+  function handleScroll() {
+    if (!terminalElement) return;
+    const { scrollTop, scrollHeight, clientHeight } = terminalElement;
+    shouldAutoScroll = scrollHeight - scrollTop - clientHeight < 100;
+  }
+
+  afterUpdate(() => {
+    if (shouldAutoScroll && terminalElement) {
+      terminalElement.scrollTop = terminalElement.scrollHeight;
+    }
+  });
+
+  function getLineClass(type: string): string {
+    switch (type) {
+      case "user":
+        return "text-cyan-400";
+      case "assistant":
+        return "text-gray-100";
+      case "system":
+        return "text-gray-500 italic";
+      case "tool":
+        return "text-purple-400";
+      case "error":
+        return "text-red-400";
+      default:
+        return "text-gray-300";
+    }
+  }
+
+  function getLinePrefix(type: string): string {
+    switch (type) {
+      case "user":
+        return ">";
+      case "assistant":
+        return "";
+      case "system":
+        return "[system]";
+      case "tool":
+        return "[tool]";
+      case "error":
+        return "[error]";
+      default:
+        return "";
+    }
+  }
+
+  function formatTime(date: Date): string {
+    return date.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  }
+</script>
+
+<div
+  class="terminal-container flex-1 overflow-hidden rounded-lg bg-[var(--bg-terminal)] border border-[var(--border-color)]"
+>
+  <div class="terminal-header flex items-center gap-2 px-4 py-2 border-b border-[var(--border-color)] bg-[var(--bg-secondary)]">
+    <div class="flex gap-1.5">
+      <div class="w-3 h-3 rounded-full bg-red-500"></div>
+      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+      <div class="w-3 h-3 rounded-full bg-green-500"></div>
+    </div>
+    <span class="text-sm text-gray-400 ml-2">Terminal</span>
+  </div>
+
+  <div
+    bind:this={terminalElement}
+    onscroll={handleScroll}
+    class="terminal-content h-[calc(100%-40px)] overflow-y-auto p-4 font-mono text-sm"
+  >
+    {#if lines.length === 0}
+      <div class="text-gray-500 italic">
+        Waiting for Claude... Type a message below to start!
+      </div>
+    {:else}
+      {#each lines as line (line.id)}
+        <div class="terminal-line mb-2 {getLineClass(line.type)}">
+          <span class="text-gray-600 text-xs mr-2">{formatTime(line.timestamp)}</span>
+          {#if getLinePrefix(line.type)}
+            <span class="text-gray-500 mr-2">{getLinePrefix(line.type)}</span>
+          {/if}
+          {#if line.toolName}
+            <span class="text-purple-300 mr-2">[{line.toolName}]</span>
+          {/if}
+          <span class="whitespace-pre-wrap">{line.content}</span>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .terminal-content {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-color) var(--bg-terminal);
+  }
+</style>