From ab65fe164837c4379ba40d4af44c3b500b45a4ac Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Wed, 13 May 2026 17:43:46 -0700
Subject: [PATCH 1/3] docs: spec for chat-debug toggle to bottom-left + missing
 sidebar launcher

Two bugs found via browser smoke against demo.cacheplane.ai:
- popup launcher occluded by debug toggle at same bottom-right position
- chat-sidebar composition is missing the launcher button entirely

Fix: move debug pill to bottom-left, add launcher to chat-sidebar.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...6-05-13-chat-debug-launcher-left-design.md | 111 ++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-05-13-chat-debug-launcher-left-design.md

diff --git a/docs/superpowers/specs/2026-05-13-chat-debug-launcher-left-design.md b/docs/superpowers/specs/2026-05-13-chat-debug-launcher-left-design.md
new file mode 100644
index 00000000..873dcb1d
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-13-chat-debug-launcher-left-design.md
@@ -0,0 +1,111 @@
+# UI Polish — Chat Debug to Bottom-Left + Missing Sidebar Launcher — Design
+
+**Status:** Approved
+**Date:** 2026-05-13
+**Goal:** Fix two UI bugs found in the live `demo.cacheplane.ai` smoke run: (1) the `chat-debug` toggle pill occludes the popup-mode chat launcher at the bottom-right corner; (2) the sidebar-mode composition is missing its chat launcher button entirely.
+
+## Background
+
+`demo.cacheplane.ai` (Phase 2 of the canonical-demo deployment) shipped successfully and the proxy / streaming / state pipeline works end-to-end. A browser-based smoke run surfaced two bugs not catchable via API smoke:
+
+1. **Popup launcher occluded by debug toggle.** Both `chat-popup`'s launcher (white circle with chat icon, 56×56) and `chat-debug`'s status pill (36×36, green dot) anchor to `position: fixed; bottom: 20px; right: 20px`. The debug pill has `z-index: 990` and renders later in the DOM, so click events at that corner reach the debug pill, not the chat launcher. The popup never opens via its intended button. Verified by DOM inspection at the click point — `elementsFromPoint` returns `[<button aria-label="Open chat debug">, <svg>, <button class="chat-launcher-button" aria-label="Open chat">, ...]`.
+
+2. **Sidebar mode missing launcher.** `chat-popup.component.ts:62` renders `<chat-launcher-button (click)="toggle()" />` in its host template. `chat-sidebar.component.ts` does NOT — no import of `ChatLauncherButtonComponent`, no usage. The empty-state copy in `sidebar-mode.component.ts:16` promises "Click the launcher button (right edge) to slide in the chat panel" but the button is not in the DOM. Confirmed via `document.querySelector('.chat-launcher-button')` returning `null` on `/sidebar`.
+
+## Decisions Locked
+
+| Decision | Choice |
+|---|---|
+| Where to move chat-debug toggle | Bottom-left (`bottom: 20px; left: 20px`) |
+| Sidebar launcher placement | Mirror `chat-popup` exactly — `<chat-launcher-button (click)="toggle()" />` adjacent to the sliding panel |
+| Per-consumer position overrides on chat-debug | Out of scope; single hardcoded position for now |
+| Verification of unverified UX items (stop mid-stream, regenerate, model picker) | Out of scope; punt to follow-up if real users report issues |
+| Sidenav cohabitation | Accept the visual overlap with the sidenav's "ARCHIVED" footer (pill stays clickable; `position: fixed`) |
+
+## Architecture
+
+Three small, independent surfaces — all in `libs/chat`:
+
+### Fix 1 — Move chat-debug toggle to bottom-left
+
+`libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts`, lines 50–52:
+
+```css
+.launcher {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;     /* ← change to: left: 20px; */
+  ...
+}
+```
+
+Replace `right: 20px;` with `left: 20px;`. One-character spell change in property name. The `.panel--*` dock variants are unaffected — they tile against viewport edges, not the launcher.
+
+### Fix 2 — Add missing launcher to chat-sidebar composition
+
+`libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts`:
+
+1. Add import:
+   ```ts
+   import { ChatLauncherButtonComponent } from '../../primitives/chat-launcher-button/chat-launcher-button.component';
+   ```
+2. Add to component `imports` array.
+3. Render in template adjacent to the sliding `<aside>` panel:
+   ```html
+   <chat-launcher-button (click)="toggle()" />
+   ```
+4. The `toggle()` method already exists (line 82: `toggle(): void { this.open.update((v) => !v); }`).
+
+The launcher inherits the default `position: fixed; bottom: 20px; right: 20px` from `.chat-launcher-button` styles — no additional CSS needed.
+
+### Fix 3 — Verify popup launcher works after Fix 1
+
+No code change. Once the debug pill moves left, the popup's `.chat-launcher-button` becomes clickable. Verified by browser smoke in the post-merge step.
+
+## Components touched
+
+| File | Change | Lines |
+|---|---|---|
+| `libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts` | `right: 20px` → `left: 20px` in `.launcher` rule | 1 |
+| `libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts` | + import, + `imports` entry, + `<chat-launcher-button>` in template | ~3 |
+| `libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts` | + one assertion: launcher button present | ~5 |
+
+## Data Flow
+
+No new data flow. The launcher button emits `(click)` → calls `toggle()` → flips the existing `open` model signal → CSS-driven slide-in animation runs. Identical to the existing popup pattern.
+
+## Error Handling
+
+None needed. Both fixes are purely structural / cosmetic. The `toggle()` method already exists. CSS `position: fixed` doesn't fail.
+
+## Testing
+
+### Unit
+
+One new assertion in `chat-sidebar.component.spec.ts`: after rendering, `fixture.nativeElement.querySelector('.chat-launcher-button')` is not `null`. Mirrors what the popup spec asserts (if it does — confirm during implementation; if not, this is a slight precedent expansion).
+
+No unit test for the chat-debug position change. CSS changes that move a fixed-position element by a single property name aren't usefully covered by unit tests; the manual verification covers it.
+
+### Manual
+
+Add to the PR description:
+
+1. **`/embed`** — page loads, chat input visible, no overlap. Debug pill is at bottom-left. (Confirms Fix 1 doesn't break the embed flow.)
+2. **`/popup`** — bottom-right shows the white launcher circle. Click it → popup window opens with chat. Bottom-left shows the debug pill (green dot). Click debug → debug panel docks on the right. No overlap. (Confirms Fixes 1 + 3.)
+3. **`/sidebar`** — bottom-right shows a launcher circle. Click it → sidebar slides in from the right. Bottom-left shows the debug pill. (Confirms Fix 2 + Fix 1 didn't break sidebar.)
+4. **Debug panel dock controls** — open debug, switch dock from "right" to "left" to "bottom" to "right" again. All variants render correctly. (Confirms Fix 1 didn't break the docked-panel layout.)
+
+## Out of scope
+
+- Per-consumer position overrides on `chat-debug` (e.g., `--ngaf-chat-debug-launcher-x` CSS variables). YAGNI; can be a single-line refactor later if a consumer asks.
+- Verifying the unverified items from the earlier smoke run (stop mid-stream button flip, regenerate response flow, model picker dropdown). Real user reports drive the next polish pass, not speculative pre-emptive fixes.
+- Sidenav layout adjustments. The demo shell's sidenav cohabits with the debug pill; pill stays clickable because of `position: fixed`.
+- Repositioning the popup launcher to a non-default corner. Stays where it's been.
+- Adding a launcher to `chat-embed` mode (it's an inline composition; no launcher concept).
+
+## References
+
+- `libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts:50–52` — current launcher pill position
+- `libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts:62` — reference pattern for `<chat-launcher-button>` usage
+- `libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts:82` — existing `toggle()` method the new launcher button will call
+- `libs/chat/src/lib/styles/chat-launcher-button.styles.ts` — launcher button visual styles (no changes needed)

From 809c377ada376e0b78dd4364bbca32851a811e2c Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Wed, 13 May 2026 17:48:13 -0700
Subject: [PATCH 2/3] docs: plan for chat-debug-bottom-left + sidebar launcher
 fixes

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../2026-05-13-chat-debug-launcher-left.md    | 292 ++++++++++++++++++
 1 file changed, 292 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-05-13-chat-debug-launcher-left.md

diff --git a/docs/superpowers/plans/2026-05-13-chat-debug-launcher-left.md b/docs/superpowers/plans/2026-05-13-chat-debug-launcher-left.md
new file mode 100644
index 00000000..fa1e7c6a
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-13-chat-debug-launcher-left.md
@@ -0,0 +1,292 @@
+# UI Polish — Debug Toggle to Bottom-Left + Missing Sidebar Launcher 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:** Move the `chat-debug` toggle pill from bottom-right to bottom-left, and add the missing `<chat-launcher-button>` to the `chat-sidebar` composition so the sidebar mode is actually openable.
+
+**Architecture:** Two small surgical edits in `libs/chat`: a single CSS property change in `chat-debug.component.ts` (`right: 20px` → `left: 20px`), and a three-line addition to `chat-sidebar.component.ts` mirroring the existing pattern in `chat-popup.component.ts`. One new spec assertion to lock in the sidebar launcher render.
+
+**Tech Stack:** Angular 21 standalone components, signal model inputs, vitest, CSS-in-TS (template-literal styles).
+
+**Reference spec:** `docs/superpowers/specs/2026-05-13-chat-debug-launcher-left-design.md`
+
+---
+
+### Task 1: Move chat-debug launcher pill to bottom-left
+
+**Files:**
+- Modify: `libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts:52`
+
+**Context:** The `.launcher` rule in the inline `styles` template uses `position: fixed; bottom: 20px; right: 20px;`. We change `right` to `left`. No other change. The `.panel--right` / `.panel--left` / `.panel--bottom` dock variants reference their own viewport edges and are unaffected — they tile to whichever edge the user picks in the debug panel's dock controls.
+
+There is no unit test for this CSS — the style is a template literal containing CSS, and asserting that strings contain `left: 20px` rather than `right: 20px` has near-zero defect-catching value. Manual verification covers it.
+
+---
+
+- [ ] **Step 1: Locate the rule**
+
+Open `libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts` and find lines ~48–67 — the `.launcher` selector inside the inline styles template. The exact block reads:
+
+```css
+    .launcher {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      display: inline-flex;
+```
+
+- [ ] **Step 2: Change `right` to `left`**
+
+Replace `right: 20px;` with `left: 20px;` on that one line. The resulting block:
+
+```css
+    .launcher {
+      position: fixed;
+      bottom: 20px;
+      left: 20px;
+      display: inline-flex;
+```
+
+Nothing else in the file changes.
+
+- [ ] **Step 3: Run the chat-debug spec to confirm nothing broke**
+
+```
+cd libs/chat && npx vitest run src/lib/compositions/chat-debug/chat-debug.component.spec.ts
+```
+
+Expected: PASS — existing tests don't assert on launcher position, so the change is invisible to them.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts
+git commit -m "fix(chat-debug): move toggle pill to bottom-left
+
+Previously the .launcher rule anchored to bottom-right (right: 20px)
+where it collided with chat-popup's chat-launcher-button (also 56×56
+at bottom-right). The debug pill rendered later in the DOM with
+z-index: 990, so clicks at that corner reached debug — never the
+popup launcher. Moving the debug pill to the opposite corner
+(left: 20px) resolves the collision and frees up the canonical
+bottom-right slot for user-facing chat launchers.
+
+Verified via demo.cacheplane.ai browser smoke (elementsFromPoint at
+the collision point returned [debug-toggle, ..., popup-launcher]).
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 2: Add launcher button to chat-sidebar composition
+
+**Files:**
+- Modify: `libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts`
+- Modify: `libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts`
+
+**Context:** `chat-popup.component.ts:62` includes `<chat-launcher-button (click)="toggle()" />` in its template, alongside the `<chat>` composition inside the popup window. The `chat-sidebar` composition omits this entirely — there's no launcher in the DOM at all on `/sidebar`. The fix mirrors popup's pattern: add the import, register in the `imports` array, render in the template.
+
+The existing `toggle()` method on `ChatSidebarComponent` (line 82) flips the `open` model — exactly what the new launcher needs. The chat-launcher-button styles already position the button at `bottom: 20px; right: 20px` (the canonical user-facing position; debug is now out of the way after Task 1).
+
+---
+
+- [ ] **Step 1: Write the failing test**
+
+Open `libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts`. After the existing `describe('ChatSidebarComponent', () => { ... })` block's tests, add a new test (inside the same `describe`):
+
+```ts
+  it('renders a chat-launcher-button', () => {
+    const fixture = TestBed.createComponent(ChatSidebarComponent);
+    fixture.componentRef.setInput('agent', {
+      messages: () => [],
+      isLoading: () => false,
+      status: () => 'idle',
+      submit: () => Promise.resolve(),
+      reset: () => undefined,
+    });
+    fixture.detectChanges();
+    const launcher = fixture.nativeElement.querySelector('.chat-launcher-button');
+    expect(launcher).not.toBeNull();
+  });
+```
+
+The minimal agent stub is enough to satisfy `agent = input.required<Agent>()` — the rest of the component doesn't run during a single `detectChanges` if the panel isn't opened. If TypeScript complains about `setInput` arg types, cast: `fixture.componentRef.setInput('agent', stub as never)`.
+
+- [ ] **Step 2: Run to verify failure**
+
+```
+cd libs/chat && npx vitest run src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts
+```
+
+Expected: FAIL — `expected null not to be null` on the launcher query (the button isn't rendered today).
+
+- [ ] **Step 3: Add the launcher to the component**
+
+Open `libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts`. Locate the existing imports near the top:
+
+```ts
+import { ChatComponent } from '../chat/chat.component';
+```
+
+Immediately after that line, add:
+
+```ts
+import { ChatLauncherButtonComponent } from '../../primitives/chat-launcher-button/chat-launcher-button.component';
+```
+
+Locate the `@Component({ imports: [...] })` array (it currently includes `ChatComponent`). Add `ChatLauncherButtonComponent` to the array. The result should read like:
+
+```ts
+  imports: [ChatComponent, ChatLauncherButtonComponent],
+```
+
+(If the file uses a different formatting — multi-line array, alphabetized, etc. — follow the existing style.)
+
+Now locate the template. The current template renders `<div class="chat-sidebar__content"><ng-content /></div>` followed by `<aside class="chat-sidebar__panel" ...>...</aside>`. The launcher belongs as a sibling of those — typically positioned before the `<aside>`. Add the line:
+
+```html
+    <chat-launcher-button (click)="toggle()" />
+```
+
+inside the template literal, BEFORE the `<aside ...>` element, AFTER the `<div class="chat-sidebar__content">` element. The exact placement matches `chat-popup.component.ts:60–62` for consistency.
+
+- [ ] **Step 4: Run the test to confirm pass**
+
+```
+cd libs/chat && npx vitest run src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts
+```
+
+Expected: PASS — the new test green plus all existing chat-sidebar tests still green.
+
+- [ ] **Step 5: Run the full chat suite for regression check**
+
+```
+cd libs/chat && npx vitest run
+```
+
+Expected: all chat specs pass.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts \
+        libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.spec.ts
+git commit -m "fix(chat-sidebar): add missing chat-launcher-button
+
+chat-popup renders a chat-launcher-button to toggle its window
+(line 62), but chat-sidebar omitted this entirely — no import, no
+template entry. Users hitting /sidebar mode saw an empty page with
+copy promising 'click the launcher button (right edge)' but no
+button was in the DOM.
+
+Mirror the popup pattern: import ChatLauncherButtonComponent, add
+to imports[], render <chat-launcher-button (click)=\"toggle()\" />
+adjacent to the sliding panel. toggle() already exists on the
+component (line 82).
+
+Adds one spec assertion: the launcher is in the rendered DOM.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 3: Build the smoke app + open PR
+
+**Files:** None modified.
+
+**Context:** Production verification happens after merge against `demo.cacheplane.ai`. Pre-PR, we sanity-check the smoke app builds cleanly with the changes.
+
+---
+
+- [ ] **Step 1: Build the smoke app**
+
+```
+npx nx build examples-chat-angular --configuration=production
+```
+
+Expected: succeeds. No TypeScript errors. The changes are isolated to library files but Angular re-typechecks consumers transitively, so this catches any breakage.
+
+- [ ] **Step 2: Run the chat suite once more**
+
+```
+cd libs/chat && npx vitest run
+```
+
+Expected: all green.
+
+- [ ] **Step 3: Push and open PR**
+
+```bash
+git push -u origin claude/chat-debug-bottom-left
+gh pr create --title "fix(chat): debug toggle to bottom-left + missing sidebar launcher" --body "$(cat <<'EOF'
+## Summary
+
+Two UI bugs found via browser smoke against the freshly-deployed
+\`demo.cacheplane.ai\`:
+
+1. **Popup launcher occluded by debug toggle.** Both rendered at
+   \`position: fixed; bottom: 20px; right: 20px\` — debug won because
+   it has \`z-index: 990\` and renders later in the DOM. Clicks at
+   that corner hit debug, not the chat launcher.
+
+2. **Sidebar launcher missing entirely.** \`chat-popup\` includes
+   \`<chat-launcher-button (click)=\"toggle()\" />\` in its template;
+   \`chat-sidebar\` doesn't import or render the launcher at all.
+   Empty-state text on \`/sidebar\` promises a button that isn't
+   in the DOM.
+
+## Fix
+
+- Move \`chat-debug\`'s \`.launcher\` pill from \`right: 20px\` to
+  \`left: 20px\`. One-line CSS change. Frees up the canonical bottom-
+  right slot for user-facing chat launchers across all consumers.
+- Add \`<chat-launcher-button>\` to \`chat-sidebar\`'s template,
+  matching the popup pattern. One new spec assertion locks it in.
+
+## Spec & Plan
+
+- \`docs/superpowers/specs/2026-05-13-chat-debug-launcher-left-design.md\`
+- \`docs/superpowers/plans/2026-05-13-chat-debug-launcher-left.md\`
+
+## Test plan
+
+- [x] Existing chat suite passes (regression check)
+- [x] New chat-sidebar test: launcher button is rendered
+- [x] Production build of \`examples-chat-angular\` succeeds
+- [ ] After merge, browser smoke against \`demo.cacheplane.ai\`:
+  - [ ] \`/embed\` — debug pill is at bottom-left, no overlap, chat works
+  - [ ] \`/popup\` — click bottom-right launcher → popup window opens
+  - [ ] \`/sidebar\` — click bottom-right launcher → sidebar slides in
+  - [ ] Debug panel dock controls (right/left/bottom) all still work
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+EOF
+)"
+```
+
+- [ ] **Step 4: Wait for CI green, merge**
+
+Required CI checks before merge (the standard set on this repo): \`Library — lint / test / build\`, \`Website — lint / build\`, \`Cockpit — build / test\`, \`Cockpit — e2e\`, \`Cockpit — representative capability smoke\`, \`Cockpit — build all examples\`, \`Cockpit — deploy smoke dry-run\`, \`Cockpit — secret-gated integration\`, \`Website — e2e\`, \`examples/chat — python smoke\`.
+
+When all green, merge via squash:
+
+```bash
+gh pr merge <PR_NUMBER> --squash
+```
+
+Then clean up the worktree + branch.
+
+- [ ] **Step 5: Post-merge browser smoke**
+
+Open \`https://demo.cacheplane.ai\` once the post-merge deploy completes (~5 min after merge). Walk through the four manual checks from the PR test plan. If any fail, file a follow-up.
+
+---
+
+## Self-review notes
+
+- **Spec coverage:** each spec section maps to a task. Architecture → Tasks 1 + 2. "Components touched" table → Tasks 1 + 2 file lists. Testing (unit) → Task 2 Step 1. Testing (manual) → Task 3 Step 5. Out-of-scope items remain out of scope.
+- **No placeholders:** every step has final code or commands. The agent stub in Task 2 Step 1 is concrete enough for the test to pass.
+- **Type consistency:** \`ChatLauncherButtonComponent\`, \`<chat-launcher-button>\` selector, \`toggle()\` method — all spelled identically across Task 2's steps and the existing popup precedent.
+- **Risk:** the agent-stub shape (Task 2 Step 1) — if Angular complains about missing methods on the stub, cast to \`as never\` and move on. The component doesn't exercise those methods during the synchronous `detectChanges` pass that the test uses.

From c8331f2b098f65ddd683a6853568adf3b146ca53 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Wed, 13 May 2026 18:24:54 -0700
Subject: [PATCH 3/3] fix(chat): debug toggle to bottom-left + missing sidebar
 launcher
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two UI bugs found via browser smoke against the freshly-deployed
demo.cacheplane.ai:

1. **Popup launcher occluded by debug toggle.** Both rendered at
   position: fixed; bottom: 20px; right: 20px. Debug has z-index 990
   and renders later in the DOM, so clicks at that corner hit debug,
   not the chat launcher. Verified via elementsFromPoint:
   [<button aria-label='Open chat debug'>, ..., <button class='chat-launcher-button'>].

2. **Sidebar launcher missing entirely.** chat-popup.component.ts:62
   renders <chat-launcher-button (click)='toggle()' />; chat-sidebar
   omitted this completely — no import, no template entry. Users
   hitting /sidebar mode saw an empty page with copy promising
   'click the launcher button (right edge)' but no button in the DOM.

Fix:
- chat-debug: .launcher rule's `right: 20px` → `left: 20px`. Frees up
  the canonical bottom-right slot for user-facing chat launchers.
- chat-sidebar: import ChatLauncherButtonComponent, register in
  imports[], render <chat-launcher-button (click)='toggle()' />
  adjacent to the sliding panel. Mirrors the popup pattern exactly.

No new unit test — integration-style tests for these compositions
need a fully-faked Agent (the inner <chat> projection needs the
full surface). Manual browser smoke covers the click paths.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/lib/compositions/chat-debug/chat-debug.component.ts   | 2 +-
 .../lib/compositions/chat-sidebar/chat-sidebar.component.ts   | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts b/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts
index 26262cf8..7dfe22b5 100644
--- a/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts
+++ b/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts
@@ -49,7 +49,7 @@ interface TabEntry {
     .launcher {
       position: fixed;
       bottom: 20px;
-      right: 20px;
+      left: 20px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
diff --git a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts
index 36264bb5..96b60b95 100644
--- a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts
+++ b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts
@@ -4,13 +4,14 @@ import { Component, ChangeDetectionStrategy, input, model, output } from '@angul
 import type { Agent } from '../../agent';
 import type { ViewRegistry } from '@ngaf/render';
 import { ChatComponent } from '../chat/chat.component';
+import { ChatLauncherButtonComponent } from '../../primitives/chat-launcher-button/chat-launcher-button.component';
 import type { ChatSelectOption } from '../../primitives/chat-select/chat-select.component';
 import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
 
 @Component({
   selector: 'chat-sidebar',
   standalone: true,
-  imports: [ChatComponent],
+  imports: [ChatComponent, ChatLauncherButtonComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[attr.data-push]': 'pushContent() ? "true" : "false"',
@@ -54,6 +55,7 @@ import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
   `],
   template: `
     <div class="chat-sidebar__content"><ng-content /></div>
+    <chat-launcher-button (click)="toggle()" />
     <aside class="chat-sidebar__panel" [attr.data-open]="open() ? 'true' : 'false'" role="complementary" [attr.aria-hidden]="open() ? 'false' : 'true'">
       <button type="button" class="chat-sidebar__close" (click)="closeWindow()" aria-label="Close chat">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>