# How to use Claude Chat

Your personal dashboard for chatting with **Claude Code** in a browser — on your
laptop or your phone — instead of the terminal. It runs on your own machine, on your
own Claude login (no API key), and keeps everything inside this one folder.

---

## Starting it up

On the laptop, in a terminal:

```sh
cd "D:\Personal Projects\Claude Chat"
npm start
```

Then open **http://localhost:8787**. Leave that terminal window open — it's the engine.
Closing it (or letting the laptop sleep) turns the dashboard off.

> **Golden rule:** if I ever change the **server** code, restart it (Ctrl+C → `npm start`).
> If only the **look** changes, just refresh the page (Ctrl+Shift+R).

---

## The screen

- **Left — Conversations:** your chats. Start new, switch, rename (double-click the
  title), or delete.
- **Middle — Chat:** type at the bottom, answers stream in live.
- **Right — Artifacts:** every file Claude creates (reports, code, HTML, etc.). Tap to
  view, or use the per-file rename / delete buttons.

On a **phone**, the side panels become slide-in drawers: tap **☰** (top-left) for
conversations and **🗂** (top-right) for artifacts.

---

## Features

### 💬 Chatting
Ask for anything — research, a written report, code, notes, a small web page. Replies
stream in as Claude works, with live status ("✍️ Writing a file… · 12s"). Markdown,
lists, and code blocks render nicely; code gets **Copy** buttons and syntax colors.
Hover (or tap) a reply for a **copy** button.

### ⏹ Stop
While Claude is replying, the send button turns into a **red stop button**. Tap it to
halt immediately — it keeps whatever was written so far.

### 🎚️ Model & Effort (top-right)
- **Model:** **Auto** (default) picks the best model for each message — quick questions
  go to Haiku, everyday tasks to Sonnet, hard/coding/long/research to Opus. Each auto
  reply shows a small "via …" note saying which model answered. You can also force a
  specific model: Opus 4.8 (smartest), Sonnet 4.6 (balanced), Haiku 4.5 (fastest).
- **Effort:** how hard Claude thinks — Low → Max. Higher = better but slower.

### 🛡️ Mode — what Claude is allowed to do (top-right)
- **🔒 Sealed** (default) — can create/edit files only inside the workspace; no shell,
  no sub-agents. Safest.
- **👁 Read-only** — research and reading only; never changes files.

### 🔬 Deep research
Tap the **🔬** button next to the input, then ask your question. Claude searches
multiple sources, cross-checks facts, and writes a **cited report** into your workspace.
Slower, but thorough. Tap 🔬 again to turn it off.

### 📎 Files & uploads
Give Claude a PDF, image, or any file three ways:
- the **＋** button next to the input,
- **drag-and-drop** a file onto the window,
- **paste** a screenshot (Ctrl+V).

Uploaded files land in `workspace/uploads/` and Claude is told about them, so you can
say things like *"summarize this PDF."*

### 🗂 Artifacts
Anything Claude writes shows up in the Artifacts panel:
- **HTML pages** open and render live (and **Open ↗** pops them into a full tab).
- **PDFs** and **images** preview inline; text/markdown render nicely.
- Hover/tap a file for **✎ rename** or **🗑 delete**; **📂** (top of the panel) opens the
  workspace folder on the laptop.

### ◷ Usage
The header shows when your rolling Claude usage window resets, and warns if you hit a
limit. (There's no per-message charge — it uses your subscription allowance.)

---

## Using it from your phone (Tailscale)

This is the part that's easy to forget — here it is for keeps.

**One-time setup**
1. Install **Tailscale** on the **laptop** (tailscale.com/download) and sign in.
2. Install the **Tailscale** app on your **phone** and sign in with the **same account**.

**Each time you want to use it on the phone**
1. Laptop: make sure it's **on, awake**, and `npm start` is running.
2. Phone: turn **Tailscale ON**.
3. Phone browser → address bar → type **`http://<laptop-tailscale-ip>:8787`**
   - the IP looks like `100.x.x.x` (find it in the Tailscale app's machine list)
   - include `http://` and `:8787`; no `www`, no `.com`
4. Enter your **passcode**.

Only your own devices can reach it — it's never exposed to the public internet.

**Keep the laptop awake** (so the phone can always reach it):
run `powercfg /change standby-timeout-ac 0` once (won't sleep while plugged in).

---

## Passcode & safety

- Your login passcode lives in **`data/config.json`**. To change it, edit the value and
  restart the server. (Empty = no login, local-only.)
- There's a **🔒 Lock** button in the conversations panel to log out.

**How Claude is contained (kept inside this folder):**
- **Cannot create, edit, or delete any file outside `workspace/`** — enforced by
  permission rules (tested). It can't touch your other folders or the app's own code.
- **No shell, no sub-agents** — it can't run programs or commands.
- **Sensitive reads blocked** — Windows system files, Program Files, and credentials
  (`~/.ssh`, `~/.aws`, …) are denied.
- **Everything is logged** — tap **🧾 Server logs** (bottom-left) to see every request and
  every file Claude reads or writes, with full paths.
- *Honest note:* native Windows has no OS-level sandbox, so Claude could still *read* an
  ordinary file elsewhere on the PC (it can't change it) — and you'd see it in the logs.
  For airtight read-isolation too, it would need to run under WSL2 (ask me).

## 🧾 Server logs
The **🧾 Server logs** button (bottom-left) shows recent activity — logins, each chat
(model/mode), every tool Claude uses with the exact file path, and results. It's also
saved to `data/server.log`, and printed live in the terminal running `npm start`.

---

## If something's off

- **Phone can't connect:** is the laptop awake with `npm start` running? Is Tailscale ON
  on both? If still stuck, it's usually Windows Firewall — ask Claude for the one-line
  fix.
- **A new feature isn't there:** restart the server (Ctrl+C → `npm start`) and
  hard-refresh the page.
- **"Port busy":** the dashboard is already running — just open the link. To use another
  port: `$env:PORT=9000; npm start`.
