diff --git a/LICENSE-COMMERCIAL b/LICENSE-COMMERCIAL index 6c897dabd..fe448101a 100644 --- a/LICENSE-COMMERCIAL +++ b/LICENSE-COMMERCIAL @@ -61,5 +61,5 @@ Deschutes County, United States, without regard to conflict of law principles. --- PURCHASING --- To purchase a license or inquire about Enterprise terms: - Website: https://stream-resource.dev/pricing + Website: https://cacheplane.ai/pricing Email: hello@cacheplane.ai diff --git a/README.md b/README.md index 5512bda98..532d0ce2c 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@

Angular Agent Framework — The Enterprise Streaming Resource for LangChain and Angular

- The Enterprise Streaming Resource for LangChain and Angular + The Angular Agent Framework for LangChain

@@ -27,7 +27,7 @@ --- -`streamResource()` is the Angular equivalent of LangGraph's React `useStream()` hook — a full-parity implementation built on Angular Signals and the Angular Resource API. It gives enterprise Angular teams the same production-grade streaming primitives available to React developers on LangChain, without compromises or workarounds. Drop it into any Angular 20+ component, point it at your LangGraph Platform endpoint, and get reactive, signal-driven access to streaming state, messages, tool calls, interrupts, and thread history. +`agent()` is the Angular equivalent of LangGraph's React `useStream()` hook — a full-parity implementation built on Angular Signals and the Angular Resource API. It gives enterprise Angular teams the same production-grade streaming primitives available to React developers on LangChain, without compromises or workarounds. Drop it into any Angular 20+ component, point it at your LangGraph Platform endpoint, and get reactive, signal-driven access to streaming state, messages, tool calls, interrupts, and thread history. --- @@ -45,7 +45,7 @@ npm install @cacheplane/angular ```typescript import { Component } from '@angular/core'; -import { streamResource } from '@cacheplane/angular'; +import { agent } from '@cacheplane/angular'; import type { BaseMessage } from '@langchain/core/messages'; @Component({ @@ -65,7 +65,7 @@ import type { BaseMessage } from '@langchain/core/messages'; `, }) export class ChatComponent { - chat = streamResource<{ messages: BaseMessage[] }>({ + chat = agent<{ messages: BaseMessage[] }>({ apiUrl: 'https://your-langgraph-platform.com', assistantId: 'my-agent', messagesKey: 'messages', @@ -83,7 +83,7 @@ That's it. `chat.messages()` is an Angular Signal. Bind it directly in your temp ## Feature Comparison -| Feature | `streamResource()` (Angular) | `useStream()` (React) | +| Feature | `agent()` (Angular) | `useStream()` (React) | |---|---|---| | Streaming state as reactive primitives | Angular Signals | React state | | Messages signal | `messages()` | `messages` | @@ -111,12 +111,12 @@ That's it. `chat.messages()` is an Angular Signal. Bind it directly in your temp

Angular Agent Framework architecture: Angular Component → streamResource() → StreamManager Bridge → LangGraph Platform, with signals returned reactively

-`streamResource()` creates 12 `BehaviorSubject`s at injection-context time — once, at component construction. The `StreamManager` bridge (the only file that touches `@langchain/langgraph-sdk` internals) pushes stream events into those subjects. `toSignal()` converts each subject to an Angular Signal, also at construction time. Dynamic actions (`submit`, `stop`, `switchThread`) push into the existing subjects — no new subjects are ever created after construction. This architecture is required because `toSignal()` must be called in an injection context and cannot be called again later. +`agent()` creates 12 `BehaviorSubject`s at injection-context time — once, at component construction. The `StreamManager` bridge (the only file that touches `@langchain/langgraph-sdk` internals) pushes stream events into those subjects. `toSignal()` converts each subject to an Angular Signal, also at construction time. Dynamic actions (`submit`, `stop`, `switchThread`) push into the existing subjects — no new subjects are ever created after construction. This architecture is required because `toSignal()` must be called in an injection context and cannot be called again later. --- diff --git a/cockpit/chat/input/python/docs/guide.md b/cockpit/chat/input/python/docs/guide.md index 66358d6c4..b287c04ef 100644 --- a/cockpit/chat/input/python/docs/guide.md +++ b/cockpit/chat/input/python/docs/guide.md @@ -44,7 +44,7 @@ out of the box. Listen for the `send` event: The input automatically disables while the stream is active. Access -loading state via the stream resource: +loading state via the agent ref: ```typescript protected readonly isLoading = computed(() => this.stream.status() === 'streaming'); diff --git a/cockpit/chat/interrupts/python/docs/guide.md b/cockpit/chat/interrupts/python/docs/guide.md index 0323e3201..f4d642a10 100644 --- a/cockpit/chat/interrupts/python/docs/guide.md +++ b/cockpit/chat/interrupts/python/docs/guide.md @@ -13,13 +13,13 @@ and render approval/rejection controls. - + -Set up `streamResource()` which automatically detects interrupt states +Set up `agent()` which automatically detects interrupt states from the LangGraph backend: ```typescript -protected readonly stream = streamResource({ +protected readonly stream = agent({ apiUrl: environment.langGraphApiUrl, assistantId: environment.streamingAssistantId, }); @@ -28,7 +28,7 @@ protected readonly stream = streamResource({ -Check the stream status for interrupt events. The stream resource exposes +Check the stream status for interrupt events. The agent ref exposes interrupt data when the graph pauses: ```typescript diff --git a/cockpit/chat/subagents/python/docs/guide.md b/cockpit/chat/subagents/python/docs/guide.md index 417a25456..e07e21ad2 100644 --- a/cockpit/chat/subagents/python/docs/guide.md +++ b/cockpit/chat/subagents/python/docs/guide.md @@ -28,10 +28,10 @@ graph.add_node("analysis_agent", analysis_agent) Each subagent node emits status updates that the frontend tracks. -The stream resource automatically detects node transitions: +The agent ref automatically detects node transitions: ```typescript -protected readonly stream = streamResource({ +protected readonly stream = agent({ apiUrl: environment.langGraphApiUrl, assistantId: environment.streamingAssistantId, }); diff --git a/cockpit/chat/threads/python/docs/guide.md b/cockpit/chat/threads/python/docs/guide.md index 9e654b849..76e63f435 100644 --- a/cockpit/chat/threads/python/docs/guide.md +++ b/cockpit/chat/threads/python/docs/guide.md @@ -15,11 +15,11 @@ switching between conversations. -Thread management is built into `streamResource()`. Each thread gets +Thread management is built into `agent()`. Each thread gets a unique ID that persists its conversation state: ```typescript -protected readonly stream = streamResource({ +protected readonly stream = agent({ apiUrl: environment.langGraphApiUrl, assistantId: environment.streamingAssistantId, }); diff --git a/cockpit/chat/timeline/python/docs/guide.md b/cockpit/chat/timeline/python/docs/guide.md index 40c62d4b9..cd4d03610 100644 --- a/cockpit/chat/timeline/python/docs/guide.md +++ b/cockpit/chat/timeline/python/docs/guide.md @@ -15,11 +15,11 @@ to navigate checkpoints and branch from previous conversation states. -History tracking is built into `streamResource()`. Each message exchange +History tracking is built into `agent()`. Each message exchange creates a checkpoint automatically: ```typescript -protected readonly stream = streamResource({ +protected readonly stream = agent({ apiUrl: environment.langGraphApiUrl, assistantId: environment.streamingAssistantId, }); diff --git a/cockpit/chat/timeline/python/prompts/timeline.md b/cockpit/chat/timeline/python/prompts/timeline.md index 2eaaaca16..b4ff48874 100644 --- a/cockpit/chat/timeline/python/prompts/timeline.md +++ b/cockpit/chat/timeline/python/prompts/timeline.md @@ -1,7 +1,7 @@ # Chat Timeline Assistant You are an assistant that demonstrates conversation timeline and -checkpoint navigation using stream-resource. +checkpoint navigation using the Angular agent() ref. Each message exchange creates a checkpoint in the conversation timeline. Users can navigate backward and forward through these checkpoints using diff --git a/cockpit/chat/timeline/python/src/graph.py b/cockpit/chat/timeline/python/src/graph.py index 40d552d27..99c20592e 100644 --- a/cockpit/chat/timeline/python/src/graph.py +++ b/cockpit/chat/timeline/python/src/graph.py @@ -2,7 +2,7 @@ Chat Timeline Graph A standard conversational agent. Timeline and checkpoint navigation -is managed by stream-resource on the frontend side. +is managed by the agent() ref on the frontend side. """ from pathlib import Path @@ -16,7 +16,7 @@ def build_timeline_graph(): """ Constructs a standard conversational agent. - Timeline/history navigation is handled by the stream-resource frontend. + Timeline/history navigation is handled by the Angular agent() frontend. """ llm = ChatOpenAI(model="gpt-5-mini", streaming=True) diff --git a/cockpit/render/computed-functions/python/docs/guide.md b/cockpit/render/computed-functions/python/docs/guide.md index e8299bd13..41c8defaa 100644 --- a/cockpit/render/computed-functions/python/docs/guide.md +++ b/cockpit/render/computed-functions/python/docs/guide.md @@ -71,10 +71,10 @@ const spec = { -Use `streamResource()` to receive specs with computed props from the agent: +Use `agent()` to receive specs with computed props from the agent: ```typescript -protected readonly stream = streamResource({ +protected readonly stream = agent({ apiUrl: environment.langGraphApiUrl, assistantId: environment.streamingAssistantId, }); diff --git a/cockpit/render/element-rendering/python/docs/guide.md b/cockpit/render/element-rendering/python/docs/guide.md index 5cd1decd0..f95d18586 100644 --- a/cockpit/render/element-rendering/python/docs/guide.md +++ b/cockpit/render/element-rendering/python/docs/guide.md @@ -68,10 +68,10 @@ Visibility conditions at any level control the entire subtree below. -Use `streamResource()` to receive element specs from the agent: +Use `agent()` to receive element specs from the agent: ```typescript -protected readonly stream = streamResource({ +protected readonly stream = agent({ apiUrl: environment.langGraphApiUrl, assistantId: environment.streamingAssistantId, }); diff --git a/cockpit/render/repeat-loops/python/docs/guide.md b/cockpit/render/repeat-loops/python/docs/guide.md index ad6833554..104266e09 100644 --- a/cockpit/render/repeat-loops/python/docs/guide.md +++ b/cockpit/render/repeat-loops/python/docs/guide.md @@ -77,10 +77,10 @@ store.update((draft) => { -Use `streamResource()` to receive repeat specs from the agent: +Use `agent()` to receive repeat specs from the agent: ```typescript -protected readonly stream = streamResource({ +protected readonly stream = agent({ apiUrl: environment.langGraphApiUrl, assistantId: environment.streamingAssistantId, }); diff --git a/cockpit/render/spec-rendering/python/docs/guide.md b/cockpit/render/spec-rendering/python/docs/guide.md index d836966f0..58a4ce60f 100644 --- a/cockpit/render/spec-rendering/python/docs/guide.md +++ b/cockpit/render/spec-rendering/python/docs/guide.md @@ -78,11 +78,11 @@ store.get('/name'); // Signal -Use `streamResource()` to connect to the agent and display render specs +Use `agent()` to connect to the agent and display render specs from the conversation: ```typescript -protected readonly stream = streamResource({ +protected readonly stream = agent({ apiUrl: environment.langGraphApiUrl, assistantId: environment.streamingAssistantId, }); diff --git a/docs/superpowers/plans/2026-04-09-library-consolidation.md b/docs/superpowers/plans/2026-04-09-library-consolidation.md new file mode 100644 index 000000000..56c494b9e --- /dev/null +++ b/docs/superpowers/plans/2026-04-09-library-consolidation.md @@ -0,0 +1,132 @@ +# Library Consolidation Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Remove the empty `@cacheplane/stream-resource` directory and update all stale references so the monorepo reflects 3 libraries (angular, render, chat). + +**Architecture:** Delete empty dir, find-and-replace references in README, LICENSE-COMMERCIAL, and cockpit docs. + +**Tech Stack:** Git, Markdown, Python docs + +--- + +### Task 1: Delete Empty libs/stream-resource Directory + +**Files:** +- Delete: `libs/stream-resource/` (contains only `node_modules/`) + +- [ ] **Step 1: Remove the directory** + +```bash +rm -rf libs/stream-resource +``` + +- [ ] **Step 2: Verify removal** + +```bash +ls libs/ | grep stream-resource +``` +Expected: no output + +- [ ] **Step 3: Commit** + +```bash +git add -A libs/stream-resource +git commit -m "chore: remove empty libs/stream-resource directory" +``` + +--- + +### Task 2: Update README.md + +**Files:** +- Modify: `README.md` + +Replace all `streamResource()` references with `agent()`. Update tagline from "Streaming Resource" to "Angular Agent Framework". Update the 30-Second Example, Feature Comparison table, and Architecture section to use `agent()`. + +- [ ] **Step 1: Update hero alt text and tagline** + +Old: `The Enterprise Streaming Resource for LangChain and Angular` +New: `The Angular Agent Framework for LangChain` + +- [ ] **Step 2: Update 30-Second Example** + +Replace `streamResource<{ messages: BaseMessage[] }>({...})` with `agent<{ messages: BaseMessage[] }>({...})`. Update import from `streamResource` to `agent`. + +- [ ] **Step 3: Update Feature Comparison table** + +Replace `streamResource() (Angular)` with `agent() (Angular)` in the header row. + +- [ ] **Step 4: Update Architecture section** + +Replace all `streamResource()` with `agent()` in the architecture description. + +- [ ] **Step 5: Commit** + +```bash +git add README.md +git commit -m "docs: update README to use agent() instead of streamResource()" +``` + +--- + +### Task 3: Update LICENSE-COMMERCIAL + +**Files:** +- Modify: `LICENSE-COMMERCIAL` + +- [ ] **Step 1: Update URL** + +Replace `https://stream-resource.dev/pricing` with `https://cacheplane.ai/pricing`. + +- [ ] **Step 2: Commit** + +```bash +git add LICENSE-COMMERCIAL +git commit -m "docs: update LICENSE-COMMERCIAL URL to cacheplane.ai" +``` + +--- + +### Task 4: Update Cockpit Python Docs + +**Files:** +- Modify: `cockpit/chat/timeline/python/src/graph.py` +- Modify: `cockpit/chat/timeline/python/prompts/timeline.md` +- Modify: `cockpit/chat/timeline/python/docs/guide.md` +- Modify: `cockpit/chat/threads/python/docs/guide.md` +- Modify: `cockpit/chat/subagents/python/docs/guide.md` +- Modify: `cockpit/chat/interrupts/python/docs/guide.md` +- Modify: `cockpit/chat/input/python/docs/guide.md` +- Modify: `cockpit/render/spec-rendering/python/docs/guide.md` +- Modify: `cockpit/render/repeat-loops/python/docs/guide.md` +- Modify: `cockpit/render/element-rendering/python/docs/guide.md` +- Modify: `cockpit/render/computed-functions/python/docs/guide.md` + +- [ ] **Step 1: Update all cockpit references** + +In code examples: `streamResource({` → `agent({` +In prose: "stream-resource" → "agent", "stream resource" → "agent", "The stream resource" → "The agent ref" + +- [ ] **Step 2: Commit** + +```bash +git add cockpit/ +git commit -m "docs: update cockpit guides from streamResource to agent" +``` + +--- + +### Task 5: Flag SVG Assets + +**Files:** +- Note: `apps/website/public/assets/hero.svg` +- Note: `apps/website/public/assets/arch-diagram.svg` + +These contain embedded "streamResource" text. They are generated assets that need manual regeneration — not text-editable. Add a TODO comment or note for future regeneration. + +- [ ] **Step 1: Verify SVG references** + +Confirm these are the only SVG files with stale references. + +- [ ] **Step 2: No code change needed** — flag in PR description for future regeneration. diff --git a/docs/superpowers/specs/2026-04-09-cockpit-mobile-menu-design.md b/docs/superpowers/specs/2026-04-09-cockpit-mobile-menu-design.md new file mode 100644 index 000000000..8cfc4145a --- /dev/null +++ b/docs/superpowers/specs/2026-04-09-cockpit-mobile-menu-design.md @@ -0,0 +1,136 @@ +# Cockpit Mobile Menu Redesign + +## Problem + +The cockpit mobile menu is a narrow `w-64` (256px) left-sliding drawer that leaves content peeking through on the right. It doesn't fill the screen, wastes horizontal space, and feels cramped on mobile. There is no enter/exit animation — the drawer pops in and out via conditional rendering. + +## Solution + +Replace the narrow drawer with a full-screen overlay that reimagines the navigation as product cards with topic chips. The overlay takes over the entire viewport on mobile, providing a native app-like navigation experience. + +## Design + +### New Component: `MobileNavOverlay` + +A client component at `apps/cockpit/src/components/mobile-nav-overlay.tsx`. + +**Props:** +- `navigationTree: NavigationProduct[]` — the product/section/entry tree +- `manifest: CockpitManifestEntry[]` — full manifest for the language picker +- `entry: CockpitManifestEntry` — current active entry +- `isOpen: boolean` — controlled open state +- `onClose: () => void` — callback to close the overlay + +### Layout Structure + +``` ++------------------------------------------+ +| Cockpit [Python ▾] [X] | <- Fixed header ++------------------------------------------+ +| | +| ┌──────────────────────────────────────┐ | +| │ LANGGRAPH │ | +| │ [Streaming] [Persistence] [Interrupts│ | +| │ ] [Memory] [Durable Exec] [Subgraphs│ | +| │ ] [Time Travel] [Deploy] │ | +| └──────────────────────────────────────┘ | +| | +| ┌──────────────────────────────────────┐ | +| │ RENDER │ | +| │ [*Spec Rendering*] [Element] │ | <- Scrollable body +| │ [State Mgmt] [Registry] │ | +| │ [Repeat Loops] [Computed] │ | +| └──────────────────────────────────────┘ | +| | +| ┌──────────────────────────────────────┐ | +| │ CHAT │ | +| │ [Messages] [Input] [Interrupts] │ | +| │ [Tool Calls] [Subagents] [Threads] │ | +| │ [Timeline] [Gen UI] [Debug] │ | +| │ [Theming] │ | +| └──────────────────────────────────────┘ | +| | +| ┌──────────────────────────────────────┐ | +| │ DEEP AGENTS │ | +| │ [Planning] [Filesystem] [Subagents] │ | +| │ [Memory] [Skills] [Sandboxes] │ | +| └──────────────────────────────────────┘ | ++------------------------------------------+ +``` + +### Overlay Container + +- `fixed inset-0 z-50 md:hidden` — full viewport, mobile only +- `display: flex; flex-direction: column` +- Background: `var(--ds-glass-bg)` with `backdrop-filter: blur(var(--ds-glass-blur))` + +### Header + +- Fixed at top of overlay (not scrollable) +- Left: "Cockpit" label (mono uppercase, `--ds-text-muted`) +- Right: `LanguagePicker` component (reused as-is) + close button +- Close button: X SVG, `color: var(--ds-text-muted)`, `24x24` icon with at least `44x44` touch target +- Bottom border: `1px solid var(--ds-glass-border)` + +### Product Cards + +- Vertical stack inside a scrollable container (`overflow-y: auto; flex: 1`) +- Container padding: `12px 16px` +- Card gap: `10px` +- Card styling: + - `background: var(--ds-glass-bg)` + - `border: 1px solid var(--ds-glass-border)` + - `border-radius: 10px` + - `padding: 12px` +- Product label: mono uppercase, `font-size: 0.7rem`, `font-weight: 600`, `color: var(--ds-accent)`, `margin-bottom: 8px` + +### Topic Chips + +- `display: flex; flex-wrap: wrap; gap: 6px` +- Each chip is an `` tag linking to `toCockpitPath(entry)` +- Chip styling: + - `padding: 4px 10px` + - `border-radius: 20px` + - `font-size: 0.8rem` + - `text-decoration: none` +- Default state: subtle surface background, `color: var(--ds-text-secondary)` +- Active state (current entry): `background: var(--ds-accent-surface)`, `color: var(--ds-accent)`, `border: 1px solid` with accent tint +- Topics with `topic === 'overview'` are filtered out (matching existing sidebar behavior) +- Product prefix is stripped from titles (matching existing `stripProductPrefix` logic) + +### Animation + +- Enter: opacity `0 -> 1` + `translateY(8px) -> 0`, `200ms ease-out` +- Exit: reverse, `150ms ease-in` +- Driven by `data-state="open|closing"` attribute on the overlay container +- On close: set `data-state="closing"`, wait for `transitionend`, then call `onClose` to unmount + +### Close Behavior + +- X button in header +- Chip click (navigates away, page load closes overlay) +- Escape key (keyboard listener) +- No backdrop click needed (overlay is full-screen) + +## Integration with cockpit-shell.tsx + +### Changes + +1. **Remove** the existing mobile sidebar overlay block (the `isSidebarOpen && (<>...)` JSX — backdrop div + `w-64` drawer div) +2. **Add** `` in its place, receiving `navigationTree`, `manifest={cockpitManifest}`, `entry`, `isOpen={isSidebarOpen}`, `onClose={() => setIsSidebarOpen(false)}` +3. Existing `isSidebarOpen` state and hamburger button stay unchanged — they control the new overlay + +### No Changes To + +- `CockpitSidebar` — desktop only, untouched +- `NavigationGroups` — desktop only, untouched +- `LanguagePicker` — reused inside the new overlay +- Desktop grid layout and all `md:` responsive classes +- `ModeSwitcher`, `RunMode`, `CodeMode`, or any content components + +## File Changes + +| File | Action | +|------|--------| +| `apps/cockpit/src/components/mobile-nav-overlay.tsx` | **New** — full-screen overlay component | +| `apps/cockpit/src/components/cockpit-shell.tsx` | **Modify** — swap old mobile overlay for `MobileNavOverlay` | diff --git a/docs/superpowers/specs/2026-04-09-library-consolidation-design.md b/docs/superpowers/specs/2026-04-09-library-consolidation-design.md new file mode 100644 index 000000000..153d37e32 --- /dev/null +++ b/docs/superpowers/specs/2026-04-09-library-consolidation-design.md @@ -0,0 +1,41 @@ +# Library Consolidation: Remove @cacheplane/stream-resource + +**Date:** 2026-04-09 +**Status:** Approved + +## Overview + +`@cacheplane/stream-resource` was merged into `@cacheplane/angular` during the rebrand (PR #39). The source code, Nx project, and tsconfig path mapping are already gone. What remains is the empty `libs/stream-resource/` directory and stale references across README, LICENSE-COMMERCIAL, and cockpit docs. This spec covers removing the directory and updating all references so the monorepo reflects 3 libraries (angular, render, chat) — not 4. + +## Scope + +### 1. Delete Empty Directory + +Remove `libs/stream-resource/` (contains only leftover `node_modules/`). + +### 2. README.md Updates + +The README still describes `streamResource()` as the primary API. Update to reflect the current `agent()` API: + +- Hero alt text and tagline: "Enterprise Streaming Resource" → "Enterprise Angular Agent Framework" +- 30-Second Example: `streamResource()` → `agent()`, `chat.messages()` → match current API shape +- Feature comparison table: `streamResource()` → `agent()` +- Architecture section: `streamResource()` → `agent()`, update description to match current internals + +### 3. LICENSE-COMMERCIAL URL + +Update `stream-resource.dev/pricing` → `cacheplane.ai/pricing`. + +### 4. Cockpit Python Docs + +~10 files in `cockpit/` reference "stream-resource" or "streamResource()" in prose and code examples. Update to "agent" / `agent()`. + +### 5. SVG Assets + +`hero.svg` and `arch-diagram.svg` contain embedded "streamResource" text. These are generated assets — flag for manual regeneration rather than attempting SVG text edits. + +### 6. Out of Scope + +- Historical docs in `docs/superpowers/specs/` and `docs/superpowers/plans/` — these are time-stamped records of past decisions. Leave as-is. +- Website content (`apps/website/content/docs/`) — already uses current `agent()` terminology. +- The monorepo name "stream-resource" (GitHub repo name) — renaming the repo is a separate concern.