lemma-sdk 0.2.17 → 0.2.19

package/README.md

@@ -169,85 +169,86 @@ Notes:
 
 ## Assistants + Agent Runs
 
-### React assistant controller + primitives
+### React assistant UI
 
-`lemma-sdk/react` now exposes the assistant controller plus the reusable UI primitives used by the app shell. A simple integration looks like this:
+`lemma-sdk/react` ships the assistant controller, the default assistant experience, and the lower-level UI primitives used to build custom shells.
 
-If you want the SDK UI to look correct outside the Lemma app, import the bundled stylesheet once:
+Import the bundled stylesheet once anywhere in your app:
 
 ```tsx
 import "lemma-sdk/react/styles.css";
 ```
 
-The stylesheet provides the default Lemma assistant theme tokens used by the SDK UI. Without it, components may render with missing colors, borders, and spacing in apps that do not already define the same CSS variables.
-The SDK UI now ships its own semantic assistant classes and default styling, so consumers should not need the Lemma app's internal theme setup or Tailwind config just to render the assistant correctly.
+The stylesheet includes the SDK theme tokens and semantic assistant classes. You do not need the Lemma app's internal Tailwind setup just to render the assistant correctly.
 
-```tsx
-import {
-  MessageGroup,
-  PlanSummaryStrip,
-  ThinkingIndicator,
-  buildDisplayMessageRows,
-  getActiveToolBanner,
-  latestPlanSummary,
-  useAssistantController,
-} from "lemma-sdk/react";
+#### Important for Tailwind apps
 
-function AssistantSurface() {
-  const assistant = useAssistantController({
-    client,
-    assistantId: "uuid",
-    podId: "pod_123",
-  });
+If your app uses Tailwind and installs `lemma-sdk` from npm, Tailwind must scan the SDK package too. Otherwise the assistant can look half-styled: native file inputs may appear, layouts can collapse, spacing disappears, and buttons/header chrome look wrong.
 
-  const rows = buildDisplayMessageRows(assistant.messages);
-  const plan = latestPlanSummary(assistant.messages);
-  const activeToolBanner = getActiveToolBanner(assistant.messages);
+For Tailwind v3, add the SDK package to `content`:
 
-  return (
-    <div>
-      {plan ? <PlanSummaryStrip plan={plan} onHide={() => {}} /> : null}
-      {activeToolBanner ? <div>{activeToolBanner.summary}</div> : null}
-
-      {rows.map((row, index) => (
-        <MessageGroup
-          key={row.id}
-          message={row.message}
-          conversationId={assistant.activeConversationId}
-          onWidgetSendPrompt={(text) => assistant.sendMessage(text)}
-          isStreaming={assistant.isActiveConversationRunning && row.sourceIndexes.includes(assistant.messages.length - 1)}
-          showAssistantHeader={index === 0 || rows[index - 1]?.message.role !== "assistant"}
-          renderMessageContent={({ message }) => <div>{message.content}</div>}
-        />
-      ))}
-
-      {assistant.isActiveConversationRunning ? <ThinkingIndicator /> : null}
-    </div>
-  );
+```js
+// tailwind.config.js
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/lemma-sdk/dist/react/**/*.{js,mjs}",
+  ],
 }
 ```
 
-The intended split is:
+If you are developing against a local checkout of the SDK source instead of the published npm package, scan the source files too:
 
-- SDK: `useAssistantController`, message/tool normalization, plan parsing, tool rollups, and assistant UI primitives.
-- App: modal shell, fullscreen behavior, route navigation, workspace/file viewers, and product-specific renderers.
+```js
+// tailwind.config.js
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "../lemma-typescript/src/react/**/*.{ts,tsx}",
+  ],
+}
+```
 
-Useful UI primitives exported from `lemma-sdk/react`:
+If you alias the package to local SDK source in Vite, make sure the alias points at the React source and stylesheet:
 
-- `AssistantHeader`
-- `AssistantConversationList`
-- `AssistantModelPicker`
-- `AssistantShellLayout`
-- `AssistantComposer`
-- `AssistantMessageViewport`
-- `AssistantAskOverlay`
-- `AssistantPendingFileChip`
-- `AssistantStatusPill`
-- `AssistantThemeScope`
-- `MessageGroup`
-- `PlanSummaryStrip`
+```ts
+// vite.config.ts
+import path from "node:path";
+
+export default {
+  resolve: {
+    alias: {
+      "lemma-sdk/react/styles.css": path.resolve(__dirname, "../lemma-typescript/src/react/styles.css"),
+      "lemma-sdk/react": path.resolve(__dirname, "../lemma-typescript/src/react/index.ts"),
+      "lemma-sdk": path.resolve(__dirname, "../lemma-typescript/src/index.ts"),
+    },
+  },
+};
+```
+
+Quick checklist for developers:
+
+- import `lemma-sdk/react/styles.css` once
+- give the assistant container a real height
+- if the assistant is inside flex/grid, add `min-height: 0` on the relevant parent
+- if you use Tailwind, scan the SDK package or SDK source
+- if you use `AssistantEmbedded`, pass `theme` directly there
+- if you use `AssistantExperienceView`, wrap it in `AssistantThemeScope`
+
+The assistant UI renders markdown by default:
+
+- GitHub-flavored markdown is enabled for assistant and user messages
+- raw HTML is not rendered
+- links open safely in a new tab by default
+- lists, tables, blockquotes, inline code, and fenced code blocks are styled out of the box
 
-For a direct plug-and-play component, `AssistantEmbedded` wires `useAssistantController` into the default assistant experience:
+#### Choose an integration level
+
+##### 1. `AssistantEmbedded` for the fastest setup
+
+Use `AssistantEmbedded` when you want a ready-made assistant surface with the SDK defaults.
 
 ```tsx
 import "lemma-sdk/react/styles.css";
@@ -255,20 +256,76 @@ import { AssistantEmbedded } from "lemma-sdk/react";
 
 function SupportAssistant() {
   return (
-    <AssistantEmbedded
-      client={client}
-      assistantId="uuid"
-      podId="pod_123"
-      title="Support Assistant"
-      subtitle="Ask questions about this pod."
-      placeholder="Message Support Assistant"
-      showConversationList
-    />
+    <div style={{ height: 720, minHeight: 0 }}>
+      <AssistantEmbedded
+        client={client}
+        podId="pod_123"
+        assistantId="uuid"
+        title="Support Assistant"
+        subtitle="Ask questions about this pod."
+        placeholder="Message Support Assistant"
+        showConversationList
+        theme="auto"
+      />
+    </div>
+  );
+}
+```
+
+Important notes:
+
+- `theme` accepts `"auto" | "light" | "dark"`
+- `theme="auto"` follows the host app when it uses common selectors like `.dark`, `[data-theme="dark"]`, `[data-mode="dark"]`, and also falls back to `prefers-color-scheme`
+- the parent container must have a real height; if it lives inside flex/grid, `min-height: 0` is usually needed too
+- attachments are queued into the composer and sent with the next message by default
+
+##### 2. `AssistantExperienceView` for the default UI with your own controller
+
+Use `AssistantExperienceView` when you want the built-in assistant layout, but you need to own the controller lifecycle yourself.
+
+```tsx
+import "lemma-sdk/react/styles.css";
+import {
+  AssistantExperienceView,
+  AssistantThemeScope,
+  useAssistantController,
+} from "lemma-sdk/react";
+
+function ControlledAssistant() {
+  const assistant = useAssistantController({
+    client,
+    podId: "pod_123",
+    assistantId: "uuid",
+  });
+
+  return (
+    <AssistantThemeScope theme="dark" style={{ height: 720 }}>
+      <AssistantExperienceView
+        controller={assistant}
+        title="Support Assistant"
+        subtitle="Direct use of the default assistant experience."
+        placeholder="Message Support Assistant"
+        showConversationList
+        chromeStyle="subtle"
+        statusPlacement="inline"
+      />
+    </AssistantThemeScope>
   );
 }
 ```
 
-If you are composing your own shell with the SDK primitives, wrap it in `AssistantThemeScope` unless your app already provides matching theme tokens:
+Useful props on `AssistantExperienceView`:
+
+- `showConversationList`: show the built-in conversation sidebar
+- `chromeStyle`: `"elevated" | "subtle" | "flat"`
+- `statusPlacement`: `"inline" | "composer" | "none"`
+- `renderMessageContent`: override markdown rendering for custom message content
+- `renderToolInvocation`: replace the default tool activity renderer
+- `renderPresentedFile` and `renderPendingFile`: customize attachment rendering
+
+##### 3. `useAssistantController` + primitives for a custom shell
+
+Use the primitives when you want full control over layout and app chrome.
 
 ```tsx
 import "lemma-sdk/react/styles.css";
@@ -278,29 +335,109 @@ import {
   AssistantMessageViewport,
   AssistantShellLayout,
   AssistantThemeScope,
+  MessageGroup,
+  PlanSummaryStrip,
+  ThinkingIndicator,
+  buildDisplayMessageRows,
+  getActiveToolBanner,
+  latestPlanSummary,
+  useAssistantController,
 } from "lemma-sdk/react";
 
 function CustomAssistantShell() {
+  const assistant = useAssistantController({
+    client,
+    podId: "pod_123",
+    assistantId: "uuid",
+  });
+
+  const rows = buildDisplayMessageRows(assistant.messages);
+  const plan = latestPlanSummary(assistant.messages);
+  const activeToolBanner = getActiveToolBanner(assistant.messages);
+
   return (
-    <AssistantThemeScope>
+    <AssistantThemeScope theme="auto" style={{ height: 720 }}>
       <AssistantShellLayout
-        main={
+        main={(
           <div className="flex min-h-0 flex-1 flex-col gap-3">
-            <AssistantHeader title="Lemma Assistant" subtitle="Ask anything" />
+            <AssistantHeader
+              title="Lemma Assistant"
+              subtitle="Ask anything"
+            />
+
+            {plan ? <PlanSummaryStrip plan={plan} onHide={() => {}} /> : null}
+            {activeToolBanner ? <div>{activeToolBanner.summary}</div> : null}
+
             <AssistantMessageViewport>
-              <div>Messages go here</div>
+              {rows.map((row, index) => (
+                <MessageGroup
+                  key={row.id}
+                  message={row.message}
+                  conversationId={assistant.activeConversationId}
+                  onWidgetSendPrompt={(text) => assistant.sendMessage(text)}
+                  isStreaming={assistant.isActiveConversationRunning && row.sourceIndexes.includes(assistant.messages.length - 1)}
+                  showAssistantHeader={index === 0 || rows[index - 1]?.message.role !== "assistant"}
+                  renderMessageContent={({ message }) => <div>{message.content}</div>}
+                />
+              ))}
+
+              {assistant.isActiveConversationRunning ? <ThinkingIndicator /> : null}
             </AssistantMessageViewport>
+
             <AssistantComposer>
               <textarea placeholder="Message Lemma Assistant" />
             </AssistantComposer>
           </div>
-        }
+        )}
       />
     </AssistantThemeScope>
   );
 }
 ```
 
+Useful primitives exported from `lemma-sdk/react`:
+
+- `AssistantThemeScope`
+- `AssistantHeader`
+- `AssistantConversationList`
+- `AssistantModelPicker`
+- `AssistantShellLayout`
+- `AssistantComposer`
+- `AssistantMessageViewport`
+- `AssistantAskOverlay`
+- `AssistantPendingFileChip`
+- `AssistantStatusPill`
+- `MessageGroup`
+- `PlanSummaryStrip`
+- `ThinkingIndicator`
+
+#### Theming
+
+Use `AssistantThemeScope` around custom assistant layouts:
+
+```tsx
+import { AssistantThemeScope } from "lemma-sdk/react";
+
+<AssistantThemeScope theme="light">
+  <YourAssistant />
+</AssistantThemeScope>
+```
+
+Theme behavior:
+
+- `theme="auto"`: follows host dark-mode selectors and system color scheme
+- `theme="light"`: forces the light SDK palette
+- `theme="dark"`: forces the dark SDK palette
+
+If you use `AssistantEmbedded`, pass `theme` directly on that component instead of wrapping it again.
+
+#### What belongs in the SDK vs your app
+
+The intended split is:
+
+- SDK: `useAssistantController`, message/tool normalization, markdown rendering, plan parsing, tool rollups, and reusable assistant UI primitives
+- App: modal shell, fullscreen/window controls, route navigation, workspace/file viewers, and product-specific renderers
+
 ### Assistant names (resource key)
 
 Assistant CRUD is name-based:

package/dist/openapi_client/models/AssistantResponse.d.ts

@@ -8,8 +8,10 @@ export type AssistantResponse = {
     accessible_applications: Array<ApplicationAccessConfig>;
     accessible_folders: Array<string>;
     accessible_tables: Array<TableAccessEntry>;
+    agent_names: Array<string>;
     created_at: any;
     description: (string | null);
+    function_names: Array<string>;
     icon_url: (string | null);
     id: string;
     instruction: string;

package/dist/openapi_client/models/CreateAssistantRequest.d.ts

@@ -8,7 +8,9 @@ export type CreateAssistantRequest = {
     accessible_applications?: Array<ApplicationAccessConfig>;
     accessible_folders?: Array<string>;
     accessible_tables?: Array<TableAccessEntry>;
+    agent_names?: Array<string>;
     description?: (string | null);
+    function_names?: Array<string>;
     icon_url?: (string | null);
     instruction: string;
     name: string;

package/dist/openapi_client/models/DeskResponse.d.ts

@@ -10,5 +10,6 @@ export type DeskResponse = {
     source_archive_path?: (string | null);
     status: DeskStatus;
     updated_at: any;
+    readonly url: string;
     user_id: string;
 };

package/dist/openapi_client/models/UpdateAssistantRequest.d.ts

@@ -8,7 +8,9 @@ export type UpdateAssistantRequest = {
     accessible_applications?: (Array<ApplicationAccessConfig> | null);
     accessible_folders?: (Array<string> | null);
     accessible_tables?: (Array<TableAccessEntry> | null);
+    agent_names?: (Array<string> | null);
     description?: (string | null);
+    function_names?: (Array<string> | null);
     icon_url?: (string | null);
     instruction?: (string | null);
     tool_sets?: (Array<ToolSet> | null);

package/dist/openapi_client/services/ConversationsService.d.ts

@@ -45,13 +45,12 @@ export declare class ConversationsService {
      * List Messages
      * List messages in a conversation with token pagination. Use `page_token` to fetch older messages.
      * @param conversationId
-     * @param podId
      * @param pageToken
      * @param limit
      * @returns ConversationMessageListResponse Successful Response
      * @throws ApiError
      */
-    static conversationMessageList(conversationId: string, podId?: (string | null), pageToken?: (string | null), limit?: number): CancelablePromise<ConversationMessageListResponse>;
+    static conversationMessageList(conversationId: string, pageToken?: (string | null), limit?: number): CancelablePromise<ConversationMessageListResponse>;
     /**
      * Send Message (Stream)
      * @param conversationId

package/dist/openapi_client/services/ConversationsService.js

@@ -95,13 +95,12 @@ export class ConversationsService {
      * List Messages
      * List messages in a conversation with token pagination. Use `page_token` to fetch older messages.
      * @param conversationId
-     * @param podId
      * @param pageToken
      * @param limit
      * @returns ConversationMessageListResponse Successful Response
      * @throws ApiError
      */
-    static conversationMessageList(conversationId, podId, pageToken, limit = 20) {
+    static conversationMessageList(conversationId, pageToken, limit = 20) {
         return __request(OpenAPI, {
             method: 'GET',
             url: '/conversations/{conversation_id}/messages',
@@ -109,7 +108,6 @@ export class ConversationsService {
                 'conversation_id': conversationId,
             },
             query: {
-                'pod_id': podId,
                 'page_token': pageToken,
                 'limit': limit,
             },

package/dist/react/components/AssistantChrome.d.ts

@@ -1,14 +1,18 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 import type { AssistantConversationListItem, AssistantConversationRenderArgs } from "./assistant-types.js";
+export type AssistantSurfaceTone = "default" | "subtle" | "flat";
+export type AssistantThemeMode = "auto" | "light" | "dark";
 export interface AssistantThemeScopeProps extends ComponentPropsWithoutRef<"div"> {
     children: ReactNode;
+    theme?: AssistantThemeMode;
 }
-export declare function AssistantThemeScope({ className, children, ...props }: AssistantThemeScopeProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantThemeScope({ className, children, theme, ...props }: AssistantThemeScopeProps): import("react/jsx-runtime").JSX.Element;
 export interface AssistantHeaderProps {
     title: ReactNode;
     subtitle?: ReactNode;
     badge?: ReactNode;
     controls?: ReactNode;
+    tone?: AssistantSurfaceTone;
     className?: string;
 }
 export interface AssistantMessageViewportProps extends ComponentPropsWithoutRef<"div"> {
@@ -23,7 +27,7 @@ export interface AssistantShellLayoutProps {
     className?: string;
 }
 export declare function AssistantShellLayout({ sidebar, sidebarVisible, main, className, }: AssistantShellLayoutProps): import("react/jsx-runtime").JSX.Element;
-export declare function AssistantHeader({ title, subtitle, badge, controls, className, }: AssistantHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantHeader({ title, subtitle, badge, controls, tone, className, }: AssistantHeaderProps): import("react/jsx-runtime").JSX.Element;
 export interface AssistantConversationListProps {
     conversations: AssistantConversationListItem[];
     activeConversationId: string | null;
@@ -69,9 +73,10 @@ export interface AssistantComposerProps {
     status?: ReactNode;
     pendingFiles?: ReactNode;
     children: ReactNode;
+    tone?: AssistantSurfaceTone;
     className?: string;
 }
-export declare function AssistantComposer({ floating, status, pendingFiles, children, className, }: AssistantComposerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantComposer({ floating, status, pendingFiles, children, tone, className, }: AssistantComposerProps): import("react/jsx-runtime").JSX.Element;
 export declare function AssistantPendingFileChip({ label, onRemove, className, }: AssistantPendingFileChipProps): import("react/jsx-runtime").JSX.Element;
 export interface AssistantStatusPillProps {
     label: ReactNode;

package/dist/react/components/AssistantChrome.js

@@ -3,8 +3,8 @@ import { forwardRef } from "react";
 function cx(...values) {
     return values.filter(Boolean).join(" ");
 }
-export function AssistantThemeScope({ className, children, ...props }) {
-    return (_jsx("div", { className: cx("lemma-assistant-theme", className), ...props, children: children }));
+export function AssistantThemeScope({ className, children, theme = "auto", ...props }) {
+    return (_jsx("div", { "data-lemma-theme": theme, className: cx("lemma-assistant-theme", className), ...props, children: children }));
 }
 export const AssistantMessageViewport = forwardRef(function AssistantMessageViewport({ className, innerClassName, children, ...props }, ref) {
     return (_jsx("div", { ref: ref, className: cx("lemma-assistant-viewport", "min-h-0 flex-1 overflow-y-auto bg-[var(--bg-surface)] px-4 py-4", className), ...props, children: _jsx("div", { className: cx("lemma-assistant-viewport-inner", "mx-auto flex w-full max-w-5xl flex-col gap-3", innerClassName), children: children }) }));
@@ -13,8 +13,8 @@ export function AssistantShellLayout({ sidebar, sidebarVisible = false, main, cl
     const hasSidebar = !!sidebar;
     return (_jsxs("div", { className: cx("lemma-assistant-shell", hasSidebar && "lemma-assistant-shell--with-sidebar", hasSidebar && sidebarVisible && "lemma-assistant-shell--sidebar-visible", "mx-auto h-full w-full min-h-0 font-sans antialiased", className), children: [sidebar && sidebarVisible ? (_jsx("div", { className: "lemma-assistant-shell-sidebar", children: sidebar })) : null, main] }));
 }
-export function AssistantHeader({ title, subtitle, badge, controls, className, }) {
-    return (_jsxs("div", { className: cx("lemma-assistant-header", "flex items-center justify-between border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", className), children: [_jsxs("div", { className: "lemma-assistant-header-copy flex items-center gap-2.5", children: [badge ? (_jsx("div", { className: "lemma-assistant-header-badge flex h-7 w-7 items-center justify-center rounded-full bg-[linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))] shadow-[var(--shadow-xs)]", children: badge })) : null, _jsxs("div", { className: "lemma-assistant-header-titles", children: [_jsx("h3", { className: "lemma-assistant-header-title text-[13px] font-semibold leading-tight text-[var(--text-primary)]", children: title }), subtitle ? (_jsx("p", { className: "lemma-assistant-header-subtitle text-[11px] text-[var(--text-tertiary)]", children: subtitle })) : null] })] }), controls ? (_jsx("div", { className: "lemma-assistant-header-controls flex items-center gap-1", children: controls })) : null] }));
+export function AssistantHeader({ title, subtitle, badge, controls, tone = "subtle", className, }) {
+    return (_jsxs("div", { "data-tone": tone, className: cx("lemma-assistant-header", "flex items-center justify-between border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", className), children: [_jsxs("div", { className: "lemma-assistant-header-copy flex items-center gap-2.5", children: [badge ? (_jsx("div", { className: "lemma-assistant-header-badge flex h-7 w-7 items-center justify-center rounded-full bg-[linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))] shadow-[var(--shadow-xs)]", children: badge })) : null, _jsxs("div", { className: "lemma-assistant-header-titles", children: [_jsx("h3", { className: "lemma-assistant-header-title text-[13px] font-semibold leading-tight text-[var(--text-primary)]", children: title }), subtitle ? (_jsx("p", { className: "lemma-assistant-header-subtitle text-[11px] text-[var(--text-tertiary)]", children: subtitle })) : null] })] }), controls ? (_jsx("div", { className: "lemma-assistant-header-controls flex items-center gap-1", children: controls })) : null] }));
 }
 export function AssistantConversationList({ conversations, activeConversationId, onSelectConversation, onNewConversation, renderConversationLabel, title = "Conversations", newLabel = "New", className, }) {
     return (_jsxs("aside", { className: cx("lemma-assistant-conversation-list", "flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)]", className), children: [_jsx("div", { className: "lemma-assistant-conversation-list-header border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: _jsxs("div", { className: "lemma-assistant-conversation-list-header-row flex items-center justify-between gap-3", children: [_jsxs("div", { className: "lemma-assistant-conversation-list-copy", children: [_jsx("div", { className: "lemma-assistant-conversation-list-title text-[13px] font-semibold text-[var(--text-primary)]", children: title }), _jsxs("div", { className: "lemma-assistant-conversation-list-meta mt-1 text-[11px] text-[var(--text-tertiary)]", children: [conversations.length, " total"] })] }), onNewConversation ? (_jsx("button", { type: "button", onClick: onNewConversation, className: "lemma-assistant-conversation-list-new rounded-full border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]", children: newLabel })) : null] }) }), _jsx("div", { className: "lemma-assistant-conversation-list-items min-h-0 flex-1 overflow-y-auto p-3 space-y-2", children: conversations.map((conversation) => {
@@ -45,8 +45,8 @@ export function AssistantAskOverlay({ questionNumber, totalQuestions, question,
                         ? "bg-[var(--brand-primary)] text-[var(--text-on-brand)] hover:bg-[color:color-mix(in_srgb,_var(--brand-primary)_88%,_var(--text-primary))]"
                         : "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"), children: continueLabel }) })) : null] }));
 }
-export function AssistantComposer({ floating, status, pendingFiles, children, className, }) {
-    return (_jsxs("div", { className: cx("lemma-assistant-composer", "relative rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] p-2 shadow-[var(--shadow-md)]", className), children: [floating ? (_jsx("div", { className: "lemma-assistant-composer-floating absolute bottom-[calc(100%+8px)] left-0 right-0 z-20", children: floating })) : null, _jsx("div", { className: "lemma-assistant-composer-status-rail min-h-[34px] px-2 pb-1", children: _jsx("div", { className: "lemma-assistant-composer-status flex min-h-[26px] items-center transition-opacity duration-200", children: status || _jsx("span", { "aria-hidden": "true", className: "inline-block h-[30px]" }) }) }), pendingFiles ? (_jsx("div", { className: "lemma-assistant-composer-pending flex flex-wrap items-center gap-1.5 px-1 pb-1.5", children: pendingFiles })) : null, _jsx("div", { className: "lemma-assistant-composer-body", children: children })] }));
+export function AssistantComposer({ floating, status, pendingFiles, children, tone = "default", className, }) {
+    return (_jsxs("div", { "data-tone": tone, "data-has-status": status ? "true" : "false", "data-has-pending-files": pendingFiles ? "true" : "false", "data-has-floating": floating ? "true" : "false", className: cx("lemma-assistant-composer", "relative rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] p-2 shadow-[var(--shadow-md)]", className), children: [floating ? (_jsx("div", { className: "lemma-assistant-composer-floating absolute bottom-[calc(100%+8px)] left-0 right-0 z-20", children: floating })) : null, status ? (_jsx("div", { className: "lemma-assistant-composer-status-rail min-h-[34px] px-2 pb-1", children: _jsx("div", { className: "lemma-assistant-composer-status flex min-h-[26px] items-center transition-opacity duration-200", children: status }) })) : null, pendingFiles ? (_jsx("div", { className: "lemma-assistant-composer-pending flex flex-wrap items-center gap-1.5 px-1 pb-1.5", children: pendingFiles })) : null, _jsx("div", { className: "lemma-assistant-composer-body", children: children })] }));
 }
 export function AssistantPendingFileChip({ label, onRemove, className, }) {
     return (_jsxs("span", { className: cx("lemma-assistant-pending-file-chip", "inline-flex max-w-full items-center gap-1.5 rounded-full bg-[var(--bg-subtle)] px-2 py-1 text-[11px] text-[var(--text-secondary)]", className), children: [_jsx("span", { className: "lemma-assistant-pending-file-chip-label truncate max-w-[180px]", children: label }), onRemove ? (_jsx("button", { type: "button", onClick: onRemove, className: "lemma-assistant-pending-file-chip-remove inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-[var(--bg-canvas)]", title: "Remove file", children: "\u00D7" })) : null] }));

package/dist/react/components/AssistantEmbedded.d.ts

@@ -1,8 +1,10 @@
 import type { LemmaClient } from "../../client.js";
 import { type AssistantConversationScope } from "../useAssistantController.js";
+import { type AssistantThemeMode } from "./AssistantChrome.js";
 import { type AssistantExperienceViewProps } from "./AssistantExperience.js";
 export interface AssistantEmbeddedProps extends Omit<AssistantExperienceViewProps, "controller">, AssistantConversationScope {
     client: LemmaClient;
     enabled?: boolean;
+    theme?: AssistantThemeMode;
 }
-export declare function AssistantEmbedded({ client, podId, assistantId, organizationId, enabled, ...props }: AssistantEmbeddedProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantEmbedded({ client, podId, assistantId, organizationId, enabled, theme, ...props }: AssistantEmbeddedProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/AssistantEmbedded.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useAssistantController } from "../useAssistantController.js";
 import { AssistantThemeScope } from "./AssistantChrome.js";
 import { AssistantExperienceView } from "./AssistantExperience.js";
-export function AssistantEmbedded({ client, podId, assistantId, organizationId, enabled = true, ...props }) {
+export function AssistantEmbedded({ client, podId, assistantId, organizationId, enabled = true, theme = "auto", ...props }) {
     const controller = useAssistantController({
         client,
         podId: podId ?? undefined,
@@ -10,5 +10,5 @@ export function AssistantEmbedded({ client, podId, assistantId, organizationId,
         organizationId: organizationId ?? undefined,
         enabled,
     });
-    return (_jsx(AssistantThemeScope, { children: _jsx(AssistantExperienceView, { controller: controller, ...props }) }));
+    return (_jsx(AssistantThemeScope, { className: "lemma-assistant-embedded", theme: theme, children: _jsx(AssistantExperienceView, { controller: controller, ...props }) }));
 }

package/dist/react/components/AssistantExperience.d.ts

@@ -33,6 +33,8 @@ export interface ActiveToolBanner {
     summary: string;
     activeCount: number;
 }
+export type AssistantChromeStyle = "elevated" | "subtle" | "flat";
+export type AssistantStatusPlacement = "inline" | "composer" | "none";
 export interface AssistantExperienceViewProps {
     controller: AssistantControllerView;
     title?: ReactNode;
@@ -42,6 +44,8 @@ export interface AssistantExperienceViewProps {
     draft?: string;
     onDraftChange?: (value: string) => void;
     showConversationList?: boolean;
+    chromeStyle?: AssistantChromeStyle;
+    statusPlacement?: AssistantStatusPlacement;
     onNavigateResource?: (resourceType: string, resourceId: string, meta?: Record<string, unknown>) => void;
     renderConversationLabel?: (args: AssistantConversationRenderArgs) => ReactNode;
     renderMessageContent?: (args: AssistantMessageRenderArgs) => ReactNode;
@@ -75,5 +79,5 @@ export declare function MessageGroup({ message, conversationId, onNavigateResour
     renderPresentedFile?: (args: AssistantPresentedFileRenderArgs) => ReactNode;
     renderToolInvocation?: (args: AssistantToolRenderArgs) => ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function AssistantExperienceView({ controller, title, subtitle, placeholder, emptyState, draft: controlledDraft, onDraftChange, showConversationList, onNavigateResource, renderConversationLabel, renderMessageContent, renderPresentedFile, renderPendingFile, renderToolInvocation, }: AssistantExperienceViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantExperienceView({ controller, title, subtitle, placeholder, emptyState, draft: controlledDraft, onDraftChange, showConversationList, chromeStyle, statusPlacement, onNavigateResource, renderConversationLabel, renderMessageContent, renderPresentedFile, renderPendingFile, renderToolInvocation, }: AssistantExperienceViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/react/components/AssistantExperience.js

@@ -1,7 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { AvailableModels } from "../../types.js";
-import { AssistantAskOverlay, AssistantMessageViewport, } from "./AssistantChrome.js";
+import { AssistantAskOverlay, AssistantComposer, AssistantHeader, AssistantMessageViewport, AssistantModelPicker, AssistantStatusPill, } from "./AssistantChrome.js";
 function cx(...values) {
     return values.filter(Boolean).join(" ");
 }
@@ -500,8 +502,11 @@ function useControllableDraft(controlledValue, onChange) {
 function defaultConversationLabel({ conversation }) {
     return conversation.title || "Untitled conversation";
 }
+const markdownComponents = {
+    a: ({ node: _node, ...props }) => (_jsx("a", { ...props, target: props.target || "_blank", rel: props.rel || "noreferrer noopener" })),
+};
 function defaultMessageContent({ message }) {
-    return _jsx("div", { className: "whitespace-pre-wrap", children: message.content });
+    return (_jsx("div", { className: "lemma-assistant-markdown", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], skipHtml: true, components: markdownComponents, children: message.content }) }));
 }
 function defaultPresentedFile({ filepath }) {
     return (_jsxs("div", { className: "rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_78%,_transparent)] bg-[linear-gradient(180deg,color-mix(in_srgb,var(--bg-surface)_96%,transparent),color-mix(in_srgb,var(--bg-canvas)_76%,transparent))] px-3 py-2.5", children: [_jsx("div", { className: "text-[14px] font-medium text-[var(--text-primary)]", children: fileNameFromPath(filepath) }), _jsx("div", { className: "mt-1 text-[12px] text-[var(--text-tertiary)]", children: filepath })] }));
@@ -513,7 +518,7 @@ export function PlanSummaryStrip({ plan, onHide }) {
     const [showAll, setShowAll] = useState(false);
     const visibleSteps = showAll ? plan.steps : plan.steps.slice(0, 5);
     const hiddenCount = Math.max(0, plan.steps.length - visibleSteps.length);
-    return (_jsxs("div", { className: "lemma-assistant-plan-strip rounded-xl border border-[color:color-mix(in_srgb,_var(--brand-primary)_24%,_var(--border-subtle))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_18%,_var(--bg-surface))] px-3 py-2.5 shadow-[var(--shadow-sm)]", children: [_jsxs("div", { className: "lemma-assistant-plan-strip-header flex items-center justify-between gap-2", children: [_jsxs("div", { className: "lemma-assistant-plan-strip-summary inline-flex items-center gap-2", children: [_jsx("span", { className: "lemma-assistant-plan-strip-title text-[12px] font-semibold text-[var(--text-primary)]", children: "Task plan" }), _jsxs("span", { className: "lemma-assistant-plan-strip-count text-[11px] text-[var(--text-tertiary)]", children: [plan.completedCount, "/", plan.steps.length, " complete"] }), plan.inProgressCount > 0 ? (_jsxs("span", { className: "lemma-assistant-plan-strip-active rounded-full bg-[color:color-mix(in_srgb,_var(--brand-primary)_16%,_transparent)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--brand-primary)]", children: [plan.inProgressCount, " active"] })) : null] }), _jsx("button", { type: "button", onClick: onHide, className: "text-[11px] font-medium text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors", children: "Hide" })] }), plan.activeStep ? (_jsxs("div", { className: "mt-1.5 truncate text-[11px] text-[var(--text-secondary)]", title: plan.activeStep, children: [plan.running ? "Running:" : "Current:", " ", plan.activeStep] })) : null, _jsxs("div", { className: "lemma-assistant-plan-strip-steps mt-2 space-y-1", children: [visibleSteps.map((step, index) => (_jsxs("div", { className: "lemma-assistant-plan-strip-step flex items-start gap-2 text-[11px]", children: [_jsx("span", { className: cx("mt-1 inline-block h-2 w-2 shrink-0 rounded-full", step.status === "completed" && "bg-[var(--state-success)]", step.status === "in_progress" && "bg-[var(--brand-primary)]", step.status === "pending" && "bg-[var(--border-default)]") }), _jsx("span", { className: cx("leading-5", step.status === "completed" && "text-[var(--text-tertiary)] line-through", step.status === "in_progress" && "text-[var(--brand-primary)] font-medium", step.status === "pending" && "text-[var(--text-secondary)]"), children: step.step })] }, `${step.step}-${index}`))), plan.steps.length > 5 ? (_jsxs("div", { className: "flex items-center gap-2 pt-0.5", children: [_jsx("button", { type: "button", onClick: () => setShowAll((prev) => !prev), className: "text-[10px] font-medium text-[var(--brand-primary)] hover:text-[var(--text-primary)] transition-colors", children: showAll ? "Show less" : `See all ${plan.steps.length} steps` }), !showAll && hiddenCount > 0 ? (_jsxs("span", { className: "text-[10px] text-[var(--text-tertiary)]", children: ["+", hiddenCount, " more"] })) : null] })) : null] })] }));
+    return (_jsxs("div", { className: "lemma-assistant-plan-strip rounded-xl border border-[color:color-mix(in_srgb,_var(--border-default)_88%,_transparent)] bg-[var(--bg-surface)] px-3 py-2.5 shadow-[var(--shadow-sm)]", children: [_jsxs("div", { className: "lemma-assistant-plan-strip-header flex items-center justify-between gap-2", children: [_jsxs("div", { className: "lemma-assistant-plan-strip-summary inline-flex items-center gap-2", children: [_jsx("span", { className: "lemma-assistant-plan-strip-title text-[12px] font-semibold text-[var(--text-primary)]", children: "Task plan" }), _jsxs("span", { className: "lemma-assistant-plan-strip-count text-[11px] text-[var(--text-tertiary)]", children: [plan.completedCount, "/", plan.steps.length, " complete"] }), plan.inProgressCount > 0 ? (_jsxs("span", { className: "lemma-assistant-plan-strip-active rounded-full bg-[color:color-mix(in_srgb,_var(--brand-primary)_16%,_transparent)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--brand-primary)]", children: [plan.inProgressCount, " active"] })) : null] }), _jsx("button", { type: "button", onClick: onHide, className: "text-[11px] font-medium text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors", children: "Hide" })] }), plan.activeStep ? (_jsxs("div", { className: "mt-1.5 truncate text-[11px] text-[var(--text-secondary)]", title: plan.activeStep, children: [plan.running ? "Running:" : "Current:", " ", plan.activeStep] })) : null, _jsxs("div", { className: "lemma-assistant-plan-strip-steps mt-2 space-y-1", children: [visibleSteps.map((step, index) => (_jsxs("div", { className: "lemma-assistant-plan-strip-step flex items-start gap-2 text-[11px]", children: [_jsx("span", { className: cx("mt-1 inline-block h-2 w-2 shrink-0 rounded-full", step.status === "completed" && "bg-[var(--state-success)]", step.status === "in_progress" && "bg-[var(--brand-primary)]", step.status === "pending" && "bg-[var(--border-default)]") }), _jsx("span", { className: cx("leading-5", step.status === "completed" && "text-[var(--text-tertiary)] line-through", step.status === "in_progress" && "text-[var(--brand-primary)] font-medium", step.status === "pending" && "text-[var(--text-secondary)]"), children: step.step })] }, `${step.step}-${index}`))), plan.steps.length > 5 ? (_jsxs("div", { className: "flex items-center gap-2 pt-0.5", children: [_jsx("button", { type: "button", onClick: () => setShowAll((prev) => !prev), className: "text-[10px] font-medium text-[var(--brand-primary)] hover:text-[var(--text-primary)] transition-colors", children: showAll ? "Show less" : `See all ${plan.steps.length} steps` }), !showAll && hiddenCount > 0 ? (_jsxs("span", { className: "text-[10px] text-[var(--text-tertiary)]", children: ["+", hiddenCount, " more"] })) : null] })) : null] })] }));
 }
 export function ThinkingIndicator() {
     const [show, setShow] = useState(false);
@@ -575,7 +580,7 @@ function ToolDetailsPanel({ toolName, args, state, result, onNavigateResource, r
                 activeConversationId,
             }) }));
     }
-    return (_jsxs("div", { className: "pl-4 border-l border-[var(--border-default)] space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: formatToolDisplayName(toolName) }), canNavigate && onNavigateResource ? (_jsx("button", { type: "button", onClick: () => onNavigateResource(resultData.resourceType, resultData.resourceId, resultData), className: "inline-flex items-center gap-1 text-[10px] font-medium text-[var(--state-success)] hover:text-[var(--state-success)] transition-colors", children: "Open \u203A" })) : null] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-medium uppercase tracking-[0.1em] text-[var(--text-tertiary)] mb-1", children: "Input" }), _jsx("div", { className: "p-2 rounded bg-[color:color-mix(in_srgb,_var(--bg-canvas)_70%,_transparent)] font-mono text-[11px] max-h-24 overflow-auto", children: _jsx("pre", { className: "text-[var(--text-secondary)] whitespace-pre-wrap", children: JSON.stringify(args, null, 2) }) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-medium uppercase tracking-[0.1em] text-[var(--text-tertiary)] mb-1", children: "Output" }), _jsx("div", { className: "p-2 rounded bg-[color:color-mix(in_srgb,_var(--bg-canvas)_70%,_transparent)] font-mono text-[11px] max-h-24 overflow-auto", children: _jsx("pre", { className: "text-[var(--text-secondary)] whitespace-pre-wrap", children: Object.keys(resultData).length > 0 ? JSON.stringify(resultData, null, 2) : "No output yet" }) })] })] })] }));
+    return (_jsxs("div", { className: "pl-4 border-l border-[var(--border-default)] space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-[10px] font-medium uppercase tracking-[0.04em] text-[var(--text-tertiary)]", children: formatToolDisplayName(toolName) }), canNavigate && onNavigateResource ? (_jsx("button", { type: "button", onClick: () => onNavigateResource(resultData.resourceType, resultData.resourceId, resultData), className: "inline-flex items-center gap-1 text-[10px] font-medium text-[var(--state-success)] hover:text-[var(--state-success)] transition-colors", children: "Open \u203A" })) : null] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-medium uppercase tracking-[0.1em] text-[var(--text-tertiary)] mb-1", children: "Input" }), _jsx("div", { className: "p-2 rounded bg-[color:color-mix(in_srgb,_var(--bg-canvas)_70%,_transparent)] font-mono text-[11px] max-h-24 overflow-auto", children: _jsx("pre", { className: "text-[var(--text-secondary)] whitespace-pre-wrap", children: JSON.stringify(args, null, 2) }) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-medium uppercase tracking-[0.1em] text-[var(--text-tertiary)] mb-1", children: "Output" }), _jsx("div", { className: "p-2 rounded bg-[color:color-mix(in_srgb,_var(--bg-canvas)_70%,_transparent)] font-mono text-[11px] max-h-24 overflow-auto", children: _jsx("pre", { className: "text-[var(--text-secondary)] whitespace-pre-wrap", children: Object.keys(resultData).length > 0 ? JSON.stringify(resultData, null, 2) : "No output yet" }) })] })] })] }));
 }
 function InlineToolCall({ invocation, isSelected, onClick, }) {
     const resultData = (invocation.result || {});
@@ -587,7 +592,7 @@ function InlineToolCall({ invocation, isSelected, onClick, }) {
         : isFailed
             ? (typeof resultData.error === "string" ? resultData.error : "Tool failed")
             : (formatToolResultSummary(invocation.toolName, invocation.args, resultData) || "Completed");
-    return (_jsxs("button", { type: "button", onClick: onClick, className: cx("w-full text-left inline-flex items-center gap-1.5 text-[12px] leading-5 transition-colors hover:text-[var(--text-primary)]", isExecuting && "text-[var(--state-info)]", isComplete && "text-[var(--state-success)]", isFailed && "text-[var(--state-error)]", !isExecuting && !isComplete && !isFailed && "text-[var(--text-secondary)]"), children: [_jsx("span", { className: "font-medium whitespace-nowrap", children: formatToolDisplayName(invocation.toolName) }), _jsx("span", { className: "text-current/80 truncate", children: summary }), _jsx("span", { className: "ml-auto transition-transform", children: isSelected ? "⌄" : "›" })] }));
+    return (_jsxs("button", { type: "button", onClick: onClick, className: cx("w-full text-left inline-flex items-center gap-1.5 text-[11px] leading-5 transition-colors hover:text-[var(--text-primary)]", isExecuting && "text-[var(--state-info)]", isComplete && "text-[var(--state-success)]", isFailed && "text-[var(--state-error)]", !isExecuting && !isComplete && !isFailed && "text-[var(--text-secondary)]"), children: [_jsx("span", { className: "font-medium whitespace-nowrap", children: formatToolDisplayName(invocation.toolName) }), _jsx("span", { className: "text-current/80 truncate", children: summary }), _jsx("span", { className: "ml-auto transition-transform", children: isSelected ? "⌄" : "›" })] }));
 }
 function ToolActivityRollup({ detailParts, onNavigateResource, renderToolInvocation, message, activeConversationId, }) {
     const [activeToolCallId, setActiveToolCallId] = useState(null);
@@ -603,7 +608,7 @@ function ToolActivityRollup({ detailParts, onNavigateResource, renderToolInvocat
     const summary = activeInvocation
         ? formatActiveToolSummary(activeInvocation.toolName, activeInvocation.args)
         : `Worked across ${toolParts.length} tool${toolParts.length === 1 ? "" : "s"}${failedCount > 0 ? ` · ${failedCount} failed` : ""}`;
-    return (_jsxs("div", { className: "lemma-assistant-tool-rollup space-y-1", children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded((prev) => !prev), className: "lemma-assistant-tool-rollup-toggle inline-flex items-center gap-1.5 text-[12px] leading-5 text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] transition-colors", children: [_jsx("span", { className: cx("transition-transform", isExpanded && "rotate-90"), children: "\u203A" }), isWorking ? _jsx("span", { className: "inline-flex h-2 w-2 rounded-full bg-[var(--brand-accent)]" }) : null, _jsx("span", { className: cx("text-[var(--text-secondary)]", isWorking && "font-medium"), children: summary })] }), isExpanded ? (_jsx("div", { className: "lemma-assistant-tool-rollup-details pl-4 border-l border-[var(--border-default)] space-y-1.5", children: detailParts.map((part) => {
+    return (_jsxs("div", { className: "lemma-assistant-tool-rollup space-y-1", children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded((prev) => !prev), className: "lemma-assistant-tool-rollup-toggle inline-flex items-center gap-1.5 text-[11px] leading-5 text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] transition-colors", children: [_jsx("span", { className: cx("transition-transform", isExpanded && "rotate-90"), children: "\u203A" }), isWorking ? _jsx("span", { className: "inline-flex h-2 w-2 rounded-full bg-[var(--brand-accent)]" }) : null, _jsx("span", { className: cx("text-[var(--text-secondary)]", isWorking && "font-medium"), children: summary })] }), isExpanded ? (_jsx("div", { className: "lemma-assistant-tool-rollup-details pl-4 border-l border-[var(--border-default)] space-y-1.5", children: detailParts.map((part) => {
                     if (part.type === "reasoning") {
                         return (_jsxs("div", { className: "lemma-assistant-tool-rollup-thinking rounded-md bg-[var(--bg-canvas)] px-2.5 py-2", children: [_jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-[0.1em] text-[var(--text-tertiary)]", children: part.state === "streaming" ? "Thinking" : "Thought" }), _jsx("pre", { className: "text-[11px] leading-5 text-[var(--text-secondary)] whitespace-pre-wrap font-mono max-h-40 overflow-auto", children: part.text })] }, `thinking-${part.id}`));
                     }
@@ -755,7 +760,7 @@ export function MessageGroup({ message, conversationId, onNavigateResource, onWi
                         return null;
                     }), presentableFilepaths.length > 0 ? (_jsx(PresentFilesCard, { filepaths: presentableFilepaths, conversationId: conversationId, renderPresentedFile: renderPresentedFile })) : null] })] }));
 }
-export function AssistantExperienceView({ controller, title = "Lemma Assistant", subtitle = "Ask across your workspace and organization.", placeholder = "Message Lemma Assistant", emptyState, draft: controlledDraft, onDraftChange, showConversationList = false, onNavigateResource, renderConversationLabel = defaultConversationLabel, renderMessageContent = defaultMessageContent, renderPresentedFile, renderPendingFile = defaultPendingFile, renderToolInvocation, }) {
+export function AssistantExperienceView({ controller, title = "Lemma Assistant", subtitle = "Ask across your workspace and organization.", placeholder = "Message Lemma Assistant", emptyState, draft: controlledDraft, onDraftChange, showConversationList = false, chromeStyle = "subtle", statusPlacement = "inline", onNavigateResource, renderConversationLabel = defaultConversationLabel, renderMessageContent = defaultMessageContent, renderPresentedFile, renderPendingFile = defaultPendingFile, renderToolInvocation, }) {
     const [draft, setDraft] = useControllableDraft(controlledDraft, onDraftChange);
     const [isPlanHidden, setIsPlanHidden] = useState(false);
     const [dismissedAskToolCallIds, setDismissedAskToolCallIds] = useState([]);
@@ -764,6 +769,7 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
     const messagesContainerRef = useRef(null);
     const inputRef = useRef(null);
     const fileInputRef = useRef(null);
+    const bottomAnchorRef = useRef(null);
     const isPinnedToBottomRef = useRef(true);
     const loadingOlderFromScrollRef = useRef(false);
     const isConversationBusy = controller.isLoading || controller.isActiveConversationRunning;
@@ -780,6 +786,15 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
         textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
     }, []);
     const scrollToLatest = useCallback((behavior = "auto") => {
+        const anchor = bottomAnchorRef.current;
+        if (anchor) {
+            anchor.scrollIntoView({
+                block: "end",
+                behavior,
+            });
+            isPinnedToBottomRef.current = true;
+            return;
+        }
         const el = messagesContainerRef.current;
         if (!el)
             return;
@@ -825,10 +840,18 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
             return;
         if (isPinnedToBottomRef.current) {
             requestAnimationFrame(() => {
-                scrollToLatest(isConversationBusy ? "auto" : "smooth");
+                requestAnimationFrame(() => {
+                    scrollToLatest(isConversationBusy ? "auto" : "smooth");
+                });
             });
         }
     }, [controller.messages, isConversationBusy, scrollToLatest]);
+    useEffect(() => {
+        isPinnedToBottomRef.current = true;
+        requestAnimationFrame(() => {
+            scrollToLatest("auto");
+        });
+    }, [controller.activeConversationId, scrollToLatest]);
     useEffect(() => {
         resizeComposer();
     }, [draft, resizeComposer]);
@@ -959,7 +982,10 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
         if (selectedFiles.length === 0)
             return;
         try {
-            await controller.uploadFiles(selectedFiles);
+            await controller.uploadFiles(selectedFiles, { deferUntilSend: true });
+            requestAnimationFrame(() => {
+                inputRef.current?.focus();
+            });
         }
         finally {
             if (fileInputRef.current) {
@@ -993,29 +1019,34 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
         ? effectiveAskOverlayState.answers[effectiveAskOverlayState.currentQuestionIndex] || []
         : [];
     const canContinueAsk = activeAskAnswers.length > 0;
-    return (_jsxs("div", { className: cx("lemma-assistant-experience", "flex h-full min-h-0 flex-col gap-3 font-sans antialiased", showConversationList && "lg:grid lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-3"), children: [showConversationList ? (_jsxs("aside", { className: "lemma-assistant-experience-sidebar hidden min-h-0 overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)] lg:flex lg:flex-col", children: [_jsx("div", { className: "lemma-assistant-experience-sidebar-header border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: _jsxs("div", { className: "lemma-assistant-experience-sidebar-header-row flex items-center justify-between gap-3", children: [_jsxs("div", { className: "lemma-assistant-experience-sidebar-copy", children: [_jsx("div", { className: "lemma-assistant-experience-sidebar-title text-[13px] font-semibold text-[var(--text-primary)]", children: "Conversations" }), _jsxs("div", { className: "lemma-assistant-experience-sidebar-meta mt-1 text-[11px] text-[var(--text-tertiary)]", children: [controller.conversations.length, " total"] })] }), _jsx("button", { type: "button", onClick: controller.clearMessages, className: "lemma-assistant-experience-sidebar-new rounded-full border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]", children: "New" })] }) }), _jsx("div", { className: "lemma-assistant-experience-sidebar-items min-h-0 flex-1 overflow-y-auto p-3 space-y-2", children: controller.conversations.map((conversation) => {
+    const liveStatusLabel = activeToolBanner?.summary || "Thinking through this...";
+    const headerTone = chromeStyle === "elevated" ? "default" : chromeStyle === "flat" ? "flat" : "subtle";
+    const composerTone = chromeStyle === "flat" ? "flat" : chromeStyle === "subtle" ? "subtle" : "default";
+    const showInlineStatus = statusPlacement === "inline" && isConversationBusy;
+    const showComposerStatus = statusPlacement === "composer" && isConversationBusy;
+    return (_jsxs("div", { className: cx("lemma-assistant-experience", "flex h-full min-h-0 flex-col gap-3 font-sans antialiased", showConversationList && "lg:grid lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-3"), "data-chrome-style": chromeStyle, "data-status-placement": statusPlacement, "data-busy": isConversationBusy ? "true" : "false", "data-has-plan": planSummary ? "true" : "false", "data-has-pending-files": controller.pendingFiles.length > 0 ? "true" : "false", "data-show-conversation-list": showConversationList ? "true" : "false", children: [showConversationList ? (_jsxs("aside", { className: "lemma-assistant-experience-sidebar hidden min-h-0 overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)] lg:flex lg:flex-col", children: [_jsx("div", { className: "lemma-assistant-experience-sidebar-header border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: _jsxs("div", { className: "lemma-assistant-experience-sidebar-header-row flex items-center justify-between gap-3", children: [_jsxs("div", { className: "lemma-assistant-experience-sidebar-copy", children: [_jsx("div", { className: "lemma-assistant-experience-sidebar-title text-[13px] font-semibold text-[var(--text-primary)]", children: "Conversations" }), _jsxs("div", { className: "lemma-assistant-experience-sidebar-meta mt-1 text-[11px] text-[var(--text-tertiary)]", children: [controller.conversations.length, " total"] })] }), _jsx("button", { type: "button", onClick: controller.clearMessages, className: "lemma-assistant-experience-sidebar-new rounded-full border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]", children: "New" })] }) }), _jsx("div", { className: "lemma-assistant-experience-sidebar-items min-h-0 flex-1 overflow-y-auto p-3 space-y-2", children: controller.conversations.map((conversation) => {
                             const isActive = conversation.id === controller.activeConversationId;
                             return (_jsxs("button", { type: "button", onClick: () => controller.selectConversation(conversation.id), className: cx("lemma-assistant-experience-sidebar-item", "w-full rounded-xl border px-3 py-2.5 text-left transition-colors", isActive
                                     ? "lemma-assistant-experience-sidebar-item-active border-[color:color-mix(in_srgb,_var(--brand-primary)_44%,_var(--border-default))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_42%,_var(--bg-surface))]"
                                     : "border-[var(--border-default)] bg-[var(--bg-surface)] hover:bg-[var(--bg-subtle)]"), children: [_jsx("div", { className: "lemma-assistant-experience-sidebar-item-title text-[12px] font-medium text-[var(--text-primary)]", children: renderConversationLabel({ conversation, isActive }) }), _jsx("div", { className: "lemma-assistant-experience-sidebar-item-status mt-1 text-[10px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]", children: (conversation.status || "waiting").toLowerCase() })] }, conversation.id));
-                        }) })] })) : null, _jsxs("div", { className: "lemma-assistant-experience-main flex h-full min-h-0 flex-col gap-3", children: [_jsxs("div", { className: "lemma-assistant-experience-card flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)]", children: [_jsxs("div", { className: "lemma-assistant-experience-header flex items-center justify-between border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: [_jsxs("div", { className: "lemma-assistant-experience-header-copy flex items-center gap-2.5", children: [_jsx("div", { className: "lemma-assistant-experience-header-badge h-7 w-7 rounded-full bg-[linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))] flex items-center justify-center shadow-[var(--shadow-xs)]", children: _jsx("span", { className: "text-[var(--text-on-brand)] text-xs", children: "\u2728" }) }), _jsxs("div", { className: "lemma-assistant-experience-header-titles", children: [_jsx("h3", { className: "lemma-assistant-experience-header-title font-semibold text-[var(--text-primary)] text-[13px] leading-tight", children: title }), _jsx("p", { className: "lemma-assistant-experience-header-subtitle text-[11px] text-[var(--text-tertiary)]", children: subtitle })] })] }), _jsxs("div", { className: "lemma-assistant-experience-header-controls flex items-center gap-1", children: [_jsxs("select", { value: controller.conversationModel || "", onChange: (event) => { void handleModelChange(event.target.value || null); }, disabled: isConversationBusy || isUpdatingModel, className: "lemma-assistant-experience-model-picker h-8 rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] px-3 text-[11px] text-[var(--text-secondary)]", children: [_jsx("option", { value: "", children: "Auto" }), availableModels.map((availableModel) => (_jsx("option", { value: availableModel, children: availableModel }, availableModel)))] }), _jsx("button", { type: "button", onClick: controller.clearMessages, title: "New conversation", className: "lemma-assistant-experience-new inline-flex h-8 w-8 items-center justify-center rounded-full text-[var(--text-tertiary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--text-secondary)]", children: "\u21BA" })] })] }), _jsxs(AssistantMessageViewport, { className: "lemma-assistant-experience-viewport min-h-[180px]", ref: messagesContainerRef, onScroll: updatePinnedState, children: [controller.messages.length === 0 && !isConversationBusy ? (emptyState || _jsx(EmptyState, { onSendMessage: (message) => { void controller.sendMessage(message); } })) : null, (controller.isLoadingMessages && controller.messages.length === 0) ? (_jsx("div", { className: "lemma-assistant-experience-loading flex justify-center py-6", children: _jsx("span", { className: "lemma-assistant-experience-loading-text text-[var(--text-tertiary)] text-sm", children: "Loading\u2026" }) })) : null, (controller.isLoadingOlderMessages && controller.messages.length > 0) ? (_jsx("div", { className: "lemma-assistant-experience-loading-older flex justify-center py-1", children: _jsx("span", { className: "lemma-assistant-experience-loading-older-text text-[var(--text-tertiary)] text-xs", children: "Loading older\u2026" }) })) : null, displayMessageRows.map((row, index) => {
+                        }) })] })) : null, _jsxs("div", { className: "lemma-assistant-experience-main flex h-full min-h-0 flex-col gap-3", children: [_jsxs("div", { className: "lemma-assistant-experience-card flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)]", children: [_jsx(AssistantHeader, { className: "lemma-assistant-experience-header", tone: headerTone, title: title, subtitle: subtitle, badge: _jsx("span", { className: "text-[var(--text-on-brand)] text-xs", children: "\u2728" }), controls: (_jsxs(_Fragment, { children: [_jsx(AssistantModelPicker, { value: controller.conversationModel, options: availableModels, onChange: (nextModel) => { void handleModelChange(nextModel); }, disabled: isConversationBusy || isUpdatingModel, autoLabel: "Auto", className: "lemma-assistant-experience-model-picker" }), _jsx("button", { type: "button", onClick: controller.clearMessages, title: "New conversation", className: "lemma-assistant-experience-new inline-flex h-8 w-8 items-center justify-center rounded-full text-[var(--text-tertiary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--text-secondary)]", children: "\u21BA" })] })) }), _jsxs(AssistantMessageViewport, { className: "lemma-assistant-experience-viewport min-h-[180px]", ref: messagesContainerRef, onScroll: updatePinnedState, children: [controller.messages.length === 0 && !isConversationBusy ? (emptyState || _jsx(EmptyState, { onSendMessage: (message) => { void controller.sendMessage(message); } })) : null, (controller.isLoadingMessages && controller.messages.length === 0) ? (_jsx("div", { className: "lemma-assistant-experience-loading flex justify-center py-6", children: _jsx("span", { className: "lemma-assistant-experience-loading-text text-[var(--text-tertiary)] text-sm", children: "Loading\u2026" }) })) : null, (controller.isLoadingOlderMessages && controller.messages.length > 0) ? (_jsx("div", { className: "lemma-assistant-experience-loading-older flex justify-center py-1", children: _jsx("span", { className: "lemma-assistant-experience-loading-older-text text-[var(--text-tertiary)] text-xs", children: "Loading older\u2026" }) })) : null, displayMessageRows.map((row, index) => {
                                         const previousRow = index > 0 ? displayMessageRows[index - 1] : null;
                                         const showAssistantHeader = row.message.role !== "assistant"
                                             ? false
                                             : previousRow?.message.role !== "assistant";
                                         const includesLastRawMessage = row.sourceIndexes.includes(controller.messages.length - 1);
                                         return (_jsx(MessageGroup, { message: row.message, onNavigateResource: onNavigateResource, onWidgetSendPrompt: handleWidgetSendPrompt, conversationId: controller.activeConversationId, isStreaming: isConversationBusy && includesLastRawMessage && row.message.role === "assistant", showAssistantHeader: showAssistantHeader, renderMessageContent: renderMessageContent, renderPresentedFile: renderPresentedFile, renderToolInvocation: renderToolInvocation }, row.id || index));
-                                    }), controller.error ? (_jsx("div", { className: "lemma-assistant-experience-error bg-[color:color-mix(in_srgb,_var(--state-error)_12%,_transparent)] border border-[color:color-mix(in_srgb,_var(--state-error)_48%,_var(--border-subtle))] rounded-lg p-3 text-xs text-[var(--state-error)] flex items-start gap-2.5", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Something went wrong" }), _jsx("p", { className: "text-[var(--state-error)] mt-1", children: controller.error })] }) })) : null, (controller.messages.length > 0 || isConversationBusy || !!controller.error) ? (_jsx("div", { "aria-hidden": "true", className: "h-14 shrink-0" })) : null] })] }), _jsxs("div", { className: "lemma-assistant-experience-composer relative rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] p-2 shadow-[var(--shadow-md)]", children: [planSummary ? (_jsx("div", { className: "lemma-assistant-experience-plan absolute bottom-[calc(100%+8px)] left-0 right-0 z-20", children: isPlanHidden ? (_jsxs("button", { type: "button", onClick: () => setIsPlanHidden(false), className: "inline-flex items-center gap-2 rounded-lg border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-subtle)] transition-colors", children: ["Show plan (", planSummary.completedCount, "/", planSummary.steps.length, ")"] })) : (_jsx(PlanSummaryStrip, { plan: planSummary, onHide: () => setIsPlanHidden(true) })) })) : null, activeAskQuestion && effectiveAskOverlayState && pendingAskUserInput ? (_jsx(AssistantAskOverlay, { questionNumber: effectiveAskOverlayState.currentQuestionIndex + 1, totalQuestions: pendingAskUserInput.questions.length, question: activeAskQuestion.question, options: activeAskQuestion.options, selectedOptions: activeAskAnswers, canContinue: canContinueAsk, continueLabel: effectiveAskOverlayState.currentQuestionIndex >= pendingAskUserInput.questions.length - 1 ? "Use answers" : "Continue", onSelectOption: updateAskAnswer, onContinue: activeAskQuestion.type !== "single_select" || pendingAskUserInput.questions.length > 1 ? continueAskQuestions : undefined, onSkip: () => dismissAskOverlay(effectiveAskOverlayState.toolCallId), mode: activeAskQuestion.type })) : (_jsxs("div", { className: "lemma-assistant-experience-composer-body space-y-1.5", children: [controller.pendingFiles.length > 0 ? (_jsx("div", { className: "lemma-assistant-experience-pending flex flex-wrap items-center gap-1.5 px-1", children: controller.pendingFiles.map((file) => {
-                                            const fileKey = `${file.name}:${file.size}:${file.lastModified}`;
-                                            return (_jsx("div", { children: renderPendingFile({
-                                                    file,
-                                                    remove: () => controller.removePendingFile(fileKey),
-                                                }) }, fileKey));
-                                        }) })) : null, _jsxs("div", { className: "lemma-assistant-experience-input-row relative flex items-end gap-2", children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "lemma-assistant-experience-file-input hidden", onChange: (event) => { void handleUploadSelection(event.target.files); } }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: isConversationBusy || controller.isUploadingFiles, className: cx("lemma-assistant-experience-upload", "mb-1.5 ml-1 h-9 w-9 rounded-full flex items-center justify-center transition-colors", isConversationBusy || controller.isUploadingFiles
-                                                    ? "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"
-                                                    : "bg-[var(--bg-subtle)] text-[var(--text-secondary)] hover:bg-[var(--bg-canvas)] hover:text-[var(--text-primary)]"), title: "Upload files", children: controller.isUploadingFiles ? "…" : "＋" }), _jsx("textarea", { ref: inputRef, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, className: "lemma-assistant-experience-textarea flex-1 resize-none border-0 bg-transparent px-3 py-2.5 text-[14px] text-[var(--text-primary)] leading-6 focus:ring-0 focus:outline-none placeholder:text-[var(--text-tertiary)] min-h-[48px] max-h-[220px]", rows: 1, disabled: isConversationBusy }), _jsx("div", { className: "lemma-assistant-experience-send-wrap pb-1.5 pr-1.5", children: _jsx("button", { onClick: isConversationBusy ? controller.stop : () => { void handleSubmit(); }, disabled: !isConversationBusy && !draft.trim(), className: cx("lemma-assistant-experience-send", "h-9 w-9 rounded-full flex items-center justify-center transition-all duration-200", isConversationBusy
-                                                        ? "bg-[var(--text-primary)] text-[var(--text-inverse)] hover:bg-[color:color-mix(in_srgb,_var(--text-primary)_80%,_transparent)] hover:scale-105"
-                                                        : draft.trim()
-                                                            ? "bg-[var(--brand-primary)] text-[var(--text-on-brand)] shadow-[var(--shadow-xs)] hover:bg-[color:color-mix(in_srgb,_var(--brand-primary)_88%,_var(--text-primary))]"
-                                                            : "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"), title: isConversationBusy ? "Stop generating" : "Send message", children: isConversationBusy ? "■" : "→" }) })] })] }))] })] })] }));
+                                    }), showInlineStatus ? (_jsx("div", { className: "lemma-assistant-experience-inline-status flex min-h-[38px] items-center px-1", children: _jsx("div", { className: cx("transition-all duration-200", lastMessageHasContent ? "opacity-80" : "opacity-100"), children: _jsx(AssistantStatusPill, { label: liveStatusLabel, subtle: lastMessageHasContent }) }) })) : null, controller.error ? (_jsx("div", { className: "lemma-assistant-experience-error bg-[color:color-mix(in_srgb,_var(--state-error)_12%,_transparent)] border border-[color:color-mix(in_srgb,_var(--state-error)_48%,_var(--border-subtle))] rounded-lg p-3 text-xs text-[var(--state-error)] flex items-start gap-2.5", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Something went wrong" }), _jsx("p", { className: "text-[var(--state-error)] mt-1", children: controller.error })] }) })) : null, (controller.messages.length > 0 || isConversationBusy || !!controller.error) ? (_jsx("div", { "aria-hidden": "true", className: "h-14 shrink-0" })) : null, _jsx("div", { ref: bottomAnchorRef, "aria-hidden": "true", className: "lemma-assistant-experience-bottom-anchor h-px" })] })] }), _jsx(AssistantComposer, { className: "lemma-assistant-experience-composer", tone: composerTone, floating: planSummary ? (isPlanHidden ? (_jsxs("button", { type: "button", onClick: () => setIsPlanHidden(false), className: "inline-flex items-center gap-2 rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_88%,_transparent)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] shadow-[var(--shadow-xs)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-subtle)] transition-colors", children: ["Show plan (", planSummary.completedCount, "/", planSummary.steps.length, ")"] })) : (_jsx(PlanSummaryStrip, { plan: planSummary, onHide: () => setIsPlanHidden(true) }))) : undefined, status: showComposerStatus ? (_jsx(AssistantStatusPill, { label: liveStatusLabel, subtle: true })) : undefined, pendingFiles: controller.pendingFiles.length > 0 ? (_jsx(_Fragment, { children: controller.pendingFiles.map((file) => {
+                                const fileKey = `${file.name}:${file.size}:${file.lastModified}`;
+                                return (_jsx("div", { children: renderPendingFile({
+                                        file,
+                                        remove: () => controller.removePendingFile(fileKey),
+                                    }) }, fileKey));
+                            }) })) : undefined, children: activeAskQuestion && effectiveAskOverlayState && pendingAskUserInput ? (_jsx(AssistantAskOverlay, { questionNumber: effectiveAskOverlayState.currentQuestionIndex + 1, totalQuestions: pendingAskUserInput.questions.length, question: activeAskQuestion.question, options: activeAskQuestion.options, selectedOptions: activeAskAnswers, canContinue: canContinueAsk, continueLabel: effectiveAskOverlayState.currentQuestionIndex >= pendingAskUserInput.questions.length - 1 ? "Use answers" : "Continue", onSelectOption: updateAskAnswer, onContinue: activeAskQuestion.type !== "single_select" || pendingAskUserInput.questions.length > 1 ? continueAskQuestions : undefined, onSkip: () => dismissAskOverlay(effectiveAskOverlayState.toolCallId), mode: activeAskQuestion.type })) : (_jsx("div", { className: "lemma-assistant-experience-composer-body space-y-1.5", children: _jsxs("div", { className: "lemma-assistant-experience-input-row relative flex items-end gap-2", children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "lemma-assistant-experience-file-input hidden", onChange: (event) => { void handleUploadSelection(event.target.files); } }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: isConversationBusy || controller.isUploadingFiles, className: cx("lemma-assistant-experience-upload", "mb-1.5 ml-1 h-9 w-9 rounded-full flex items-center justify-center transition-colors", isConversationBusy || controller.isUploadingFiles
+                                            ? "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"
+                                            : "bg-[var(--bg-subtle)] text-[var(--text-secondary)] hover:bg-[var(--bg-canvas)] hover:text-[var(--text-primary)]"), title: "Upload files", children: controller.isUploadingFiles ? "…" : "＋" }), _jsx("textarea", { ref: inputRef, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, className: "lemma-assistant-experience-textarea flex-1 resize-none border-0 bg-transparent px-3 py-2.5 text-[14px] text-[var(--text-primary)] leading-6 focus:ring-0 focus:outline-none placeholder:text-[var(--text-tertiary)] min-h-[48px] max-h-[220px]", rows: 1, disabled: isConversationBusy }), _jsx("div", { className: "lemma-assistant-experience-send-wrap pb-1.5 pr-1.5", children: _jsx("button", { onClick: isConversationBusy ? controller.stop : () => { void handleSubmit(); }, disabled: !isConversationBusy && !draft.trim(), className: cx("lemma-assistant-experience-send", "h-9 w-9 rounded-full flex items-center justify-center transition-all duration-200", isConversationBusy
+                                                ? "bg-[var(--text-primary)] text-[var(--text-inverse)] hover:bg-[color:color-mix(in_srgb,_var(--text-primary)_80%,_transparent)] hover:scale-105"
+                                                : draft.trim()
+                                                    ? "bg-[var(--brand-primary)] text-[var(--text-on-brand)] shadow-[var(--shadow-xs)] hover:bg-[color:color-mix(in_srgb,_var(--brand-primary)_88%,_var(--text-primary))]"
+                                                    : "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"), title: isConversationBusy ? "Stop generating" : "Send message", children: isConversationBusy ? "■" : "→" }) })] }) })) })] })] }));
 }

package/dist/react/index.d.ts

@@ -14,9 +14,9 @@ export { useAssistantController } from "./useAssistantController.js";
 export type { AssistantAction, AssistantConversationScope, AssistantMessagePart, AssistantRenderableMessage, AssistantToolInvocation, UseAssistantControllerOptions, UseAssistantControllerResult, } from "./useAssistantController.js";
 export type { AssistantConversationRenderArgs, AssistantControllerView, AssistantExperienceCustomizationProps, AssistantMessageRenderArgs, AssistantPendingFileRenderArgs, AssistantPresentedFileRenderArgs, AssistantToolRenderArgs, } from "./components/assistant-types.js";
 export { AssistantAskOverlay, AssistantComposer, AssistantConversationList, AssistantHeader, AssistantMessageViewport, AssistantModelPicker, AssistantPendingFileChip, AssistantShellLayout, AssistantStatusPill, AssistantThemeScope, } from "./components/AssistantChrome.js";
-export type { AssistantAskOverlayProps, AssistantComposerProps, AssistantConversationListProps, AssistantHeaderProps, AssistantMessageViewportProps, AssistantModelPickerProps, AssistantPendingFileChipProps, AssistantShellLayoutProps, AssistantStatusPillProps, AssistantThemeScopeProps, } from "./components/AssistantChrome.js";
+export type { AssistantAskOverlayProps, AssistantComposerProps, AssistantConversationListProps, AssistantHeaderProps, AssistantMessageViewportProps, AssistantModelPickerProps, AssistantPendingFileChipProps, AssistantShellLayoutProps, AssistantStatusPillProps, AssistantSurfaceTone, AssistantThemeMode, AssistantThemeScopeProps, } from "./components/AssistantChrome.js";
 export { AssistantExperienceView } from "./components/AssistantExperience.js";
-export type { ActiveToolBanner, AskUserInputQuestion, AssistantExperienceViewProps, DisplayMessageRow, PendingAskUserInput, PlanStepState, PlanSummaryState, } from "./components/AssistantExperience.js";
+export type { ActiveToolBanner, AskUserInputQuestion, AssistantChromeStyle, AssistantExperienceViewProps, AssistantStatusPlacement, DisplayMessageRow, PendingAskUserInput, PlanStepState, PlanSummaryState, } from "./components/AssistantExperience.js";
 export { AssistantEmbedded } from "./components/AssistantEmbedded.js";
 export type { AssistantEmbeddedProps } from "./components/AssistantEmbedded.js";
 export { buildDisplayMessageRows, dedupToolInvocations, EmptyState, findPendingAskUserInput, formatAskUserInputAnswers, getActiveToolBanner, extractPresentFilePathsFromInvocation, latestPlanSummary, MessageGroup, PlanSummaryStrip, ThinkingIndicator, } from "./components/AssistantExperience.js";

package/dist/react/styles.css

@@ -1,4 +1,5 @@
 .lemma-assistant-theme {
+  color-scheme: light;
   --bg-canvas: #f6f2ea;
   --bg-surface: #fffdf9;
   --bg-subtle: #f1ebde;
@@ -53,6 +54,294 @@
   color: var(--text-tertiary);
 }
 
+@media (prefers-color-scheme: dark) {
+  .lemma-assistant-theme:not([data-lemma-theme="light"]):not([data-lemma-theme="dark"]),
+  .lemma-assistant-theme[data-lemma-theme="auto"] {
+    color-scheme: dark;
+    --bg-canvas: #12100d;
+    --bg-surface: #1b1814;
+    --bg-subtle: #272118;
+    --border-default: #3d3428;
+    --border-subtle: #2d261d;
+    --text-primary: #f5ede0;
+    --text-secondary: #d0c3b1;
+    --text-tertiary: #988d7d;
+    --text-inverse: #15120f;
+    --text-on-brand: #15120f;
+    --brand-primary: #ead9b3;
+    --brand-secondary: #8daa73;
+    --brand-accent: #d9a44b;
+    --brand-glow: #2d2418;
+    --state-success: #7cbc72;
+    --state-error: #ec8d74;
+    --state-info: #7eb8f5;
+    --state-warning: #e0b45d;
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
+    --shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.32);
+    --shadow-md: 0 20px 40px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 28px 56px rgba(0, 0, 0, 0.5);
+  }
+}
+
+:where(.light, [data-theme="light"], [data-color-scheme="light"], [data-mode="light"]) .lemma-assistant-theme:not([data-lemma-theme="dark"]),
+.lemma-assistant-theme[data-lemma-theme="light"] {
+  color-scheme: light;
+  --bg-canvas: #f6f2ea;
+  --bg-surface: #fffdf9;
+  --bg-subtle: #f1ebde;
+  --border-default: #ddd2bb;
+  --border-subtle: #ebe2d0;
+  --text-primary: #241f16;
+  --text-secondary: #5c5344;
+  --text-tertiary: #8a7f6f;
+  --text-inverse: #fffdf9;
+  --text-on-brand: #fffdf9;
+  --brand-primary: #202418;
+  --brand-secondary: #6e8c56;
+  --brand-accent: #c78a2c;
+  --brand-glow: #efe3c7;
+  --state-success: #3e7a3c;
+  --state-error: #b44d36;
+  --state-info: #2f6fb2;
+  --state-warning: #c78a2c;
+  --shadow-xs: 0 1px 2px rgba(36, 31, 22, 0.08);
+  --shadow-sm: 0 8px 24px rgba(36, 31, 22, 0.08);
+  --shadow-md: 0 18px 36px rgba(36, 31, 22, 0.1);
+  --shadow-lg: 0 24px 48px rgba(36, 31, 22, 0.14);
+}
+
+:where(.dark, [data-theme="dark"], [data-color-scheme="dark"], [data-mode="dark"]) .lemma-assistant-theme:not([data-lemma-theme="light"]),
+.lemma-assistant-theme[data-lemma-theme="dark"] {
+  color-scheme: dark;
+  --bg-canvas: #12100d;
+  --bg-surface: #1b1814;
+  --bg-subtle: #272118;
+  --border-default: #3d3428;
+  --border-subtle: #2d261d;
+  --text-primary: #f5ede0;
+  --text-secondary: #d0c3b1;
+  --text-tertiary: #988d7d;
+  --text-inverse: #15120f;
+  --text-on-brand: #15120f;
+  --brand-primary: #ead9b3;
+  --brand-secondary: #8daa73;
+  --brand-accent: #d9a44b;
+  --brand-glow: #2d2418;
+  --state-success: #7cbc72;
+  --state-error: #ec8d74;
+  --state-info: #7eb8f5;
+  --state-warning: #e0b45d;
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
+  --shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.32);
+  --shadow-md: 0 20px 40px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 28px 56px rgba(0, 0, 0, 0.5);
+}
+
+.lemma-assistant-embedded {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
+.lemma-assistant-markdown {
+  color: inherit;
+  line-height: 1.7;
+  word-break: break-word;
+}
+
+.lemma-assistant-markdown > :first-child {
+  margin-top: 0;
+}
+
+.lemma-assistant-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.lemma-assistant-markdown p,
+.lemma-assistant-markdown ul,
+.lemma-assistant-markdown ol,
+.lemma-assistant-markdown pre,
+.lemma-assistant-markdown blockquote,
+.lemma-assistant-markdown table,
+.lemma-assistant-markdown hr {
+  margin: 0 0 0.95em;
+}
+
+.lemma-assistant-markdown h1,
+.lemma-assistant-markdown h2,
+.lemma-assistant-markdown h3,
+.lemma-assistant-markdown h4 {
+  margin: 1.15em 0 0.55em;
+  line-height: 1.25;
+  color: var(--text-primary);
+}
+
+.lemma-assistant-markdown h1 {
+  font-size: 1.4rem;
+}
+
+.lemma-assistant-markdown h2 {
+  font-size: 1.2rem;
+}
+
+.lemma-assistant-markdown h3 {
+  font-size: 1.05rem;
+}
+
+.lemma-assistant-markdown h4 {
+  font-size: 0.95rem;
+}
+
+.lemma-assistant-markdown ul,
+.lemma-assistant-markdown ol {
+  padding-left: 1.35rem;
+}
+
+.lemma-assistant-markdown ul {
+  list-style: disc;
+}
+
+.lemma-assistant-markdown ol {
+  list-style: decimal;
+}
+
+.lemma-assistant-markdown li + li {
+  margin-top: 0.3rem;
+}
+
+.lemma-assistant-markdown li > ul,
+.lemma-assistant-markdown li > ol {
+  margin-top: 0.35rem;
+  margin-bottom: 0;
+}
+
+.lemma-assistant-markdown a {
+  color: var(--state-info);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--state-info) 56%, transparent);
+  text-underline-offset: 0.16em;
+}
+
+.lemma-assistant-markdown a:hover {
+  color: color-mix(in srgb, var(--state-info) 82%, var(--text-primary));
+}
+
+.lemma-assistant-markdown strong {
+  color: var(--text-primary);
+  font-weight: 650;
+}
+
+.lemma-assistant-markdown em {
+  color: var(--text-secondary);
+}
+
+.lemma-assistant-markdown hr {
+  border: 0;
+  border-top: 1px solid color-mix(in srgb, var(--border-default) 88%, transparent);
+}
+
+.lemma-assistant-markdown blockquote {
+  padding: 0.15rem 0 0.15rem 0.9rem;
+  border-left: 3px solid color-mix(in srgb, var(--brand-accent) 60%, var(--border-default));
+  color: var(--text-secondary);
+}
+
+.lemma-assistant-markdown :not(pre) > code {
+  display: inline-block;
+  margin: 0 0.08rem;
+  padding: 0.1rem 0.42rem;
+  border: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--bg-subtle) 88%, transparent);
+  color: var(--text-primary);
+  font-size: 0.92em;
+  line-height: 1.45;
+}
+
+.lemma-assistant-markdown pre {
+  overflow-x: auto;
+  padding: 0.9rem 1rem;
+  border: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--bg-canvas) 74%, var(--bg-surface));
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 60%, transparent);
+}
+
+.lemma-assistant-markdown pre code {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 0.92em;
+  line-height: 1.65;
+}
+
+.lemma-assistant-markdown table {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
+}
+
+.lemma-assistant-markdown thead {
+  background: color-mix(in srgb, var(--bg-subtle) 76%, transparent);
+}
+
+.lemma-assistant-markdown th,
+.lemma-assistant-markdown td {
+  padding: 0.7rem 0.85rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
+  text-align: left;
+  vertical-align: top;
+}
+
+.lemma-assistant-markdown tr:last-child td {
+  border-bottom: 0;
+}
+
+.lemma-assistant-markdown img {
+  max-width: 100%;
+  border-radius: 14px;
+}
+
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown,
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown h1,
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown h2,
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown h3,
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown h4,
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown strong,
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown em,
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown a,
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown code,
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown pre code {
+  color: inherit;
+}
+
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown a {
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+}
+
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown blockquote {
+  border-left-color: color-mix(in srgb, currentColor 34%, transparent);
+  color: inherit;
+}
+
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown :not(pre) > code {
+  border-color: color-mix(in srgb, currentColor 18%, transparent);
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  color: inherit;
+}
+
+.lemma-assistant-message-user-bubble .lemma-assistant-markdown pre {
+  border-color: color-mix(in srgb, currentColor 18%, transparent);
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+
 .lemma-assistant-shell,
 .lemma-assistant-experience,
 .lemma-assistant-shell-sidebar,
@@ -95,6 +384,24 @@
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  background: transparent;
+  border-bottom: 0;
+  box-shadow: none;
+}
+
+
+.lemma-assistant-header[data-tone="default"],
+.lemma-assistant-experience-header[data-tone="default"] {
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border-default);
+}
+
+.lemma-assistant-header[data-tone="flat"],
+.lemma-assistant-experience-header[data-tone="flat"] {
+  background: transparent;
+  border-bottom: 0;
+  box-shadow: none;
+  padding-bottom: 0;
 }
 
 .lemma-assistant-header-copy,
@@ -177,6 +484,8 @@
 .lemma-assistant-experience-model-picker {
   appearance: none;
   min-width: 132px;
+  border-color: transparent;
+  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
 }
 
 .lemma-assistant-viewport,
@@ -198,6 +507,22 @@
   box-shadow: var(--shadow-md);
 }
 
+
+.lemma-assistant-composer[data-tone="subtle"],
+.lemma-assistant-experience-composer[data-tone="subtle"] {
+  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
+  border-color: color-mix(in srgb, var(--border-default) 88%, transparent);
+  box-shadow: var(--shadow-sm);
+}
+
+.lemma-assistant-composer[data-tone="flat"],
+.lemma-assistant-experience-composer[data-tone="flat"] {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+
 .lemma-assistant-composer-floating,
 .lemma-assistant-experience-plan {
   position: absolute;
@@ -205,6 +530,7 @@
   right: 0;
   bottom: calc(100% + 8px);
   z-index: 20;
+  pointer-events: auto;
 }
 
 .lemma-assistant-composer-status-rail {
@@ -223,6 +549,41 @@
   gap: 6px;
 }
 
+.lemma-assistant-conversation-list-new,
+.lemma-assistant-experience-sidebar-new {
+  border-color: color-mix(in srgb, var(--border-default) 88%, transparent);
+}
+
+
+.lemma-assistant-experience-new,
+.lemma-assistant-conversation-list-new,
+.lemma-assistant-experience-sidebar-new {
+  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
+  backdrop-filter: blur(12px);
+}
+
+.lemma-assistant-experience-new {
+  border: 0;
+}
+
+.lemma-assistant-experience[data-chrome-style="subtle"] .lemma-assistant-experience-card,
+.lemma-assistant-experience[data-chrome-style="subtle"] .lemma-assistant-experience-sidebar {
+  box-shadow: var(--shadow-md);
+}
+
+.lemma-assistant-experience[data-chrome-style="flat"] .lemma-assistant-experience-card,
+.lemma-assistant-experience[data-chrome-style="flat"] .lemma-assistant-experience-sidebar {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.lemma-assistant-plan-strip {
+  background: var(--bg-surface);
+  border-color: color-mix(in srgb, var(--border-default) 88%, transparent);
+  box-shadow: var(--shadow-sm);
+}
+
 .lemma-assistant-pending-file-chip {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemma-sdk",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "description": "Official TypeScript SDK for Lemma pod-scoped APIs",
   "type": "module",
   "main": "dist/index.js",
@@ -53,6 +53,8 @@
     }
   },
   "dependencies": {
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "supertokens-web-js": "^0.16.0"
   },
   "devDependencies": {