feat(tools): set up proper CI (#2)

### Explanation

_No response_

### Issue

_No response_

### Attestations

- [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [ ] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [ ] I have pinned the dependencies to a specific patch version.

### Style

- [ ] I have run the linter and resolved any errors.
- [ ] My pull request uses an appropriate title, matching the conventional commit standards.
- [ ] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

_No response_

Reviewed-on: #2
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

.gitattributes

@@ -7,4 +7,5 @@
 *.png binary
 *.jpg binary
 *.icons binary
-*.ico binary
+*.ico binary
+*.icns binary

.gitea/issue_template/bug_report.yaml

@@ -1,6 +1,6 @@
 name: 🐛 Bug Report
 description: Something isn't working as expected? Let us know!
-title: '[BUG] - '
+title: "[BUG] - "
 labels:
   - "status/awaiting triage"
 body:
@@ -50,7 +50,7 @@ body:
       description: The operating system you are using, including the version/build number.
     validations:
       required: true
-# Remove this section for non-web apps.
+  # Remove this section for non-web apps.
   - type: input
     id: browser
     attributes:
@@ -66,4 +66,3 @@ body:
         - No
     validations:
       required: true
-

.gitea/issue_template/config.yml

@@ -2,4 +2,4 @@ blank_issues_enabled: false
 contact_links:
   - name: "Discord"
     url: "https://chat.nhcarrigan.com"
-    about: "Chat with us directly."
+    about: "Chat with us directly."

.gitea/issue_template/feature_proposal.yml

@@ -1,6 +1,6 @@
 name: 💭 Feature Proposal
 description: Have an idea for how we can improve? Share it here!
-title: '[FEAT] - '
+title: "[FEAT] - "
 labels:
   - "status/awaiting triage"
 body:

.gitea/issue_template/other.yml

@@ -1,6 +1,6 @@
 name: ❓ Other Issue
 description: I have something that is neither a bug nor a feature request.
-title: '[OTHER] - '
+title: "[OTHER] - "
 labels:
   - "status/awaiting triage"
 body:

.gitea/workflows/ci.yml

@@ -0,0 +1,189 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  lint-and-test:
+    name: Lint & Test
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install Linux dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libwebkit2gtk-4.1-dev \
+            librsvg2-dev \
+            patchelf \
+            libgtk-3-dev \
+            libayatana-appindicator3-dev
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install frontend dependencies
+        run: pnpm install
+
+      - name: Run ESLint
+        run: pnpm lint
+
+      - name: Run Prettier check
+        run: pnpm format:check
+
+      - name: Run Svelte Check
+        run: pnpm check
+
+      - name: Run frontend tests
+        run: pnpm test
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          components: clippy
+
+      - name: Cache Rust dependencies
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cargo/bin/
+            ~/.cargo/registry/index/
+            ~/.cargo/registry/cache/
+            ~/.cargo/git/db/
+            src-tauri/target/
+          key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Run Clippy
+        working-directory: src-tauri
+        run: cargo clippy --all-targets --all-features -- -D warnings
+
+      - name: Run Rust tests
+        working-directory: src-tauri
+        run: cargo test
+
+  build-linux:
+    name: Build Linux
+    runs-on: ubuntu-latest
+    needs: lint-and-test
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install Linux dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libwebkit2gtk-4.1-dev \
+            librsvg2-dev \
+            patchelf \
+            libgtk-3-dev \
+            libayatana-appindicator3-dev \
+            xdg-utils
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install frontend dependencies
+        run: pnpm install
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Cache Rust dependencies
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cargo/bin/
+            ~/.cargo/registry/index/
+            ~/.cargo/registry/cache/
+            ~/.cargo/git/db/
+            src-tauri/target/
+          key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Build Linux
+        run: pnpm build:linux
+
+  build-windows:
+    name: Build Windows (cross-compile)
+    runs-on: ubuntu-latest
+    needs: lint-and-test
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install Linux dependencies for cross-compilation
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libwebkit2gtk-4.1-dev \
+            librsvg2-dev \
+            patchelf \
+            libgtk-3-dev \
+            libayatana-appindicator3-dev \
+            clang \
+            lld \
+            llvm \
+            nsis
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install frontend dependencies
+        run: pnpm install
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: x86_64-pc-windows-msvc
+
+      - name: Install cargo-xwin
+        run: |
+          curl -fsSL https://github.com/rust-cross/cargo-xwin/releases/download/v0.20.2/cargo-xwin-v0.20.2.x86_64-unknown-linux-musl.tar.gz | tar xz
+          sudo mv cargo-xwin /usr/local/bin/
+
+      - name: Cache Rust dependencies
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cargo/bin/
+            ~/.cargo/registry/index/
+            ~/.cargo/registry/cache/
+            ~/.cargo/git/db/
+            src-tauri/target/
+          key: ${{ runner.os }}-cargo-windows-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Build Windows
+        run: pnpm build:windows

.gitea/workflows/security.yml

@@ -2,11 +2,11 @@ name: Security Scan and Upload
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
   schedule:
-    - cron: '0 0 * * 1'
+    - cron: "0 0 * * 1"
   workflow_dispatch:
 
 jobs:
@@ -24,18 +24,18 @@ jobs:
         env:
           DD_URL: ${{ secrets.DD_URL }}
           DD_TOKEN: ${{ secrets.DD_TOKEN }}
-          PRODUCT_NAME: ${{ github.repository }} 
+          PRODUCT_NAME: ${{ github.repository }}
-          PRODUCT_TYPE_ID: 1 
+          PRODUCT_TYPE_ID: 1
         run: |
           sudo apt-get install jq -y > /dev/null
-          
+
           echo "Checking connection to $DD_URL..."
-          
+
           # Check if product exists - capture HTTP code to debug connection issues
           RESPONSE=$(curl --write-out "%{http_code}" --silent --output /tmp/response.json \
             -H "Authorization: Token $DD_TOKEN" \
             "$DD_URL/api/v2/products/?name=$PRODUCT_NAME")
-          
+
           # If response is not 200, print error
           if [ "$RESPONSE" != "200" ]; then
             echo "::error::Failed to query DefectDojo. HTTP Code: $RESPONSE"
@@ -44,7 +44,7 @@ jobs:
           fi
 
           COUNT=$(cat /tmp/response.json | jq -r '.count')
-          
+
           if [ "$COUNT" = "0" ]; then
             echo "Creating product '$PRODUCT_NAME'..."
             curl -s -X POST "$DD_URL/api/v2/products/" \
@@ -75,7 +75,7 @@ jobs:
           echo "Uploading Trivy results..."
           # Generate today's date in YYYY-MM-DD format
           TODAY=$(date +%Y-%m-%d)
-          
+
           HTTP_CODE=$(curl --write-out "%{http_code}" --output response.txt --silent -X POST "$DD_URL/api/v2/import-scan/" \
             -H "Authorization: Token $DD_TOKEN" \
             -F "active=true" \
@@ -86,7 +86,7 @@ jobs:
             -F "scan_date=$TODAY" \
             -F "auto_create_context=true" \
             -F "file=@trivy-results.json")
-          
+
           if [[ "$HTTP_CODE" != "200" && "$HTTP_CODE" != "201" ]]; then
             echo "::error::Upload Failed with HTTP $HTTP_CODE"
             echo "--- SERVER RESPONSE ---"
@@ -154,7 +154,7 @@ jobs:
         run: |
           echo "Uploading Semgrep results..."
           TODAY=$(date +%Y-%m-%d)
-          
+
           HTTP_CODE=$(curl --write-out "%{http_code}" --output response.txt --silent -X POST "$DD_URL/api/v2/import-scan/" \
             -H "Authorization: Token $DD_TOKEN" \
             -F "active=true" \
@@ -174,4 +174,4 @@ jobs:
              exit 1
           else
              echo "Upload Success!"
-          fi
+          fi

.prettierignore

@@ -0,0 +1,7 @@
+build/
+.svelte-kit/
+dist/
+src-tauri/target/
+node_modules/
+.pnpm-store/
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,16 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -1,7 +1,3 @@
 {
-  "recommendations": [
+  "recommendations": ["svelte.svelte-vscode", "tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
-    "svelte.svelte-vscode",
-    "tauri-apps.tauri-vscode",
-    "rust-lang.rust-analyzer"
-  ]
 }

README.md

@@ -1,176 +1 @@
-# Hikari Desktop
+tem
-
-A Linux desktop application that wraps Claude Code with an anime girl character that reacts to Claude's activities in real-time.
-
-## Features
-
-- Visual character that reflects Claude's current state (thinking, typing, searching, coding, etc.)
-- Terminal-style output display
-- Permission prompts with approve/deny interface
-- Real-time state detection from Claude Code's NDJSON stream
-
-## Installation
-
-### 1. Install Claude Code
-
-Hikari Desktop requires Claude Code to be installed and authenticated:
-
-```bash
-npm install -g @anthropic-ai/claude-code
-claude  # Follow the prompts to authenticate
-```
-
-### 2. Install Runtime Dependencies
-
-**Debian/Ubuntu:**
-```bash
-sudo apt install libwebkit2gtk-4.1-0 libgtk-3-0 libayatana-appindicator3-1 xdg-utils
-```
-
-**Fedora:**
-```bash
-sudo dnf install webkit2gtk4.1 gtk3 libappindicator-gtk3 xdg-utils
-```
-
-**Arch Linux:**
-```bash
-sudo pacman -S webkit2gtk-4.1 gtk3 libappindicator-gtk3 xdg-utils
-```
-
-| Package | Purpose |
-|---------|---------|
-| webkit2gtk-4.1 | WebView rendering (app UI) |
-| gtk3 | Window management and native widgets |
-| libappindicator | System tray support |
-| xdg-utils | Opening URLs/files with default applications |
-
-### 3. Install Hikari Desktop
-
-Download the latest release for your platform.
-
-#### Linux
-
-**AppImage** (any distro):
-```bash
-chmod +x hikari-desktop_*.AppImage
-./hikari-desktop_*.AppImage
-```
-
-**Debian/Ubuntu:**
-```bash
-sudo dpkg -i hikari-desktop_*.deb
-```
-
-**Fedora:**
-```bash
-sudo rpm -i hikari-desktop-*.rpm
-```
-
-#### Windows
-
-The Windows build requires WSL (Windows Subsystem for Linux) with Claude Code installed inside WSL.
-
-1. Install WSL if you haven't already: https://learn.microsoft.com/en-us/windows/wsl/install
-2. Install Claude Code inside your WSL distribution (see step 1 above)
-3. Run the Windows installer (`.exe` or `.msi`)
-
-## Character States
-
-| State | Trigger |
-|-------|---------|
-| Idle | Waiting for user input |
-| Thinking | Processing/API call in progress |
-| Typing | Streaming text output |
-| Searching | Using Read/Glob/Grep tools |
-| Coding | Using Edit/Write tools |
-| MCP | Running MCP tool calls |
-| Permission | Permission prompt needed |
-| Success | Task completed |
-| Error | Error occurred |
-
-## Building from Source
-
-### Prerequisites
-
-- Node.js and pnpm
-- Rust toolchain
-
-#### Windows Cross-Compilation (from Linux/WSL)
-
-To build Windows binaries from Linux, install the following:
-
-```bash
-sudo apt install nsis lld llvm clang
-```
-
-You will also need `cargo-xwin`:
-
-```bash
-cargo install cargo-xwin
-```
-
-### Build
-
-```bash
-# Install dependencies
-pnpm install
-
-# Development mode
-pnpm run dev
-
-# Build for Linux (AppImage, deb, rpm)
-pnpm build:linux
-
-# Build for Windows (exe/msi/nsis)
-pnpm build:windows
-
-# Build all platforms
-pnpm build:all
-```
-
-## Architecture
-
-```
-Linux (Tauri App)
-├── Svelte Frontend
-│   ├── AnimeGirl (sprites + animations)
-│   ├── Terminal (output display)
-│   ├── InputBar (user input)
-│   └── PermissionModal (approve/deny)
-└── Rust Backend
-    ├── Process Manager (spawn & communicate)
-    └── State Parser (NDJSON → character state)
-                │
-                │ stdin/stdout (NDJSON stream)
-                ▼
-claude -p --output-format stream-json --input-format stream-json
-```
-
-## Tech Stack
-
-- **Tauri 2.x** - Desktop framework with Rust backend
-- **Svelte 5** - Reactive frontend with runes
-- **Tailwind CSS** - Styling
-- **Tokio** - Async runtime for process management
-
-## Feedback and Bugs
-
-If you have feedback or a bug report, please feel free to open a ticket request in our [Discord](https://chat.nhcarrigan.com)!
-
-## Contributing
-
-If you would like to contribute to the project, you may create a Pull Request containing your proposed changes and we will review it as soon as we are able! Please review our [contributing guidelines](CONTRIBUTING.md) first.
-
-## Code of Conduct
-
-Before interacting with our community, please read our [Code of Conduct](CODE_OF_CONDUCT.md).
-
-## License
-
-This software is licensed under our [global software license](https://docs.nhcarrigan.com/#/license).
-
-Copyright held by Naomi Carrigan.
-
-## Contact
-
-We may be contacted through our [Chat Server](http://chat.nhcarrigan.com) or via email at `contact@nhcarrigan.com`.

eslint.config.js

@@ -0,0 +1,32 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+import svelte from "eslint-plugin-svelte";
+import prettier from "eslint-config-prettier";
+import globals from "globals";
+
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...svelte.configs["flat/recommended"],
+  prettier,
+  ...svelte.configs["flat/prettier"],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  {
+    files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"],
+    languageOptions: {
+      parserOptions: {
+        parser: tseslint.parser,
+      },
+    },
+  },
+  {
+    ignores: ["build/", ".svelte-kit/", "dist/", "src-tauri/target/", "node_modules/"],
+  }
+);

package.json

@@ -12,7 +12,14 @@
     "tauri": "tauri",
     "build:linux": "tauri build",
     "build:windows": "tauri build --runner cargo-xwin --target x86_64-pc-windows-msvc",
-    "build:all": "pnpm build:linux && pnpm build:windows"
+    "build:all": "pnpm build:linux && pnpm build:windows",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "license": "MIT",
   "dependencies": {
@@ -22,15 +29,27 @@
     "@tauri-apps/plugin-shell": "^2.3.4"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.9.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "@tailwindcss/vite": "^4.1.18",
     "@tauri-apps/cli": "^2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.14.0",
+    "globals": "^17.0.0",
+    "jsdom": "^27.4.0",
+    "prettier": "^3.8.0",
+    "prettier-plugin-svelte": "^3.4.1",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "tailwindcss": "^4.1.18",
     "typescript": "~5.6.2",
-    "vite": "^6.0.3"
+    "typescript-eslint": "^8.53.0",
+    "vite": "^6.0.3",
+    "vitest": "^4.0.17"
   }
 }

src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>

src-tauri/icons/android/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>

src-tauri/src/types.rs

@@ -1,8 +1,9 @@
 use serde::{Deserialize, Serialize};
 
-#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Default)]
 #[serde(rename_all = "snake_case")]
 pub enum CharacterState {
+    #[default]
     Idle,
     Thinking,
     Typing,
@@ -14,27 +15,17 @@ pub enum CharacterState {
     Error,
 }
 
-impl Default for CharacterState {
+#[derive(Debug, Clone, Serialize, Deserialize, Default)]
-    fn default() -> Self {
-        CharacterState::Idle
-    }
-}
-
-#[derive(Debug, Clone, Serialize, Deserialize)]
 #[serde(rename_all = "snake_case")]
 pub enum ConnectionStatus {
+    #[default]
     Disconnected,
     Connecting,
     Connected,
     Error,
 }
 
-impl Default for ConnectionStatus {
+#[allow(dead_code)]
-    fn default() -> Self {
-        ConnectionStatus::Disconnected
-    }
-}
-
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct TerminalLine {
     pub id: String,
@@ -46,6 +37,7 @@ pub struct TerminalLine {
     pub tool_name: Option<String>,
 }
 
+#[allow(dead_code)]
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct PermissionRequest {
     pub id: String,
@@ -186,3 +178,129 @@ pub struct PermissionPromptEvent {
     pub tool_input: serde_json::Value,
     pub description: String,
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_character_state_default() {
+        let state = CharacterState::default();
+        assert_eq!(state, CharacterState::Idle);
+    }
+
+    #[test]
+    fn test_connection_status_default() {
+        let status = ConnectionStatus::default();
+        matches!(status, ConnectionStatus::Disconnected);
+    }
+
+    #[test]
+    fn test_character_state_serialization() {
+        let state = CharacterState::Thinking;
+        let serialized = serde_json::to_string(&state).unwrap();
+        assert_eq!(serialized, "\"thinking\"");
+
+        let deserialized: CharacterState = serde_json::from_str(&serialized).unwrap();
+        assert_eq!(deserialized, CharacterState::Thinking);
+    }
+
+    #[test]
+    fn test_all_character_states_serialize() {
+        let states = vec![
+            (CharacterState::Idle, "\"idle\""),
+            (CharacterState::Thinking, "\"thinking\""),
+            (CharacterState::Typing, "\"typing\""),
+            (CharacterState::Searching, "\"searching\""),
+            (CharacterState::Coding, "\"coding\""),
+            (CharacterState::Mcp, "\"mcp\""),
+            (CharacterState::Permission, "\"permission\""),
+            (CharacterState::Success, "\"success\""),
+            (CharacterState::Error, "\"error\""),
+        ];
+
+        for (state, expected) in states {
+            let serialized = serde_json::to_string(&state).unwrap();
+            assert_eq!(serialized, expected, "Failed for state: {:?}", state);
+        }
+    }
+
+    #[test]
+    fn test_terminal_line_serialization() {
+        let line = TerminalLine {
+            id: "test-123".to_string(),
+            line_type: "assistant".to_string(),
+            content: "Hello, world!".to_string(),
+            timestamp: "2024-01-01T00:00:00Z".to_string(),
+            tool_name: None,
+        };
+
+        let serialized = serde_json::to_string(&line).unwrap();
+        assert!(serialized.contains("\"type\":\"assistant\""));
+        assert!(serialized.contains("\"content\":\"Hello, world!\""));
+        assert!(!serialized.contains("tool_name"));
+    }
+
+    #[test]
+    fn test_terminal_line_with_tool_name() {
+        let line = TerminalLine {
+            id: "test-456".to_string(),
+            line_type: "tool".to_string(),
+            content: "Reading file...".to_string(),
+            timestamp: "2024-01-01T00:00:00Z".to_string(),
+            tool_name: Some("Read".to_string()),
+        };
+
+        let serialized = serde_json::to_string(&line).unwrap();
+        assert!(serialized.contains("\"tool_name\":\"Read\""));
+    }
+
+    #[test]
+    fn test_content_block_text() {
+        let block = ContentBlock::Text {
+            text: "Hello!".to_string(),
+        };
+
+        let serialized = serde_json::to_string(&block).unwrap();
+        assert!(serialized.contains("\"type\":\"text\""));
+        assert!(serialized.contains("\"text\":\"Hello!\""));
+    }
+
+    #[test]
+    fn test_content_block_tool_use() {
+        let block = ContentBlock::ToolUse {
+            id: "tool-123".to_string(),
+            name: "Read".to_string(),
+            input: serde_json::json!({"file_path": "/test.txt"}),
+        };
+
+        let serialized = serde_json::to_string(&block).unwrap();
+        assert!(serialized.contains("\"type\":\"tool_use\""));
+        assert!(serialized.contains("\"name\":\"Read\""));
+    }
+
+    #[test]
+    fn test_state_change_event() {
+        let event = StateChangeEvent {
+            state: CharacterState::Coding,
+            tool_name: Some("Edit".to_string()),
+        };
+
+        let serialized = serde_json::to_string(&event).unwrap();
+        assert!(serialized.contains("\"state\":\"coding\""));
+        assert!(serialized.contains("\"tool_name\":\"Edit\""));
+    }
+
+    #[test]
+    fn test_output_event() {
+        let event = OutputEvent {
+            line_type: "assistant".to_string(),
+            content: "Test output".to_string(),
+            tool_name: None,
+        };
+
+        let serialized = serde_json::to_string(&event).unwrap();
+        assert!(serialized.contains("\"line_type\":\"assistant\""));
+        assert!(serialized.contains("\"content\":\"Test output\""));
+    }
+}

src-tauri/src/wsl_bridge.rs

@@ -472,3 +472,127 @@ pub type SharedBridge = Arc<Mutex<WslBridge>>;
 pub fn create_shared_bridge() -> SharedBridge {
     Arc::new(Mutex::new(WslBridge::new()))
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_get_tool_state_search_tools() {
+        assert!(matches!(get_tool_state("Read"), CharacterState::Searching));
+        assert!(matches!(get_tool_state("Glob"), CharacterState::Searching));
+        assert!(matches!(get_tool_state("Grep"), CharacterState::Searching));
+        assert!(matches!(get_tool_state("WebSearch"), CharacterState::Searching));
+        assert!(matches!(get_tool_state("WebFetch"), CharacterState::Searching));
+    }
+
+    #[test]
+    fn test_get_tool_state_coding_tools() {
+        assert!(matches!(get_tool_state("Edit"), CharacterState::Coding));
+        assert!(matches!(get_tool_state("Write"), CharacterState::Coding));
+        assert!(matches!(get_tool_state("NotebookEdit"), CharacterState::Coding));
+    }
+
+    #[test]
+    fn test_get_tool_state_mcp_tools() {
+        assert!(matches!(get_tool_state("mcp__github__create_issue"), CharacterState::Mcp));
+        assert!(matches!(get_tool_state("mcp__notion__search"), CharacterState::Mcp));
+    }
+
+    #[test]
+    fn test_get_tool_state_task() {
+        assert!(matches!(get_tool_state("Task"), CharacterState::Thinking));
+    }
+
+    #[test]
+    fn test_get_tool_state_unknown() {
+        assert!(matches!(get_tool_state("SomeUnknownTool"), CharacterState::Typing));
+        assert!(matches!(get_tool_state("Bash"), CharacterState::Typing));
+    }
+
+    #[test]
+    fn test_format_tool_description_read() {
+        let input = serde_json::json!({"file_path": "/home/test/file.txt"});
+        let desc = format_tool_description("Read", &input);
+        assert_eq!(desc, "Reading file: /home/test/file.txt");
+    }
+
+    #[test]
+    fn test_format_tool_description_read_no_path() {
+        let input = serde_json::json!({});
+        let desc = format_tool_description("Read", &input);
+        assert_eq!(desc, "Reading file...");
+    }
+
+    #[test]
+    fn test_format_tool_description_glob() {
+        let input = serde_json::json!({"pattern": "**/*.rs"});
+        let desc = format_tool_description("Glob", &input);
+        assert_eq!(desc, "Searching for files: **/*.rs");
+    }
+
+    #[test]
+    fn test_format_tool_description_grep() {
+        let input = serde_json::json!({"pattern": "TODO"});
+        let desc = format_tool_description("Grep", &input);
+        assert_eq!(desc, "Searching for: TODO");
+    }
+
+    #[test]
+    fn test_format_tool_description_edit() {
+        let input = serde_json::json!({"file_path": "/home/test/main.rs"});
+        let desc = format_tool_description("Edit", &input);
+        assert_eq!(desc, "Editing: /home/test/main.rs");
+    }
+
+    #[test]
+    fn test_format_tool_description_write() {
+        let input = serde_json::json!({"file_path": "/home/test/new.txt"});
+        let desc = format_tool_description("Write", &input);
+        assert_eq!(desc, "Editing: /home/test/new.txt");
+    }
+
+    #[test]
+    fn test_format_tool_description_bash_short() {
+        let input = serde_json::json!({"command": "ls -la"});
+        let desc = format_tool_description("Bash", &input);
+        assert_eq!(desc, "Running: ls -la");
+    }
+
+    #[test]
+    fn test_format_tool_description_bash_long() {
+        let long_cmd = "a".repeat(100);
+        let input = serde_json::json!({"command": long_cmd});
+        let desc = format_tool_description("Bash", &input);
+        assert!(desc.starts_with("Running: "));
+        assert!(desc.ends_with("..."));
+        assert!(desc.len() < 70);
+    }
+
+    #[test]
+    fn test_format_tool_description_unknown() {
+        let input = serde_json::json!({"some": "data"});
+        let desc = format_tool_description("CustomTool", &input);
+        assert_eq!(desc, "Using tool: CustomTool");
+    }
+
+    #[test]
+    fn test_wsl_bridge_new() {
+        let bridge = WslBridge::new();
+        assert!(!bridge.is_running());
+        assert_eq!(bridge.get_working_directory(), "");
+    }
+
+    #[test]
+    fn test_wsl_bridge_default() {
+        let bridge = WslBridge::default();
+        assert!(!bridge.is_running());
+    }
+
+    #[test]
+    fn test_create_shared_bridge() {
+        let shared = create_shared_bridge();
+        let bridge = shared.lock();
+        assert!(!bridge.is_running());
+    }
+}

src/lib/components/AnimeGirl.svelte

@@ -81,8 +81,12 @@
   </div>
 
   <div class="speech-bubble mt-4 max-w-xs">
-    <div class="relative bg-[var(--bg-secondary)] rounded-lg px-4 py-2 border border-[var(--border-color)]">
+    <div
-      <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-transparent border-b-[var(--bg-secondary)]"></div>
+      class="relative bg-[var(--bg-secondary)] rounded-lg px-4 py-2 border border-[var(--border-color)]"
+    >
+      <div
+        class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-transparent border-b-[var(--bg-secondary)]"
+      ></div>
       <p class="text-sm text-gray-300 text-center italic">{info.description}</p>
     </div>
   </div>
@@ -123,7 +127,8 @@
   }
 
   @keyframes idle-bob {
-    0%, 100% {
+    0%,
+    100% {
       transform: translateY(0);
     }
     50% {
@@ -132,7 +137,8 @@
   }
 
   @keyframes thinking-sway {
-    0%, 100% {
+    0%,
+    100% {
       transform: rotate(-2deg);
     }
     50% {
@@ -141,7 +147,8 @@
   }
 
   @keyframes typing-bounce {
-    0%, 100% {
+    0%,
+    100% {
       transform: translateY(0) scale(1);
     }
     50% {
@@ -150,7 +157,8 @@
   }
 
   @keyframes searching-look {
-    0%, 100% {
+    0%,
+    100% {
       transform: translateX(0);
     }
     25% {
@@ -162,7 +170,8 @@
   }
 
   @keyframes celebrate {
-    0%, 100% {
+    0%,
+    100% {
       transform: scale(1) rotate(0deg);
     }
     25% {
@@ -177,13 +186,21 @@
   }
 
   @keyframes shake {
-    0%, 100% {
+    0%,
+    100% {
       transform: translateX(0);
     }
-    10%, 30%, 50%, 70%, 90% {
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
       transform: translateX(-5px);
     }
-    20%, 40%, 60%, 80% {
+    20%,
+    40%,
+    60%,
+    80% {
       transform: translateX(5px);
     }
   }

src/lib/components/PermissionModal.svelte

@@ -37,7 +37,10 @@
 
       claudeStore.grantTool(approvedTool);
       const newGrantedTools = [...grantedToolsList, approvedTool];
-      claudeStore.addLine("system", `Permission granted for: ${approvedTool}. Reconnecting with context...`);
+      claudeStore.addLine(
+        "system",
+        `Permission granted for: ${approvedTool}. Reconnecting with context...`
+      );
       claudeStore.clearPermission();
 
       // Stop current session and reconnect with new permissions
@@ -97,8 +100,12 @@ Please continue where we left off and retry that action now that you have permis
 </script>
 
 {#if isVisible && permission}
-  <div class="permission-overlay fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm">
+  <div
-    <div class="permission-modal bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl">
+    class="permission-overlay fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm"
+  >
+    <div
+      class="permission-modal bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl"
+    >
       <div class="flex items-center gap-3 mb-4">
         <div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center">
           <span class="text-xl">🔐</span>
@@ -117,10 +124,14 @@ Please continue where we left off and retry that action now that you have permis
 
       <div class="mb-4">
         <div class="text-sm text-gray-400 mb-1">Tool</div>
-        <div class="px-3 py-2 bg-[var(--bg-secondary)] rounded-md text-[var(--accent-primary)] font-mono flex items-center justify-between">
+        <div
+          class="px-3 py-2 bg-[var(--bg-secondary)] rounded-md text-[var(--accent-primary)] font-mono flex items-center justify-between"
+        >
           <span>{permission.tool}</span>
           {#if isToolAlreadyGranted(permission.tool)}
-            <span class="text-xs text-green-400 bg-green-500/20 px-2 py-0.5 rounded">Already Granted</span>
+            <span class="text-xs text-green-400 bg-green-500/20 px-2 py-0.5 rounded"
+              >Already Granted</span
+            >
           {/if}
         </div>
       </div>
@@ -135,7 +146,10 @@ Please continue where we left off and retry that action now that you have permis
       {#if Object.keys(permission.input).length > 0}
         <div class="mb-6">
           <div class="text-sm text-gray-400 mb-1">Details</div>
-          <pre class="px-3 py-2 bg-[var(--bg-terminal)] rounded-md text-gray-300 text-xs overflow-x-auto max-h-32">{formatInput(permission.input)}</pre>
+          <pre
+            class="px-3 py-2 bg-[var(--bg-terminal)] rounded-md text-gray-300 text-xs overflow-x-auto max-h-32">{formatInput(
+              permission.input
+            )}</pre>
         </div>
       {/if}
 

src/lib/components/StatusBar.svelte

@@ -101,7 +101,9 @@
   }
 </script>
 
-<div class="status-bar flex items-center justify-between px-4 py-2 bg-[var(--bg-secondary)] border-b border-[var(--border-color)]">
+<div
+  class="status-bar flex items-center justify-between px-4 py-2 bg-[var(--bg-secondary)] border-b border-[var(--border-color)]"
+>
   <div class="flex items-center gap-4">
     <div class="flex items-center gap-2">
       <div class="w-2.5 h-2.5 rounded-full {getStatusColor()}"></div>
@@ -111,7 +113,8 @@
     {#if connectionStatus === "connected"}
       {#if workingDirectory}
         <div class="text-sm text-gray-500">
-          <span class="text-gray-600">cwd:</span> {workingDirectory}
+          <span class="text-gray-600">cwd:</span>
+          {workingDirectory}
         </div>
       {/if}
     {:else}
@@ -143,7 +146,9 @@
       title="Join our Discord"
     >
       <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
+        <path
+          d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
+        />
       </svg>
     </button>
     {#if appVersion}

src/lib/components/Terminal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { claudeStore, type TerminalLine } from "$lib/stores/claude";
-  import { onMount, afterUpdate } from "svelte";
+  import { afterUpdate } from "svelte";
 
   let terminalElement: HTMLDivElement;
   let shouldAutoScroll = true;
@@ -67,7 +67,9 @@
 <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="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>
@@ -82,9 +84,7 @@
     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">
+      <div class="text-gray-500 italic">Waiting for Claude... Type a message below to start!</div>
-        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)}">

src/lib/stores/character.ts

@@ -2,7 +2,7 @@ import { writable, derived } from "svelte/store";
 import { CHARACTER_STATES, type CharacterState } from "$lib/types/states";
 
 function createCharacterStore() {
-  const { subscribe, set, update } = writable<CharacterState>("idle");
+  const { subscribe, set } = writable<CharacterState>("idle");
 
   let stateTimeout: ReturnType<typeof setTimeout> | null = null;
 

src/lib/stores/claude.ts

@@ -1,9 +1,5 @@
 import { writable, derived } from "svelte/store";
-import type {
+import type { ConnectionStatus, PermissionRequest } from "$lib/types/messages";
-  ConnectionStatus,
-  PermissionRequest,
-  ClaudeStreamMessage,
-} from "$lib/types/messages";
 
 export interface TerminalLine {
   id: string;

src/lib/tauri.ts

@@ -65,7 +65,7 @@ export async function initializeTauriListeners() {
     );
   });
 
-  await listen<string>("claude:stream", (event) => {
+  await listen<string>("claude:stream", () => {
     // no-op
   });
 

src/lib/utils/stateMapper.test.ts

@@ -0,0 +1,240 @@
+import { describe, it, expect } from "vitest";
+import { mapMessageToState, extractTextFromMessage, extractToolInfo } from "./stateMapper";
+import type { ClaudeStreamMessage } from "$lib/types/messages";
+
+describe("stateMapper", () => {
+  describe("mapMessageToState", () => {
+    it("returns idle for system init message", () => {
+      const message: ClaudeStreamMessage = {
+        type: "system",
+        subtype: "init",
+        session_id: "test-session",
+        cwd: "/home/test",
+        tools: ["Read", "Write", "Edit"],
+      };
+      expect(mapMessageToState(message)).toBe("idle");
+    });
+
+    it("returns null for non-init system messages", () => {
+      const message: ClaudeStreamMessage = {
+        type: "system",
+        subtype: "compact_boundary",
+      };
+      expect(mapMessageToState(message)).toBeNull();
+    });
+
+    it("returns searching for Read tool", () => {
+      const message: ClaudeStreamMessage = {
+        type: "assistant",
+        message: {
+          content: [
+            {
+              type: "tool_use",
+              id: "tool-1",
+              name: "Read",
+              input: { file_path: "/test/file.txt" },
+            },
+          ],
+          model: "claude-3",
+          stop_reason: "tool_use",
+        },
+      };
+      expect(mapMessageToState(message)).toBe("searching");
+    });
+
+    it("returns coding for Edit tool", () => {
+      const message: ClaudeStreamMessage = {
+        type: "assistant",
+        message: {
+          content: [
+            {
+              type: "tool_use",
+              id: "tool-1",
+              name: "Edit",
+              input: { file_path: "/test/file.txt", old_string: "foo", new_string: "bar" },
+            },
+          ],
+          model: "claude-3",
+          stop_reason: "tool_use",
+        },
+      };
+      expect(mapMessageToState(message)).toBe("coding");
+    });
+
+    it("returns mcp for mcp__ prefixed tools", () => {
+      const message: ClaudeStreamMessage = {
+        type: "assistant",
+        message: {
+          content: [
+            {
+              type: "tool_use",
+              id: "tool-1",
+              name: "mcp__github__list_repos",
+              input: {},
+            },
+          ],
+          model: "claude-3",
+          stop_reason: "tool_use",
+        },
+      };
+      expect(mapMessageToState(message)).toBe("mcp");
+    });
+
+    it("returns thinking for Task tool", () => {
+      const message: ClaudeStreamMessage = {
+        type: "assistant",
+        message: {
+          content: [
+            {
+              type: "tool_use",
+              id: "tool-1",
+              name: "Task",
+              input: { prompt: "test task" },
+            },
+          ],
+          model: "claude-3",
+          stop_reason: "tool_use",
+        },
+      };
+      expect(mapMessageToState(message)).toBe("thinking");
+    });
+
+    it("returns typing for text content", () => {
+      const message: ClaudeStreamMessage = {
+        type: "assistant",
+        message: {
+          content: [{ type: "text", text: "Hello, Naomi!" }],
+          model: "claude-3",
+          stop_reason: "end_turn",
+        },
+      };
+      expect(mapMessageToState(message)).toBe("typing");
+    });
+
+    it("returns success for result success message", () => {
+      const message: ClaudeStreamMessage = {
+        type: "result",
+        subtype: "success",
+        result: "Task completed",
+      };
+      expect(mapMessageToState(message)).toBe("success");
+    });
+
+    it("returns error for result error message", () => {
+      const message: ClaudeStreamMessage = {
+        type: "result",
+        subtype: "error_max_turns",
+      };
+      expect(mapMessageToState(message)).toBe("error");
+    });
+
+    it("returns null for user messages", () => {
+      const message: ClaudeStreamMessage = {
+        type: "user",
+        message: { content: [{ type: "text", text: "Hello" }] },
+      };
+      expect(mapMessageToState(message)).toBeNull();
+    });
+  });
+
+  describe("extractTextFromMessage", () => {
+    it("extracts text from assistant message", () => {
+      const message: ClaudeStreamMessage = {
+        type: "assistant",
+        message: {
+          content: [
+            { type: "text", text: "Hello!" },
+            { type: "text", text: "How are you?" },
+          ],
+          model: "claude-3",
+          stop_reason: "end_turn",
+        },
+      };
+      expect(extractTextFromMessage(message)).toBe("Hello!\nHow are you?");
+    });
+
+    it("returns null for assistant message without text", () => {
+      const message: ClaudeStreamMessage = {
+        type: "assistant",
+        message: {
+          content: [
+            {
+              type: "tool_use",
+              id: "tool-1",
+              name: "Read",
+              input: { file_path: "/test/file.txt" },
+            },
+          ],
+          model: "claude-3",
+          stop_reason: "tool_use",
+        },
+      };
+      expect(extractTextFromMessage(message)).toBeNull();
+    });
+
+    it("extracts text from stream_event delta", () => {
+      const message: ClaudeStreamMessage = {
+        type: "stream_event",
+        event: {
+          type: "content_block_delta",
+          index: 0,
+          delta: { type: "text_delta", text: "streaming text" },
+        },
+      };
+      expect(extractTextFromMessage(message)).toBe("streaming text");
+    });
+
+    it("extracts result from result message", () => {
+      const message: ClaudeStreamMessage = {
+        type: "result",
+        subtype: "success",
+        result: "Completed successfully",
+      };
+      expect(extractTextFromMessage(message)).toBe("Completed successfully");
+    });
+  });
+
+  describe("extractToolInfo", () => {
+    it("extracts tool info from assistant message", () => {
+      const message: ClaudeStreamMessage = {
+        type: "assistant",
+        message: {
+          content: [
+            {
+              type: "tool_use",
+              id: "tool-1",
+              name: "Read",
+              input: { file_path: "/test/file.txt" },
+            },
+            {
+              type: "tool_use",
+              id: "tool-2",
+              name: "Edit",
+              input: { file_path: "/test/file.txt", old_string: "a", new_string: "b" },
+            },
+          ],
+          model: "claude-3",
+          stop_reason: "tool_use",
+        },
+      };
+      const tools = extractToolInfo(message);
+      expect(tools).toHaveLength(2);
+      expect(tools[0]).toEqual({
+        name: "Read",
+        input: { file_path: "/test/file.txt" },
+      });
+      expect(tools[1]).toEqual({
+        name: "Edit",
+        input: { file_path: "/test/file.txt", old_string: "a", new_string: "b" },
+      });
+    });
+
+    it("returns empty array for non-assistant messages", () => {
+      const message: ClaudeStreamMessage = {
+        type: "user",
+        message: { content: [{ type: "text", text: "Hello" }] },
+      };
+      expect(extractToolInfo(message)).toEqual([]);
+    });
+  });
+});

src/routes/+page.svelte

@@ -17,7 +17,9 @@
 
   <main class="flex-1 flex overflow-hidden">
     <!-- Left panel: Character display -->
-    <div class="character-panel w-1/3 flex flex-col items-center justify-center border-r border-[var(--border-color)] bg-[var(--bg-secondary)]/50">
+    <div
+      class="character-panel w-1/3 flex flex-col items-center justify-center border-r border-[var(--border-color)] bg-[var(--bg-secondary)]/50"
+    >
       <AnimeGirl />
     </div>
 
@@ -33,15 +35,17 @@
 
 <style>
   .app-container {
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-family:
+      "Inter",
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      sans-serif;
   }
 
   .character-panel {
     min-width: 320px;
-    background: linear-gradient(
+    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
-      180deg,
-      var(--bg-secondary) 0%,
-      var(--bg-primary) 100%
-    );
   }
 </style>

static/sprites/README.md

@@ -4,17 +4,17 @@ Place your anime girl sprites here! Each state needs a PNG image.
 
 ## Required Files
 
-| Filename | State | Description |
+| Filename         | State      | Description                             |
-|----------|-------|-------------|
+| ---------------- | ---------- | --------------------------------------- |
-| `idle.png` | Idle | Relaxed, waiting pose |
+| `idle.png`       | Idle       | Relaxed, waiting pose                   |
-| `thinking.png` | Thinking | Hand on chin, contemplative |
+| `thinking.png`   | Thinking   | Hand on chin, contemplative             |
-| `typing.png` | Typing | Hands on keyboard, focused |
+| `typing.png`     | Typing     | Hands on keyboard, focused              |
-| `searching.png` | Searching | With magnifying glass or looking around |
+| `searching.png`  | Searching  | With magnifying glass or looking around |
-| `coding.png` | Coding | Intense focus, maybe with glasses |
+| `coding.png`     | Coding     | Intense focus, maybe with glasses       |
-| `mcp.png` | MCP Tools | Magical aura, tech vibes |
+| `mcp.png`        | MCP Tools  | Magical aura, tech vibes                |
-| `permission.png` | Permission | Questioning look, curious expression |
+| `permission.png` | Permission | Questioning look, curious expression    |
-| `success.png` | Success | Celebrating, happy! |
+| `success.png`    | Success    | Celebrating, happy!                     |
-| `error.png` | Error | Concerned, sympathetic |
+| `error.png`      | Error      | Concerned, sympathetic                  |
 
 ## Recommended Specs
 
@@ -26,6 +26,7 @@ Place your anime girl sprites here! Each state needs a PNG image.
 ## Bonus: Animation Frames
 
 For animated states, you can add numbered frames:
+
 - `typing_1.png`, `typing_2.png`, `typing_3.png`
 - `thinking_1.png`, `thinking_2.png`
 - etc.

vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vitest/config";
+import { sveltekit } from "@sveltejs/kit/vite";
+
+export default defineConfig({
+  plugins: [sveltekit()],
+  test: {
+    include: ["src/**/*.{test,spec}.{js,ts}"],
+    environment: "jsdom",
+    setupFiles: ["./vitest.setup.ts"],
+    globals: true,
+  },
+});

vitest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";