claude-run 0.1.0 → 0.2.1

package/README.md

@@ -1,31 +1,52 @@
+<div align="center">
+
 # Claude Run
 
-A beautiful web UI for browsing Claude Code conversation history.
+Browse your Claude Code conversation history in a beautiful web UI
 
-## Quick Start
+[![npm version](https://img.shields.io/npm/v/claude-run.svg)](https://www.npmjs.com/package/claude-run)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-```bash
-npx claude-run
-```
+<img src=".github/claude-run.gif" alt="Claude Run Demo" width="800" />
 
-The browser will open automatically at http://localhost:12001.
+</div>
 
-## Installation
+<br />
+
+Run the project simply by executing
 
 ```bash
-npm install -g claude-run
+npx claude-run
 ```
 
+The browser will open automatically at http://localhost:12001.
+
 ## Features
 
 - **Real-time streaming** - Watch conversations update live as Claude responds
 - **Search** - Find sessions by prompt text or project name
 - **Filter by project** - Focus on specific projects
+- **Resume sessions** - Copy the resume command to continue any conversation in your terminal
+- **Collapsible sidebar** - Maximize your viewing area
 - **Dark mode** - Easy on the eyes
 - **Clean UI** - Familiar chat interface with collapsible tool calls
 
 ## Usage
 
+Install globally via npm:
+
+```bash
+npm install -g claude-run
+```
+
+Then run it from any directory:
+
+```bash
+claude-run
+```
+
+The browser will open automatically at http://localhost:12001, showing all your Claude Code conversations.
+
 ```bash
 claude-run [options]
 
@@ -41,10 +62,12 @@ Options:
 
 Claude Code stores conversation history in `~/.claude/`. This tool reads that data and presents it in a web interface with:
 
-1. **Session list** - All your conversations, sorted by recency
-2. **Project filter** - Focus on a specific project
-3. **Conversation view** - Full message history with tool calls
-4. **Real-time updates** - SSE streaming for live conversations
+- **Session list** - All your conversations, sorted by recency
+- **Project filter** - Focus on a specific project
+- **Conversation view** - Full message history with tool calls
+- **Session header** - Shows conversation title, project name, and timestamp
+- **Resume command** - Copies the command to resume the conversation
+- **Real-time updates** - SSE streaming for live conversations
 
 ## Requirements
 

package/dist/index.js

@@ -350,10 +350,17 @@ function offSessionChange(callback) {
 // api/server.ts
 import { join as join3, dirname } from "path";
 import { fileURLToPath } from "url";
-import { readFileSync } from "fs";
+import { readFileSync, existsSync } from "fs";
 import open2 from "open";
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = dirname(__filename);
+function getWebDistPath() {
+  const prodPath = join3(__dirname, "web");
+  if (existsSync(prodPath)) {
+    return prodPath;
+  }
+  return join3(__dirname, "..", "dist", "web");
+}
 function createServer(options) {
   const { port, claudeDir: claudeDir3, dev = false, open: shouldOpen = true } = options;
   initStorage(claudeDir3);
@@ -489,7 +496,7 @@ function createServer(options) {
       }
     });
   });
-  const webDistPath = join3(__dirname, "web");
+  const webDistPath = getWebDistPath();
   app.use("/*", serveStatic({ root: webDistPath }));
   app.get("/*", async (c) => {
     const indexPath = join3(webDistPath, "index.html");