@cryptiklemur/lattice 1.25.1 → 1.26.1

package/README.md

@@ -1,123 +1,136 @@
-# Lattice
+<p align="center">
+  <img src="docs/screenshots/dashboard.png" alt="Lattice Dashboard" width="720" />
+</p>
 
-Multi-machine agentic dashboard for Claude Code. Monitor sessions, manage projects, track costs, and orchestrate across mesh-networked nodes.
+<h1 align="center">Lattice</h1>
+
+<p align="center">
+  Multi-machine agentic dashboard for Claude Code.<br/>
+  Monitor sessions, manage projects, track costs, and orchestrate across mesh-networked nodes.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@cryptiklemur/lattice"><img src="https://img.shields.io/npm/v/@cryptiklemur/lattice?style=flat-square&color=blue" alt="npm version" /></a>
+  <a href="https://github.com/cryptiklemur/lattice/actions"><img src="https://img.shields.io/github/actions/workflow/status/cryptiklemur/lattice/ci.yml?style=flat-square&label=CI" alt="CI" /></a>
+  <a href="https://github.com/cryptiklemur/lattice/blob/main/LICENSE"><img src="https://img.shields.io/github/license/cryptiklemur/lattice?style=flat-square" alt="License" /></a>
+  <a href="https://github.com/cryptiklemur/lattice"><img src="https://img.shields.io/github/stars/cryptiklemur/lattice?style=flat-square" alt="Stars" /></a>
+</p>
 
 > **Alpha** — Lattice is under active development. APIs and features may change.
 
-![Dashboard](docs/screenshots/dashboard.png)
+---
 
-## What is Lattice?
+## Quick Start
 
-Lattice is a web dashboard that sits alongside your Claude Code sessions. It gives you a unified view across projects, machines, and sessions — with real-time monitoring, cost tracking, and configuration management.
+```bash
+npm install -g @cryptiklemur/lattice
+lattice
+```
 
-### Core Features
+Opens at `http://localhost:7654`. Add projects through the UI or point it at a directory with a `CLAUDE.md` file.
 
-- **Multi-project dashboard** — Fleet overview with node status, session counts, cost stats, and recent activity across all projects
-- **Real-time chat** — Send messages, approve tool use, monitor context window usage and costs with per-message token counts
-- **Session management** — Browse, rename, delete, search, and resume sessions with date range filtering and hover previews
-- **Analytics** — Cost over time, token flow, cache efficiency, session complexity, activity calendar, and 15+ chart types
-- **Cost budget** — Daily spend tracking with configurable enforcement (warning, confirm, or hard block)
-- **Theme system** — 23 base16 themes (12 dark, 11 light) with OKLCH color space for perceptual consistency
+<details>
+<summary>Install with Bun</summary>
 
-![Chat View](docs/screenshots/chat-view.png)
+```bash
+bun install -g @cryptiklemur/lattice
+lattice
+```
 
-### Productivity
+</details>
 
-- **Session tabs** — Open multiple sessions as tabs, switch between them, split-pane via right-click
-- **Message bookmarks** — Pin important messages, jump between bookmarks, global bookmarks view across all sessions
-- **Keyboard shortcuts** — Press `?` to see all shortcuts, `Ctrl+K` for command palette
-- **Message actions** — Copy messages (raw markdown or plain text), start new sessions from any message
-- **Auto-titling** — Sessions automatically get descriptive titles from the first exchange
-- **Session hover previews** — Hover any session to see cost, duration, message count, model, and last message
+<details>
+<summary>Development setup</summary>
 
-![Analytics](docs/screenshots/analytics.png)
+```bash
+git clone https://github.com/cryptiklemur/lattice.git
+cd lattice
+bun install
+bun run dev
+```
 
-### Infrastructure
+Hot-reloads both server and client automatically.
 
-- **MCP server management** — Add, edit, and remove MCP servers at global or project level
-- **Skill marketplace** — Search and install skills from [skills.sh](https://skills.sh)
-- **Mesh networking** — Connect multiple machines, proxy sessions across nodes with automatic discovery
-- **Configuration editor** — Edit CLAUDE.md, environment variables, rules, and permissions through the UI
-- **Memory management** — View and edit Claude's project memories with frontmatter metadata
+</details>
 
-![Settings](docs/screenshots/settings.png)
+---
 
-### Mobile Support
+## Features
 
-Responsive design with touch targets, swipe-to-open sidebar, and optimized layouts for mobile devices.
+### Chat & Sessions
 
-<img src="docs/screenshots/mobile-chat.png" width="300" alt="Mobile chat view" />
+Send messages, approve tool use, and monitor context window usage with per-message token counts. Browse, rename, delete, and search sessions with date range filtering and hover previews. Sessions automatically get descriptive titles from the first exchange.
 
-## Quick Start
+![Chat View](docs/screenshots/chat-view.png)
 
-### Install
+### Analytics & Cost Tracking
 
-```bash
-# With npm
-npm install -g lattice-ai
+Track spending, token usage, cache efficiency, and session patterns with 15+ chart types. Set daily cost budgets with configurable enforcement (warning, confirm, or hard block).
 
-# With bun
-bun install -g lattice-ai
-```
+![Analytics](docs/screenshots/analytics.png)
 
-### Run
+### Workspace
 
-```bash
-lattice
-```
+Open multiple sessions as tabs and switch between them. Split-pane via right-click context menu. Pin important messages with bookmarks — jump between them per-session or browse the global bookmarks view. Per-project tab state persists across navigation.
 
-Opens the dashboard at `http://localhost:7654`. Add projects through the UI or by navigating to a directory with a `CLAUDE.md` file.
+Press `?` for keyboard shortcuts, `Ctrl+K` for the command palette.
 
-### Development
+![Keyboard Shortcuts](docs/screenshots/keyboard-shortcuts.png)
 
-```bash
-git clone https://github.com/cryptiklemur/lattice.git
-cd lattice
-bun install
-bun run dev
-```
+### Themes & Settings
+
+23 base16 themes (12 dark, 11 light) with OKLCH color space. Configure MCP servers, environment variables, rules, permissions, and Claude settings through the UI.
+
+![Settings](docs/screenshots/settings.png)
+
+### Infrastructure
 
-The dev server hot-reloads both the Bun server and the Vite client automatically.
+- **Mesh networking** — Connect multiple machines with automatic discovery and session proxying
+- **MCP servers** — Add, edit, and remove at global or project level
+- **Skill marketplace** — Search and install from [skills.sh](https://skills.sh)
+- **Memory management** — View and edit Claude's project memories
+
+### Mobile
+
+Responsive design with touch targets, swipe-to-open sidebar, and optimized layouts.
+
+<img src="docs/screenshots/mobile-chat.png" width="300" alt="Mobile chat view" />
+
+---
 
 ## Architecture
 
-Lattice is a Bun monorepo with three packages:
+Bun monorepo with three packages:
 
-| Package | Description |
-|---------|------------|
-| `shared/` | TypeScript types, message protocol definitions, constants |
-| `server/` | Bun WebSocket server — session management, analytics engine, mesh networking, structured logging |
-| `client/` | React 19 + Vite + Tailwind + daisyUI — UI components, state management, 23 themes |
+| Package | Stack |
+|---------|-------|
+| `shared/` | TypeScript types, message protocol, constants |
+| `server/` | Bun WebSocket server, analytics engine, mesh networking |
+| `client/` | React 19, Vite, Tailwind, daisyUI, 23 themes |
 
-The server communicates with clients via WebSocket using a typed message protocol defined in `shared/`. Sessions are managed through the [Claude Agent SDK](https://github.com/anthropics/claude-agent-sdk). The client uses Tanstack Store for state and Tanstack Router for routing.
+Communication via typed WebSocket messages. Sessions managed through the [Claude Agent SDK](https://github.com/anthropics/claude-agent-sdk). Client state via Tanstack Store + Router.
 
 ### Security
 
-- Authentication via passphrase with scrypt hashing and 24-hour token expiration
-- Per-client WebSocket rate limiting (100 messages per 10-second window)
-- Attachment upload size limits (10MB max)
-- Bash `cd` commands boundary-checked against project directory
-- Mesh pairing tokens expire after 5 minutes
-- Graceful server shutdown with active stream draining
+| Feature | Detail |
+|---------|--------|
+| Authentication | Passphrase with scrypt hashing, 24-hour token expiration |
+| Rate limiting | 100 messages per 10-second window per client |
+| Attachments | 10MB upload limit |
+| Bash commands | `cd` boundary-checked against project directory |
+| Mesh pairing | Tokens expire after 5 minutes |
+| Shutdown | Graceful drain of active streams |
 
 ### Testing
 
-Playwright test suite covering onboarding, session flow, keyboard shortcuts, accessibility, message actions, and session previews.
-
 ```bash
-# Start the server first
-bun run dev
-
-# Run tests
-bunx playwright test
-
-# Single test file
-bunx playwright test tests/session-flow.spec.ts
+bun run dev            # start server
+bunx playwright test   # run tests
 ```
 
-## Configuration
+Playwright suite covers onboarding, session flow, keyboard shortcuts, accessibility, message actions, and session previews.
 
-Lattice stores its config at `~/.lattice/config.json`. Global Claude settings are read from `~/.claude/` and `~/.claude.json`.
+## Configuration
 
 | Path | Purpose |
 |------|---------|
@@ -125,15 +138,12 @@ Lattice stores its config at `~/.lattice/config.json`. Global Claude settings ar
 | `~/.lattice/bookmarks.json` | Message bookmarks across all sessions |
 | `~/.claude/CLAUDE.md` | Global Claude instructions |
 | `~/.claude.json` | Global MCP server configuration |
-| `~/.claude/skills/` | Global skills directory |
-
-Project-level settings are stored in each project's `.claude/` directory and `.mcp.json`.
 
-### Environment
+**Environment variables:**
 
-- `ANTHROPIC_API_KEY` — Optional. Server uses the token from `claude setup-token` if not set.
-- `DEBUG=lattice:*` — Enable structured debug logging (namespaces: server, ws, chat, session, mesh, auth, fs, analytics)
-- Server binds to `0.0.0.0:7654` by default. Override with `lattice --port <port>`.
+- `ANTHROPIC_API_KEY` — Optional. Uses `claude setup-token` if not set.
+- `DEBUG=lattice:*` — Structured debug logging.
+- Server binds to `0.0.0.0:7654`. Override with `lattice --port <port>`.
 
 ## Contributing
 

package/client/src/components/project-settings/ProjectPlugins.tsx

@@ -0,0 +1,117 @@
+import { useState, useEffect } from "react";
+import { Blocks, Loader2 } from "lucide-react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import type { ProjectSettings, ServerMessage, PluginInfo } from "@lattice/shared";
+
+interface ProjectPluginsProps {
+  settings: ProjectSettings;
+  updateSection: (section: string, data: Record<string, unknown>) => void;
+}
+
+export function ProjectPlugins({ settings, updateSection }: ProjectPluginsProps) {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var [plugins, setPlugins] = useState<PluginInfo[]>([]);
+  var [loaded, setLoaded] = useState(false);
+  var [disabledPlugins, setDisabledPlugins] = useState<string[]>(settings.disabledPlugins ?? []);
+  var [saving, setSaving] = useState(false);
+
+  useEffect(function () {
+    function handleListResult(msg: ServerMessage) {
+      if (msg.type !== "plugin:list_result") return;
+      var data = msg as { type: "plugin:list_result"; plugins: PluginInfo[] };
+      setPlugins(data.plugins);
+      setLoaded(true);
+    }
+
+    subscribe("plugin:list_result", handleListResult);
+    send({ type: "plugin:list" } as any);
+
+    return function () {
+      unsubscribe("plugin:list_result", handleListResult);
+    };
+  }, []);
+
+  useEffect(function () {
+    setDisabledPlugins(settings.disabledPlugins ?? []);
+  }, [settings.disabledPlugins]);
+
+  function handleToggle(pluginKey: string) {
+    var next: string[];
+    if (disabledPlugins.indexOf(pluginKey) !== -1) {
+      next = disabledPlugins.filter(function (k) { return k !== pluginKey; });
+    } else {
+      next = disabledPlugins.concat(pluginKey);
+    }
+    setDisabledPlugins(next);
+    setSaving(true);
+    updateSection("plugins", { disabledPlugins: next });
+    setTimeout(function () { setSaving(false); }, 500);
+  }
+
+  if (!loaded) {
+    return <div className="text-[13px] text-base-content/40 py-4">Loading...</div>;
+  }
+
+  if (plugins.length === 0) {
+    return (
+      <div className="py-6 text-center text-[13px] text-base-content/30">
+        No plugins installed. Install plugins from Global Settings to use them in projects.
+      </div>
+    );
+  }
+
+  var enabledCount = plugins.length - disabledPlugins.length;
+
+  return (
+    <div className="py-2 space-y-4">
+      <div className="flex items-center justify-between">
+        <p className="text-[12px] text-base-content/40">
+          Toggle plugins on/off for this project. Disabled plugins won't load in new sessions.
+        </p>
+        {saving && <Loader2 size={12} className="text-primary animate-spin" />}
+      </div>
+
+      <div className="text-[11px] text-base-content/30 mb-1">
+        {enabledCount} of {plugins.length} enabled
+      </div>
+
+      <div className="space-y-1.5">
+        {plugins.map(function (plugin) {
+          var isDisabled = disabledPlugins.indexOf(plugin.key) !== -1;
+          return (
+            <div
+              key={plugin.key}
+              className={
+                "flex items-center gap-3 px-3 py-2.5 rounded-xl border transition-colors duration-[120ms] " +
+                (isDisabled
+                  ? "bg-base-300/30 border-base-content/8 opacity-50"
+                  : "bg-base-300 border-base-content/15")
+              }
+            >
+              <Blocks size={14} className="text-base-content/25 flex-shrink-0" />
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-bold text-base-content truncate">{plugin.name}</span>
+                  <span className="text-[10px] font-mono px-1.5 py-0.5 rounded-md bg-base-content/8 text-base-content/40">
+                    v{plugin.version}
+                  </span>
+                </div>
+                <div className="text-[11px] text-base-content/30 mt-0.5">
+                  {plugin.marketplace}
+                  {plugin.skillCount > 0 ? " \u00B7 " + plugin.skillCount + " skill" + (plugin.skillCount !== 1 ? "s" : "") : ""}
+                </div>
+              </div>
+              <input
+                type="checkbox"
+                checked={!isDisabled}
+                onChange={function () { handleToggle(plugin.key); }}
+                className="toggle toggle-sm toggle-primary"
+                aria-label={(isDisabled ? "Enable" : "Disable") + " " + plugin.name}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/client/src/components/project-settings/ProjectSettingsView.tsx

@@ -12,6 +12,7 @@ import { ProjectRules } from "./ProjectRules";
 import { ProjectMcp } from "./ProjectMcp";
 import { ProjectMemory } from "./ProjectMemory";
 import { ProjectNotifications } from "./ProjectNotifications";
+import { ProjectPlugins } from "./ProjectPlugins";
 
 var SECTION_CONFIG: Record<string, { title: string }> = {
   general: { title: "General" },
@@ -20,6 +21,7 @@ var SECTION_CONFIG: Record<string, { title: string }> = {
   environment: { title: "Environment" },
   mcp: { title: "MCP Servers" },
   skills: { title: "Skills" },
+  plugins: { title: "Plugins" },
   rules: { title: "Rules" },
   permissions: { title: "Permissions" },
   memory: { title: "Memory" },
@@ -51,6 +53,10 @@ function renderSection(
     return <ProjectSkills settings={settings} projectSlug={projectSlug} />;
   }
 
+  if (section === "plugins") {
+    return <ProjectPlugins settings={settings} updateSection={updateSection} />;
+  }
+
   if (section === "rules") {
     return <ProjectRules settings={settings} updateSection={updateSection} />;
   }