codetraxis 1.0.1 → 1.0.2

package/README.md

@@ -14,33 +14,19 @@ Open **http://localhost:3333** — that's it.
 
 ---
 
-## Why codetraxis?
+## 🚀 Features
 
-| Problem | codetraxis |
-|---|---|
-| Switching between DevTools tabs | Everything in one UI |
-| Console logs disappearing on refresh | Persistent timeline |
-| Can't track full request lifecycle | Request + response + headers + duration |
-| No file tree in DevTools | Built-in live project explorer |
-| Hard to debug React Native / Expo | Works over WebSocket — no browser required |
-
----
-
-## Features
-
-| | Feature | Description |
-|---|---|---|
-| 📁 | **Live file tree** | Browse your project in real time — respects `.gitignore` |
-| 🧾 | **Code viewer** | Monaco-based syntax-highlighted file viewer |
-| 🌐 | **Network inspector** | `fetch` / `axios` / `XHR` — method, URL, status, body, headers, duration |
-| 🧠 | **Console timeline** | `log` / `info` / `warn` / `error` — persistent, in order |
-| ⚡ | **Real-time updates** | File changes pushed via WebSocket — no refresh needed |
-| 🔌 | **Any project** | React, React Native, Next.js, Expo, Vite, CRA, plain Node |
-| 🔒 | **100% local** | Bound to `127.0.0.1` — no data ever leaves your machine |
+* 📁 **Live file tree**: Browse your project in real time — respects `.gitignore`.
+* 🧾 **Code viewer**: Monaco-based syntax-highlighted file viewer.
+* 🌐 **Network inspector**: `fetch` / `axios` / `XHR` — method, URL, status, body, headers, duration.
+* 🧠 **Console timeline**: `log` / `info` / `warn` / `error` — persistent, in order.
+* ⚡ **Real-time updates**: File changes pushed via WebSocket — no refresh needed.
+* 🔌 **Any project**: React, React Native, Next.js, Expo, Vite, CRA, plain Node.
+* 🔒 **100% local**: Bound to `127.0.0.1` — no data ever leaves your machine.
 
 ---
 
-## Quick start
+## 📦 Quick start
 
 ```bash
 # No install needed
@@ -50,66 +36,24 @@ npx codetraxis .
 npm install -g codetraxis
 codetraxis .
 
-# Point at a specific project
+# Specific project
 codetraxis ~/projects/my-app
 
 # Custom port
 PORT=4000 codetraxis .
 ```
 
-Opens **`http://localhost:3333`** automatically.
-
----
-
-## How it works
-
-```
-Your App  (React / React Native / Next.js / Expo / etc.)
-     │
-     │  codetraxisAgent  ← auto-injected into your entry file
-     │  intercepts: console.* · fetch · axios · XMLHttpRequest
-     │  sends events over WebSocket
-     ▼
-codetraxis server  (Express + WS, 127.0.0.1:3333)
-     │  serves the browser UI as static files
-     │  exposes REST API + WebSocket endpoints
-     │  watches your project for file changes
-     ▼
-Browser  →  http://localhost:3333
-     file tree · code viewer · network inspector · console timeline
-```
-
----
-
-## CLI flags
-
-| Flag | Description |
-|---|---|
-| `[path]` | Target project directory (default: current dir) |
-| `--dev` | Dev mode — starts `ts-node-dev` + Vite dev server separately |
-| `--help` | Show usage |
-| `PORT=XXXX` | Override default port `3333` via env var |
-
-If port `3333` is busy, codetraxis automatically finds the next available port.
-
-If `server/dist` is missing, codetraxis runs `npm run build` automatically before starting.
-
 ---
 
-## Debug Agent
-
-Click **Install Agent** in the UI — codetraxis automatically injects a lightweight agent into your project's entry file.
+## 🛠 How it works
 
-The agent intercepts:
-- `console.log / info / warn / error`
-- `fetch` (web & React Native)
-- `XMLHttpRequest` (axios / RN networking)
-
-All events are sent over WebSocket and shown in real time.
+1. **Start the server**: Run `codetraxis` in your terminal. It spins up a local UI on port 3333.
+2. **Install the Agent**: Click **Install Agent** in the UI. A lightweight agent (`codetraxisAgent`) is safely injected into your project's entry file.
+3. **Debug**: The agent intercepts `console.*`, `fetch`, and `XMLHttpRequest` and sends events via WebSocket directly to your codetraxis dashboard.
 
 **Manual axios attachment** (for `axios.create()` instances):
 
-```ts
+```typescript
 import { attachAxios } from "./codetraxisAgent";
 
 attachAxios(myAxiosInstance);
@@ -117,128 +61,31 @@ attachAxios(myAxiosInstance);
 
 ---
 
-## Debug event types
-
-```
-ConsoleEvent   { type: "console", level: "log"|"info"|"warn"|"error", args[] }
-NetworkEvent   { type: "network", transport: "fetch"|"xhr"|"axios",
-                 method, url, status, requestBody, responseBody, headers,
-                 duration, state: "pending"|"success"|"error" }
-```
-
----
-
-## WebSocket endpoints
-
-| Path | Purpose |
-|---|---|
-| `/agent` | Target app agent sends events here |
-| `/debug` | Browser viewer receives relayed events |
-| `/ws` | File watcher — `tree_changed` / `file_changed` |
-
----
-
-## Security
-
-codetraxis runs **fully locally** — no data ever leaves your machine.
+## ⚙️ CLI Flags
 
-| What | Detail |
-|---|---|
-| Server bind | `127.0.0.1` only — not reachable from other machines |
-| CORS | Localhost origins only — external origins are blocked |
-| File access | Only within the directory you pass as argument |
-| On install | Nothing runs — no `postinstall` script |
-| Telemetry | None. Zero. |
-
----
-
-## Common issues
-
-| Issue | Fix |
+| Flag | Description |
 |---|---|
-| White screen in browser | Run `npm run build` — `client/dist` is missing |
-| `Cannot find module server/dist/index.js` | Run `npm run build` first |
-| Port already in use | codetraxis auto-picks the next free port |
-| Permission denied on CLI | `chmod +x bin/cli.js` |
+| `[path]` | Target project directory (default: current dir) |
+| `--dev` | Dev mode — starts `ts-node-dev` + Vite dev server separately |
+| `--help` | Show usage |
+| `PORT=XXXX` | Override default port `3333` via env var |
 
 ---
 
-## Build & develop
-
-```bash
-# Build everything (server TS → JS + Vite → static)
-npm run build
-
-# Test locally as a real user would
-npm link
-codetraxis /path/to/some-project
+## 🔒 Security
 
-# Check what gets published
-npm pack --dry-run
-
-# Publish
-npm publish
-```
-
-### What gets published
-
-```
-bin/          ← CLI entry point
-server/dist/  ← Compiled server JS
-client/dist/  ← Built React app (static)
-```
-
-Source files (`src/`, `tsconfig`, `.env`, `node_modules`) are **never** included.
+codetraxis runs fully locally.
+* **Server bind**: `127.0.0.1` only. Not reachable from external networks.
+* **File access**: Restricted to the target directory.
+* **Telemetry**: Zero. No data is collected or sent anywhere.
 
 ---
 
-## Project structure
+## ❓ Common issues
 
-```
-bin/
-  cli.js              ← CLI entry point
-
-server/src/
-  index.ts            ← HTTP server, routes, serves client/dist, starts watcher
-  routes/
-    tree.route.ts     ← GET /api/tree
-    file.route.ts     ← GET /api/file
-    agent.route.ts    ← POST/DELETE /api/agent
-  utils/
-    agent/
-      agentInstaller.ts   ← Detects project type, injects codetraxisAgent
-      debugHub.ts         ← WS relay: /agent (target) ↔ /debug (viewer)
-    watcher/
-      watcherService.ts   ← chokidar → broadcasts tree_changed / file_changed
-      gitignoreWatcher.ts ← Reloads .gitignore rules on change
-    file/
-      buildTree.ts        ← File tree JSON, respects .gitignore
-      gitignoreLoader.ts  ← Parses .gitignore patterns
-    git/
-      getGitStatus.ts     ← Git status decorations
-
-client/src/
-  pages/home/Home.tsx         ← Root layout
-  components/home/
-    leftMenu/                 ← Icon sidebar
-    leftContentTree/          ← File tree panel
-    fileViewer/               ← Monaco code viewer + preview
-    debugPanel/               ← Network & console timeline
-      components/
-        TypesPanel/           ← Generate TS interfaces from JSON responses
-        NetworkExpanded/      ← Expanded network event view
-        ConsoleExpanded/      ← Expanded console event view
-    topMenu/                  ← Project path + agent controls
-    addAgentModal/            ← Agent install modal
-    removeAgentModal/         ← Agent uninstall modal
-  redux/
-    treeSlice/                ← File tree state
-    fileSlice/                ← Open file state
-    debugSlice/               ← Debug events (max 500, upsert by id)
-  hooks/
-    useDebugSocket.ts         ← ws://host/debug → Redux
-    useProjectWatcher.ts      ← ws://host/ws → reload tree
-```
+* **White screen in browser?** Ensure you are running the latest version.
+* **Port already in use?** codetraxis will automatically pick the next available port.
+* **Permission denied?** Run `chmod +x bin/cli.js`.
 
 ---