@tangleai/assistant 0.21.1

package/src/views.d.ts

@@ -0,0 +1,332 @@
+/**
+ * The AI assistant panel — mode 'assistant', dispatched with
+ * `$.ui.assistant` as the current node. A global slide-out on every
+ * page: a bring-your-own-key chat that drives the playground through
+ * @tangleai/agents's schema-guarded tools. Assistant replies render through
+ * the @jarenjs/md component (dogfooding); the streaming reply is plain
+ * text because it changes per token.
+ */
+/** One instance owns its datalist identifier and host copy. */
+export function createAssistantRules(modelListId: any): ({
+    match: string;
+    mode: string;
+    body: (string | {
+        class: {
+            $if: string[];
+        };
+        $if?: undefined;
+    } | (string | {
+        type: string;
+        class: string;
+        title: string;
+        'aria-label': string;
+        on: {
+            click: string;
+        };
+    } | (string | {
+        class: string;
+    })[])[] | {
+        $if: (string | (string | {
+            class: string;
+            $if?: undefined;
+        } | (string | {
+            class: string;
+        } | (string | {
+            class: string;
+        })[] | (string | {
+            type: string;
+            class: string;
+            title: string;
+            'aria-label': string;
+            on: {
+                click: string;
+            };
+        })[])[] | {
+            $if: (string | (string | {
+                class: string;
+                on: {
+                    submit: {
+                        action: string;
+                        preventDefault: boolean;
+                    };
+                };
+                $if?: undefined;
+            } | (string | {
+                class: string;
+            } | {}[] | (string | {
+                class: string;
+                on: {
+                    change: {
+                        action: string;
+                        with: {
+                            key: string;
+                        };
+                    };
+                };
+            } | {
+                $apply: string;
+            }[])[])[] | {
+                $if: (string | (string | {
+                    class: string;
+                } | {}[] | (string | {
+                    type: string;
+                    class: string;
+                    spellcheck: string;
+                    autocomplete: string;
+                    placeholder: string;
+                    value: string;
+                    on: {
+                        input: {
+                            action: string;
+                            with: {
+                                key: string;
+                            };
+                        };
+                    };
+                })[])[])[];
+                class?: undefined;
+                on?: undefined;
+            } | (string | {
+                class: string;
+            } | {}[] | (string | {
+                type: string;
+                class: string;
+                spellcheck: string;
+                placeholder: string;
+                value: string;
+                on: {
+                    input: {
+                        action: string;
+                        with: {
+                            key: string;
+                        };
+                    };
+                };
+            })[])[] | (string | {
+                class: string;
+            } | {}[] | (string | {
+                type: string;
+                class: string;
+                spellcheck: string;
+                list: any;
+                placeholder: string;
+                value: string;
+                on: {
+                    input: {
+                        action: string;
+                        with: {
+                            key: string;
+                        };
+                    };
+                };
+            })[] | (string | {
+                id: any;
+            } | {
+                $apply: string;
+            }[])[])[] | (string | {
+                class: string;
+            } | (string | {
+                type: string;
+                class: string;
+            })[] | (string | {
+                type: string;
+                class: string;
+                disabled: {
+                    $if: (string | boolean)[];
+                };
+                on: {
+                    click: string;
+                };
+                $if?: undefined;
+            } | {
+                $if: string[];
+                type?: undefined;
+                class?: undefined;
+                disabled?: undefined;
+                on?: undefined;
+            })[])[])[])[];
+            class?: undefined;
+        } | {
+            $if: (string | {
+                $if: (string | (string | {
+                    class: string;
+                    $if?: undefined;
+                } | (string | {
+                    class: string;
+                } | (string | {
+                    class: string;
+                })[] | (string | {
+                    type: string;
+                    class: string;
+                    title: string;
+                    'aria-label': string;
+                    on: {
+                        click: string;
+                    };
+                })[])[] | (string | {
+                    class: string;
+                } | {
+                    $apply: string;
+                }[])[] | {
+                    $if: (string | (string | {
+                        class: string;
+                    })[])[];
+                    class?: undefined;
+                } | (string | {
+                    class: string;
+                    $if?: undefined;
+                } | (string | {
+                    type: string;
+                    class: string;
+                    disabled: {
+                        $if: (string | boolean)[];
+                    };
+                    on: {
+                        click: string;
+                    };
+                    $if?: undefined;
+                } | {
+                    $if: string[];
+                    type?: undefined;
+                    class?: undefined;
+                    disabled?: undefined;
+                    on?: undefined;
+                })[] | {
+                    $if: (string | (string | {
+                        class: string;
+                    })[])[];
+                    class?: undefined;
+                })[])[] | (string | {
+                    class: string;
+                    on: {
+                        submit: {
+                            action: string;
+                            preventDefault: boolean;
+                        };
+                    };
+                } | (string | {
+                    type: string;
+                    class: string;
+                    spellcheck: string;
+                    placeholder: string;
+                    value: string;
+                    on: {
+                        input: string;
+                    };
+                })[] | (string | {
+                    type: string;
+                    class: string;
+                })[])[])[];
+            })[];
+            class?: undefined;
+        } | (string | {
+            class: string;
+            $if?: undefined;
+        } | {
+            $if: (string | {
+                $if: (string | (string | {
+                    class: string;
+                } | {}[])[])[];
+            })[];
+            class?: undefined;
+        } | {
+            $apply: string;
+        }[] | {
+            $if: ({
+                $and: string[];
+            } | (string | {
+                class: string;
+            } | {}[])[])[];
+            class?: undefined;
+        } | {
+            $if: (string | (string | {
+                class: string;
+            } | {}[])[])[];
+            class?: undefined;
+        } | {
+            $if: ({
+                $and: ({
+                    $eq: string[];
+                    $not?: undefined;
+                } | {
+                    $not: string;
+                    $eq?: undefined;
+                })[];
+            } | (string | {
+                class: string;
+            })[])[];
+            class?: undefined;
+        })[] | {
+            $if: (string | (string | {
+                class: string;
+                on: {
+                    submit: {
+                        action: string;
+                        preventDefault: boolean;
+                    };
+                };
+                $if?: undefined;
+            } | (string | {
+                class: string;
+                rows: number;
+                spellcheck: string;
+                placeholder: string;
+                value: string;
+                on: {
+                    input: string;
+                };
+            })[] | (string | {
+                type: string;
+                class: string;
+                disabled: {
+                    $if: (string | boolean | {
+                        $eq: string[];
+                    })[];
+                };
+                $if?: undefined;
+            } | {
+                $if: (string | {
+                    $eq: string[];
+                })[];
+                type?: undefined;
+                class?: undefined;
+                disabled?: undefined;
+            })[] | {
+                $if: (string | (string | {
+                    type: string;
+                    class: string;
+                    on: {
+                        click: string;
+                    };
+                })[])[];
+                class?: undefined;
+                on?: undefined;
+            })[])[];
+            class?: undefined;
+        })[])[];
+        class?: undefined;
+    })[];
+} | {
+    match: string;
+    mode: string;
+    body: (string | {
+        value: string;
+        selected: string;
+    })[];
+} | {
+    match: string;
+    mode: string;
+    body: (string | {
+        value: string;
+    })[];
+} | {
+    match: string;
+    mode: string;
+    body: (string | {
+        class: string;
+    } | {}[])[];
+} | {
+    match: string;
+    mode: string;
+    body: {}[];
+})[];

package/src/views.js

@@ -0,0 +1,208 @@
+//@ts-check
+/**
+ * The AI assistant panel — mode 'assistant', dispatched with
+ * `$.ui.assistant` as the current node. A global slide-out on every
+ * page: a bring-your-own-key chat that drives the playground through
+ * @tangleai/agents's schema-guarded tools. Assistant replies render through
+ * the @jarenjs/md component (dogfooding); the streaming reply is plain
+ * text because it changes per token.
+ */
+
+/** One instance owns its datalist identifier and host copy. */
+export function createAssistantRules(modelListId) {
+const settingsForm =
+  ['form', { class: 'ai-settings',
+    on: { submit: { action: 'ai/save-settings', preventDefault: true } } },
+    ['p', { class: 'ai-hint' },
+      '$.settingsHint'],
+    ['label', { class: 'ai-field' },
+      ['span', {}, 'Provider'],
+      ['select', {
+        class: 'select',
+        on: { change: { action: 'ai/setting', with: { key: 'provider' } } },
+      }, [{ $apply: '$.providers[*]' }]],
+    ],
+    { $if: ['$.settings.needsKey',
+      ['label', { class: 'ai-field' },
+        ['span', {}, 'API key'],
+        ['input', {
+          type: 'password', class: 'editor line', spellcheck: 'false',
+          autocomplete: 'off', placeholder: 'sk-…', value: '$.settings.apiKey',
+          on: { input: { action: 'ai/setting', with: { key: 'apiKey' } } },
+        }],
+      ]] },
+    ['label', { class: 'ai-field' },
+      ['span', {}, 'Base URL'],
+      ['input', {
+        type: 'text', class: 'editor line', spellcheck: 'false',
+        placeholder: 'http://localhost:11434 · https://…/v1',
+        value: '$.settings.baseUrl',
+        on: { input: { action: 'ai/setting', with: { key: 'baseUrl' } } },
+      }],
+    ],
+    ['label', { class: 'ai-field' },
+      ['span', {}, 'Model'],
+      ['input', {
+        type: 'text', class: 'editor line', spellcheck: 'false', list: modelListId,
+        placeholder: 'qwen/qwen3-4b · llama3.2 · …', value: '$.settings.model',
+        on: { input: { action: 'ai/setting', with: { key: 'model' } } },
+      }],
+      // a successful probe fills this in: the input becomes a picker
+      ['datalist', { id: modelListId }, [{ $apply: '$.settings.probe.models[*]' }]],
+    ],
+    ['div', { class: 'ai-settings-actions' },
+      ['button', { type: 'submit', class: 'btn small' }, 'Save'],
+      ['button', {
+        type: 'button', class: 'btn small',
+        disabled: { $if: ['$.settings.probe.busy', 'disabled', false] },
+        on: { click: 'ai/probe' },
+      }, { $if: ['$.settings.probe.busy', 'Testing…', 'Test connection'] }],
+    ],
+    { $if: ['$.settings.probe.ok', ['p', { class: 'ai-hint' }, '$.settings.probe.detail']] },
+    { $if: ['$.settings.probe.fail', ['p', { class: 'ai-error' }, '$.settings.probe.detail']] },
+  ];
+
+const intro = ['div', { class: 'ai-intro' }, ['p', {}, '$.intro'], ['ul', {}, [{ $apply: '$.capabilities[*]' }]]];
+
+// unconfigured: no composer to type into yet — point at the settings
+// form above instead of presenting a chat that cannot send
+const setupIntro =
+  ['div', { class: 'ai-intro' },
+    ['p', {}, 'Pick a provider above, add a model (and a key for OpenRouter), then save — the chat opens right here. Nothing leaves your browser except the calls to the provider you choose.'],
+  ];
+
+const composer =
+  ['form', { class: 'ai-composer',
+    on: { submit: { action: 'ai/send', preventDefault: true } } },
+    ['textarea', {
+      class: 'editor', rows: 2, spellcheck: 'false',
+      placeholder: 'Ask the assistant…', value: '$.draft',
+      on: { input: 'ai/draft' },
+    }],
+    ['button', {
+      type: 'submit', class: 'btn small ai-send',
+      disabled: { $if: [{ $eq: ['$.status', 'streaming'] }, 'disabled', false] },
+    }, { $if: [{ $eq: ['$.status', 'streaming'] }, '…', 'Send'] }],
+    { $if: ['$.streaming', ['button', { type: 'button', class: 'btn small', on: { click: 'ai/cancel' } }, 'Cancel']] },
+  ];
+
+// The ledger surface: one objective that outlives the tab, what has
+// been recorded against it, and the archived rounds a compacted session
+// can still reach. Without a goal it is a single input — the smallest
+// thing that can be ignored.
+const goalForm =
+  ['form', { class: 'ai-goal-set',
+    on: { submit: { action: 'ai/goal-set', preventDefault: true } } },
+    ['input', {
+      type: 'text', class: 'editor line', spellcheck: 'false',
+      placeholder: 'Set an objective the assistant keeps across sessions…',
+      value: '$.goalDraft',
+      on: { input: 'ai/goal-draft' },
+    }],
+    ['button', { type: 'submit', class: 'btn small' }, 'Set'],
+  ];
+
+const goalPanel =
+  ['div', { class: 'ai-goal' },
+    ['div', { class: 'ai-goal-head' },
+      ['span', { class: 'ai-goal-label' }, 'Objective'],
+      ['button', {
+        type: 'button', class: 'ai-icon', title: 'Clear the objective',
+        'aria-label': 'Clear the objective', on: { click: 'ai/goal-clear' },
+      }, '✕'],
+    ],
+    ['p', { class: 'ai-goal-text' }, '$.goal.objective'],
+    ['ul', { class: 'ai-goal-progress' }, [{ $apply: '$.goal.progress[*]' }]],
+    { $if: ['$.goal.checkpointLabel', ['p', { class: 'ai-hint' }, '$.goal.checkpointLabel']] },
+    { $if: ['$.goal.more', ['p', { class: 'ai-hint' }, '…and ', '$.goal.more', ' earlier entries']] },
+    ['div', { class: 'ai-goal-actions' },
+      ['button', {
+        type: 'button', class: 'btn small',
+        disabled: { $if: ['$.remembering', 'disabled', false] },
+        on: { click: 'ai/remember' },
+      }, { $if: ['$.remembering', 'Remembering…', 'Remember this session'] }],
+      { $if: ['$.memories', ['span', { class: 'ai-hint' }, '$.memoryLabel']] },
+    ],
+    { $if: ['$.remembered', ['p', { class: 'ai-hint' }, '$.remembered']] },
+  ];
+
+const panel =
+  ['div', { class: 'ai-panel' },
+    ['div', { class: 'ai-head' },
+      ['span', { class: 'ai-title' }, '$.title'],
+      ['button', {
+        type: 'button', class: 'ai-icon', title: 'Settings',
+        'aria-label': 'Assistant settings', on: { click: 'ai/settings-toggle' },
+      }, '⚙'],
+      ['button', {
+        type: 'button', class: 'ai-icon', title: 'Clear the conversation',
+        'aria-label': 'Clear conversation', on: { click: 'ai/clear' },
+      }, '⌫'],
+      ['button', {
+        type: 'button', class: 'ai-icon', title: 'Close',
+        'aria-label': 'Close assistant', on: { click: 'ai/toggle' },
+      }, '✕'],
+    ],
+    { $if: ['$.showSettings', settingsForm] },
+    { $if: ['$.configured', { $if: ['$.goal', goalPanel, goalForm] }] },
+    ['div', { class: 'ai-log' },
+      { $if: ['$.empty', { $if: ['$.configured', intro, setupIntro] }] },
+      [{ $apply: '$.messages[*]' }],
+      { $if: [{ $and: ['$.streaming', '$.pending'] },
+        ['div', { class: 'ai-msg assistant' }, ['p', {}, '$.pending']]] },
+      { $if: ['$.activity',
+        ['p', { class: 'ai-activity' }, 'Running ', ['code', {}, '$.activity'], '…']] },
+      { $if: [{ $and: [{ $eq: ['$.status', 'streaming'] }, { $not: '$.pending' }, { $not: '$.activity' }] },
+        ['p', { class: 'ai-activity' }, '$.thinkingLabel']] },
+      { $if: ['$.error', ['p', { class: 'ai-error' }, '$.error']] },
+      // a compacted session says so: the rounds that left the request are
+      // in slots with addresses, not gone, and the panel is where that
+      // stops being an implementation detail
+      { $if: ['$.persistenceLabel', ['p', { class: 'ai-archived' }, '$.persistenceLabel']] },
+      { $if: ['$.retentionLabel', ['p', { class: 'ai-archived' }, '$.retentionLabel']] },
+      { $if: ['$.archived', ['p', { class: 'ai-archived' }, '$.archivedLabel']] },
+    ],
+    { $if: ['$.configured', composer] },
+  ];
+
+return [
+  {
+    match: '$.ui.assistant', mode: 'assistant',
+    body: ['div', { class: { $if: ['$.open', 'ai open', 'ai'] } },
+      ['button', {
+        type: 'button', class: 'ai-launch', title: '$.launchTitle',
+        'aria-label': '$.launchTitle', on: { click: 'ai/toggle' },
+      }, '✦', ['span', { class: 'ai-launch-label' }, '$.launchLabel']],
+      { $if: ['$.open', panel] },
+    ],
+  },
+  { match: '$.ui.assistant.capabilities[*]', mode: 'assistant', body: ['li', {}, '$.text'] },
+  {
+    match: '$.ui.assistant.providers[*]', mode: 'assistant',
+    body: ['option', { value: '$.value', selected: '$.selected' }, '$.label'],
+  },
+  {
+    match: '$.ui.assistant.settings.probe.models[*]', mode: 'assistant',
+    body: ['option', { value: '$.id' }],
+  },
+  {
+    match: "$.ui.assistant.messages[?@.role == 'user']", mode: 'assistant',
+    body: ['div', { class: 'ai-msg user' }, ['p', {}, '$.text']],
+  },
+  {
+    // the assistant reply is a ready-made @jarenjs/md vnode, spliced
+    // in verbatim (no dispatch into it)
+    match: "$.ui.assistant.messages[?@.role == 'assistant']", mode: 'assistant',
+    body: ['div', { class: 'ai-msg assistant' }, '$.article'],
+  },
+  {
+    // one recorded step towards the objective. The evidence is shown
+    // beside the note, always: a progress log of unevidenced claims is
+    // exactly what the ledger's schema refuses to store, and the panel
+    // should not present one either.
+    match: '$.ui.assistant.goal.progress[*]', mode: 'assistant',
+    body: ['li', {}, '$.note', ['span', { class: 'ai-evidence' }, '$.evidence']],
+  },
+];
+
+}

package/styles/assistant.css

@@ -0,0 +1,115 @@
+/* ---- the AI assistant slide-out (@tangleai/assistant) ---- */
+:where(.tangle-assistant) .ai-launch {
+  position: fixed; right: var(--space-5, 1.25rem); bottom: var(--space-5, 1.25rem); z-index: 150;
+  min-height: 2.75rem; /* primary tap target (DESIGN §5) */
+  border: 1px solid var(--accent, #3b82f6); border-radius: 999px;
+  padding: var(--space-2, .5rem) var(--space-4, 1rem); font-size: 0.9rem; font-weight: 600;
+  background: var(--accent, #3b82f6); color: var(--accent-fg, white); cursor: pointer;
+  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
+}
+:where(.tangle-assistant) .ai-launch:hover { background: var(--accent-hover, #2563eb); border-color: var(--accent-hover, #2563eb); }
+:where(.tangle-assistant) .ai.open .ai-launch { display: none; }
+:where(.tangle-assistant) .ai-panel {
+  position: fixed; right: var(--space-5, 1.25rem); bottom: var(--space-5, 1.25rem); z-index: 150;
+  display: flex; flex-direction: column; width: min(28rem, calc(100vw - 2 * var(--space-5, 1.25rem)));
+  max-height: min(40rem, calc(100dvh - 2 * var(--space-5, 1.25rem)));
+  background: var(--surface, #fff); border: 1px solid var(--border, #d6dae1); border-radius: var(--radius, .625rem);
+  box-shadow: 0 12px 40px rgb(0 0 0 / 0.22); overflow: hidden;
+}
+:where(.tangle-assistant) .ai-head {
+  display: flex; align-items: center; gap: var(--space-2, .5rem);
+  padding: var(--space-3, .75rem) var(--space-4, 1rem); border-bottom: 1px solid var(--border, #d6dae1);
+}
+:where(.tangle-assistant) .ai-title { font-weight: 700; margin-right: auto; }
+:where(.tangle-assistant) .ai-icon {
+  border: 0; background: transparent; color: var(--muted, #596273); cursor: pointer;
+  width: 2.75rem; height: 2.75rem; /* primary tap targets (DESIGN §5) */
+  border-radius: var(--radius-sm, .5rem); font-size: 1rem;
+}
+:where(.tangle-assistant) .ai-icon:hover { color: var(--accent, #3b82f6); background: var(--accent-soft, #eff6ff); }
+:where(.tangle-assistant) .ai-settings {
+  display: flex; flex-direction: column; gap: var(--space-3, .75rem);
+  padding: var(--space-4, 1rem); border-bottom: 1px solid var(--border, #d6dae1);
+}
+:where(.tangle-assistant) .ai-hint { color: var(--muted, #596273); font-size: 0.82rem; margin: 0; }
+:where(.tangle-assistant) .ai-field { display: flex; flex-direction: column; gap: var(--space-1, .25rem); font-size: 0.85rem; }
+:where(.tangle-assistant) .ai-field > span { color: var(--muted, #596273); }
+:where(.tangle-assistant) .ai-settings .btn { align-self: flex-start; }
+:where(.tangle-assistant) .ai-settings-actions { display: flex; gap: var(--space-2, .5rem); }
+/* the ledger surface: the objective that outlives the tab, its evidenced
+   progress, and what a compacted session can still recall */
+:where(.tangle-assistant) .ai-goal, :where(.tangle-assistant) .ai-goal-set {
+  display: flex; gap: var(--space-2, .5rem);
+  padding: var(--space-3, .75rem) var(--space-4, 1rem); border-bottom: 1px solid var(--border, #d6dae1);
+}
+:where(.tangle-assistant) .ai-goal { flex-direction: column; }
+:where(.tangle-assistant) .ai-goal-set > input { flex: 1; min-width: 0; }
+:where(.tangle-assistant) .ai-goal-head { display: flex; align-items: center; gap: var(--space-2, .5rem); }
+:where(.tangle-assistant) .ai-goal-label {
+  color: var(--muted, #596273); font-size: 0.75rem; font-weight: 600;
+  letter-spacing: 0.04em; text-transform: uppercase; margin-right: auto;
+}
+:where(.tangle-assistant) .ai-goal-text { margin: 0; font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
+:where(.tangle-assistant) .ai-goal-progress {
+  margin: 0; padding-left: var(--space-5, 1.25rem);
+  color: var(--muted, #596273); font-size: 0.82rem;
+}
+:where(.tangle-assistant) .ai-goal-progress li { margin: var(--space-1, .25rem) 0; overflow-wrap: anywhere; }
+:where(.tangle-assistant) .ai-goal-progress:empty { display: none; }
+:where(.tangle-assistant) .ai-evidence { display: block; color: var(--muted, #596273); font-size: 0.75rem; font-style: italic; }
+:where(.tangle-assistant) .ai-goal-actions { display: flex; align-items: center; gap: var(--space-2, .5rem); flex-wrap: wrap; }
+:where(.tangle-assistant) .ai-log {
+  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  display: flex; flex-direction: column; gap: var(--space-3, .75rem); padding: var(--space-4, 1rem);
+}
+:where(.tangle-assistant) .ai-archived {
+  color: var(--muted, #596273); font-size: 0.78rem; margin: 0;
+  border-top: 1px dashed var(--border, #d6dae1); padding-top: var(--space-2, .5rem);
+}
+:where(.tangle-assistant) .ai-intro { color: var(--muted, #596273); font-size: 0.88rem; }
+:where(.tangle-assistant) .ai-intro ul { margin: var(--space-2, .5rem) 0 0; padding-left: var(--space-5, 1.25rem); }
+:where(.tangle-assistant) .ai-intro li { margin: var(--space-1, .25rem) 0; }
+:where(.tangle-assistant) .ai-msg { border-radius: var(--radius-sm, .5rem); padding: var(--space-2, .5rem) var(--space-3, .75rem); font-size: 0.9rem; }
+:where(.tangle-assistant) .ai-msg.user { background: var(--accent-soft, #eff6ff); color: var(--fg, #182230); align-self: flex-end; max-width: 85%; }
+:where(.tangle-assistant) .ai-msg.user p { margin: 0; overflow-wrap: anywhere; }
+:where(.tangle-assistant) .ai-msg.assistant { background: transparent; padding-inline: 0; }
+:where(.tangle-assistant) .ai-msg.assistant .md { font-size: 0.9rem; }
+:where(.tangle-assistant) .ai-activity { color: var(--muted, #596273); font-size: 0.82rem; margin: 0; }
+:where(.tangle-assistant) .ai-error {
+  color: var(--fail, #bd2525); background: var(--fail-soft, #fff0f0); border-radius: var(--radius-sm, .5rem);
+  padding: var(--space-2, .5rem) var(--space-3, .75rem); font-size: 0.85rem; margin: 0;
+}
+:where(.tangle-assistant) .ai-composer {
+  display: flex; gap: var(--space-2, .5rem); align-items: flex-end;
+  padding: var(--space-3, .75rem) var(--space-4, 1rem); border-top: 1px solid var(--border, #d6dae1);
+}
+:where(.tangle-assistant) .ai-composer .editor { flex: 1; min-height: auto; }
+:where(.tangle-assistant) .ai-send[disabled] { opacity: 0.6; cursor: default; }
+@media (max-width: 760px) {
+  :where(.tangle-assistant) .ai-panel {
+    right: 0; bottom: 0; left: 0; width: 100vw;
+    max-height: 85dvh; border-radius: var(--radius, .625rem) var(--radius, .625rem) 0 0;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  :where(.tangle-assistant) .ai-launch { right: var(--space-4, 1rem); bottom: var(--space-4, 1rem); }
+}
+/* small phones: the labeled pill is wide enough to sit on the hero CTA
+   or the calculator plot at some fold positions — collapse it to a
+   round icon-only launcher (the aria-label carries the name; the
+   2.75rem primary tap target holds, DESIGN §5) */
+@media (max-width: 480px) {
+  :where(.tangle-assistant) .ai-launch {
+    width: 2.75rem; height: 2.75rem; padding: 0;
+    display: grid; place-items: center; font-size: 1.05rem;
+  }
+  :where(.tangle-assistant) .ai-launch-label { display: none; }
+}
+
+
+:where(.tangle-assistant) { font-family: var(--font, system-ui, sans-serif); color: var(--fg, #182230); line-height: 1.5; }
+:where(.tangle-assistant) *, :where(.tangle-assistant) *::before, :where(.tangle-assistant) *::after { box-sizing: border-box; }
+:where(.tangle-assistant) .btn, :where(.tangle-assistant) .select { min-height: 2.75rem; border: 1px solid var(--border, #d6dae1); border-radius: .5rem; padding: .4rem .75rem; color: var(--fg, #182230); background: var(--surface, white); font: inherit; cursor: pointer; }
+:where(.tangle-assistant) .editor { display: block; width: 100%; min-width: 0; border: 1px solid var(--border, #d6dae1); border-radius: .5rem; background: var(--bg, white); color: var(--fg, #182230); font: inherit; padding: .5rem .75rem; }
+:where(.tangle-assistant) .editor.line { min-height: 2.75rem; }
+:where(.tangle-assistant) :focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
+:where(.tangle-assistant) button:disabled { opacity: .6; cursor: default; }