@runtypelabs/persona 4.13.0 → 4.15.0

package/src/theme-editor/presets.ts

@@ -2,100 +2,114 @@
 
 import type { ThemeEditorPreset } from './types';
 
-export const BUILT_IN_PRESETS: ThemeEditorPreset[] = [
-  {
-    id: 'default-light',
-    name: 'Default Light',
-    description: 'Clean monochrome light theme',
-    theme: {
-      components: {
-        artifact: {
-          pane: {
-            background: 'semantic.colors.container',
-            toolbarBackground: 'semantic.colors.container',
-          },
+const DEFAULT_LIGHT_PRESET: ThemeEditorPreset = {
+  id: 'default-light',
+  name: 'Default Light',
+  description: 'Clean monochrome light theme',
+  theme: {
+    components: {
+      artifact: {
+        pane: {
+          background: 'semantic.colors.container',
+          toolbarBackground: 'semantic.colors.container',
         },
       },
     },
-    preview: { primary: '#171717', surface: '#ffffff', accent: '#0f0f0f' },
-    tags: ['light'],
   },
-  {
-    id: 'default-dark',
-    name: 'Default Dark',
-    description: 'Monochrome dark theme',
-    theme: {
-      palette: {
-        colors: {
-          primary: {
-            50: '#ffffff', 100: '#f5f5f5', 200: '#d4d4d4', 300: '#a3a3a3',
-            400: '#737373', 500: '#171717', 600: '#0f0f0f', 700: '#0a0a0a',
-            800: '#050505', 900: '#030303', 950: '#000000',
-          },
-          gray: {
-            50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db',
-            400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151',
-            800: '#1f2937', 900: '#111827', 950: '#030712',
-          },
-          secondary: {
-            50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd',
-            400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9',
-            800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065',
-          },
-          accent: {
-            50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9',
-            400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490',
-            800: '#155e75', 900: '#164e63', 950: '#083344',
-          },
-          success: {
-            50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac',
-            400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d',
-            800: '#166534', 900: '#14532d',
-          },
-          warning: {
-            50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047',
-            400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207',
-            800: '#854d0e', 900: '#713f12',
-          },
-          error: {
-            50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5',
-            400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c',
-            800: '#991b1b', 900: '#7f1d1d',
-          },
+  preview: { primary: '#171717', surface: '#ffffff', accent: '#0f0f0f' },
+  tags: ['light'],
+};
+
+const DEFAULT_DARK_PRESET: ThemeEditorPreset = {
+  id: 'default-dark',
+  name: 'Default Dark',
+  description: 'Monochrome dark theme',
+  theme: {
+    palette: {
+      colors: {
+        primary: {
+          50: '#ffffff', 100: '#f5f5f5', 200: '#d4d4d4', 300: '#a3a3a3',
+          400: '#737373', 500: '#171717', 600: '#0f0f0f', 700: '#0a0a0a',
+          800: '#050505', 900: '#030303', 950: '#000000',
         },
-      } as any,
-      semantic: {
-        colors: {
-          primary: 'palette.colors.primary.400',
-          secondary: 'palette.colors.gray.400',
-          accent: 'palette.colors.primary.500',
-          surface: 'palette.colors.gray.800',
-          background: 'palette.colors.gray.900',
-          container: 'palette.colors.gray.800',
-          text: 'palette.colors.gray.100',
-          textMuted: 'palette.colors.gray.400',
-          textInverse: 'palette.colors.gray.900',
-          border: 'palette.colors.gray.700',
-          divider: 'palette.colors.gray.700',
-          interactive: {
-            default: 'palette.colors.primary.400',
-            hover: 'palette.colors.primary.300',
-            focus: 'palette.colors.primary.500',
-            active: 'palette.colors.primary.600',
-            disabled: 'palette.colors.gray.600',
-          },
-          feedback: {
-            success: 'palette.colors.success.400',
-            warning: 'palette.colors.warning.400',
-            error: 'palette.colors.error.400',
-            info: 'palette.colors.primary.400',
-          },
+        gray: {
+          50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db',
+          400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151',
+          800: '#1f2937', 900: '#111827', 950: '#030712',
         },
-      } as any,
-    },
-    preview: { primary: '#171717', surface: '#1f2937', accent: '#0f0f0f' },
-    tags: ['dark'],
+        secondary: {
+          50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd',
+          400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9',
+          800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065',
+        },
+        accent: {
+          50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9',
+          400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490',
+          800: '#155e75', 900: '#164e63', 950: '#083344',
+        },
+        success: {
+          50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac',
+          400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d',
+          800: '#166534', 900: '#14532d',
+        },
+        warning: {
+          50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047',
+          400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207',
+          800: '#854d0e', 900: '#713f12',
+        },
+        error: {
+          50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5',
+          400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c',
+          800: '#991b1b', 900: '#7f1d1d',
+        },
+      },
+    } as any,
+    semantic: {
+      colors: {
+        primary: 'palette.colors.primary.400',
+        secondary: 'palette.colors.gray.400',
+        accent: 'palette.colors.primary.500',
+        surface: 'palette.colors.gray.800',
+        background: 'palette.colors.gray.900',
+        container: 'palette.colors.gray.800',
+        text: 'palette.colors.gray.100',
+        textMuted: 'palette.colors.gray.400',
+        textInverse: 'palette.colors.gray.900',
+        border: 'palette.colors.gray.700',
+        divider: 'palette.colors.gray.700',
+        interactive: {
+          default: 'palette.colors.primary.400',
+          hover: 'palette.colors.primary.300',
+          focus: 'palette.colors.primary.500',
+          active: 'palette.colors.primary.600',
+          disabled: 'palette.colors.gray.600',
+        },
+        feedback: {
+          success: 'palette.colors.success.400',
+          warning: 'palette.colors.warning.400',
+          error: 'palette.colors.error.400',
+          info: 'palette.colors.primary.400',
+        },
+      },
+    } as any,
+  },
+  preview: { primary: '#171717', surface: '#1f2937', accent: '#0f0f0f' },
+  tags: ['dark'],
+};
+
+export const BUILT_IN_PRESETS: ThemeEditorPreset[] = [
+  {
+    id: 'persona-default',
+    name: 'Persona Default',
+    description: 'Adaptive Persona theme with light and dark modes',
+    theme: DEFAULT_LIGHT_PRESET.theme,
+    darkTheme: DEFAULT_DARK_PRESET.theme,
+    preview: DEFAULT_LIGHT_PRESET.preview,
+    darkPreview: DEFAULT_DARK_PRESET.preview,
+    tags: ['light', 'dark', 'adaptive'],
   },
+  DEFAULT_LIGHT_PRESET,
+  DEFAULT_DARK_PRESET,
   {
     id: 'high-contrast',
     name: 'High Contrast',

package/src/theme-editor/preview-utils.test.ts

@@ -9,6 +9,40 @@ import {
 } from "./preview-utils";
 
 describe("theme editor preview demo data", () => {
+  it("keeps the home scene in a true pre-conversation state", () => {
+    const config = buildPreviewConfig({ scene: "home" });
+
+    expect(config.initialMessages).toEqual([]);
+    expect(config.suggestionChips?.length).toBeGreaterThan(0);
+  });
+
+  it("seeds rich agent suggestions in the follow-ups scene", () => {
+    const config = buildPreviewConfig({ scene: "follow-ups" });
+    const messages = config.initialMessages ?? [];
+    const suggestionMessage = messages.find(
+      (message) =>
+        message.variant === "tool" &&
+        message.toolCall?.name === "suggest_replies",
+    );
+    const suggestions = (
+      suggestionMessage?.toolCall?.args as
+        | { suggestions?: Array<Record<string, unknown>> }
+        | undefined
+    )?.suggestions;
+
+    expect(messages.some((message) => message.role === "user")).toBe(true);
+    expect(suggestionMessage?.toolCall?.status).toBe("complete");
+    expect(suggestions).toHaveLength(4);
+    expect(suggestions?.[0]).toEqual(
+      expect.objectContaining({
+        label: "Show me an implementation",
+        description: expect.any(String),
+        icon: "code-2",
+        emphasis: "primary",
+      }),
+    );
+  });
+
   it("seeds tool call preview messages when advanced tool display modes are enabled", () => {
     const config = buildPreviewConfig({
       scene: "conversation",

package/src/theme-editor/preview-utils.ts

@@ -195,7 +195,12 @@ export function buildSrcdoc(
 
 // ─── Preview Messages ───────────────────────────────────────────
 
-export type PreviewScene = 'home' | 'conversation' | 'minimized' | 'artifact';
+export type PreviewScene =
+  | 'home'
+  | 'conversation'
+  | 'follow-ups'
+  | 'minimized'
+  | 'artifact';
 
 export type PreviewTranscriptEntryPreset =
   | 'user-message'
@@ -543,8 +548,78 @@ export function createPreviewMessages(
   config?: Partial<AgentWidgetConfig>,
   appendedMessages: AgentWidgetMessage[] = []
 ): AgentWidgetMessage[] {
+  if (scene === 'follow-ups') {
+    const now = Date.now();
+    return [
+      {
+        id: 'preview-follow-up-user',
+        role: 'user',
+        content: 'What can Persona help me build?',
+        createdAt: new Date(now - 120000).toISOString(),
+      },
+      {
+        id: 'preview-follow-up-assistant',
+        role: 'assistant',
+        content:
+          'Persona gives you a themeable streaming chat interface with flexible integrations and interaction patterns. Where would you like to go next?',
+        createdAt: new Date(now - 60000).toISOString(),
+      },
+      {
+        id: 'preview-follow-up-suggestions',
+        role: 'assistant',
+        content: '',
+        createdAt: new Date(now - 59000).toISOString(),
+        streaming: false,
+        variant: 'tool',
+        toolCall: {
+          id: 'preview-follow-up-suggestions',
+          name: 'suggest_replies',
+          status: 'complete',
+          args: {
+            suggestions: [
+              {
+                id: 'preview-implementation',
+                label: 'Show me an implementation',
+                prompt: 'Show me a practical implementation',
+                description: 'See a complete integration example',
+                icon: 'code-2',
+                emphasis: 'primary',
+              },
+              {
+                id: 'preview-theming',
+                label: 'Explore theming',
+                prompt: 'Tell me how theming works',
+                description: 'Customize colors, type, and component styles',
+                icon: 'palette',
+              },
+              {
+                id: 'preview-security',
+                label: 'Review security',
+                prompt: 'Explain the security model',
+                description: 'Learn about isolation and safe rendering',
+                icon: 'shield-check',
+              },
+              {
+                id: 'preview-support',
+                label: 'Talk to support',
+                prompt: 'Help me contact support',
+                description: 'Get help choosing the right approach',
+                icon: 'messages-square',
+              },
+            ],
+          },
+          chunks: [],
+        },
+      },
+      ...appendedMessages,
+    ];
+  }
   if (scene === 'home') {
-    return [{ id: 'preview-home-1', role: 'assistant', content: 'Hi there! How can we help today?', createdAt: new Date().toISOString() }];
+    // Home is the pre-conversation state: welcome copy + starter suggestions
+    // already provide the greeting and entry points. Seeding an assistant
+    // bubble here creates a duplicate greeting that the default runtime never
+    // enters unless a host explicitly configures its own initialMessages.
+    return [];
   }
   if (scene === 'minimized') {
     return [{ id: 'preview-min-1', role: 'assistant', content: 'We are here whenever you are ready.', createdAt: new Date().toISOString() }];

package/src/theme-editor/sections.test.ts

@@ -60,6 +60,39 @@ describe("theme editor scroll-to-bottom controls", () => {
     expect(fieldPaths).toContain("theme.components.scrollToBottom.iconSize");
   });
 
+  it("exposes suggestion behavior and component token controls", () => {
+    const suggestions = CONFIGURE_SECTIONS.find(
+      (section) => section.id === "suggestions"
+    );
+    const configPaths =
+      suggestions?.fields.map((field) => field.path) ?? [];
+    expect(configPaths).toEqual(
+      expect.arrayContaining([
+        "suggestions.starters.variant",
+        "suggestions.starters.placement",
+        "suggestions.starters.behavior",
+        "suggestions.followUps.variant",
+        "suggestions.followUps.placement",
+        "suggestions.followUps.behavior",
+        "suggestions.followUps.overflow",
+      ])
+    );
+
+    const componentPaths = COMPONENTS_SECTIONS.flatMap((section) =>
+      section.fields.map((field) => field.path)
+    );
+    expect(componentPaths).toEqual(
+      expect.arrayContaining([
+        "theme.components.suggestion.chip.background",
+        "theme.components.suggestion.chip.hoverBackground",
+        "theme.components.suggestion.chip.focusRing",
+        "theme.components.suggestion.card.background",
+        "theme.components.suggestion.card.shadow",
+        "theme.components.suggestion.list.background",
+      ])
+    );
+  });
+
   it("exposes a shadow control for every themeable component", () => {
     const fieldPaths = COMPONENTS_SECTIONS.flatMap((section) => section.fields.map((field) => field.path));
 
@@ -99,16 +132,45 @@ describe("theme editor scroll-to-bottom controls", () => {
     expect(INTERFACE_ROLES_SECTION.fields.some((field) => field.id === "role-scroll-to-bottom")).toBe(true);
   });
 
-  it("exposes grouped and collapsed tool call preview controls", () => {
+  it("moves persistable stream controls out of developer debug without duplicates", () => {
     const debugSection = CONFIGURE_SECTIONS.find((section) => section.id === "debug-inspection");
+    const preferenceSection = CONFIGURE_SECTIONS.find(
+      (section) => section.id === "stream-display-preferences"
+    );
 
-    expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.collapsedMode")).toBe(true);
+    expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.collapsedMode")).toBe(false);
     expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.activePreview")).toBe(true);
     expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.previewMaxLines")).toBe(true);
     expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.activeMinHeight")).toBe(true);
-    expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.expandable")).toBe(true);
-    expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.grouped")).toBe(true);
-    expect(debugSection?.fields.some((field) => field.path === "features.toolCallDisplay.groupedMode")).toBe(true);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.toolCallDisplay.collapsedMode")).toBe(true);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.toolCallDisplay.expandable")).toBe(true);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.toolCallDisplay.grouped")).toBe(true);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.toolCallDisplay.groupedMode")).toBe(true);
+
+    const paths = CONFIGURE_SECTIONS.flatMap((section) =>
+      section.fields.map((field) => field.path)
+    );
+    expect(paths.filter((path) => path === "features.toolCallDisplay.grouped")).toHaveLength(1);
+  });
+
+  it("exposes inheritable capability-tagged artifact preference fields", () => {
+    const section = CONFIGURE_SECTIONS.find(
+      (entry) => entry.id === "artifact-display-preferences"
+    );
+    const paths = section?.fields.map((field) => field.path) ?? [];
+    expect(paths).toEqual(
+      expect.arrayContaining([
+        "features.artifacts.display.files",
+        "features.artifacts.display.byKind.component",
+        "features.artifacts.display.default",
+        "features.artifacts.filePreview.enabled",
+      ])
+    );
+    expect(paths).not.toContain("features.artifacts.display.byKind.markdown");
+    expect(paths).not.toContain("features.artifacts.display.byCategory.document");
+    expect(paths).not.toContain("features.artifacts.display.byCategory.application");
+    expect(section?.requiresCapability).toBe("artifacts");
+    expect(section?.fields.every((field) => field.unsettable)).toBe(true);
   });
 
   it("exposes product-facing artifact toolbar copy", () => {
@@ -129,9 +191,12 @@ describe("theme editor scroll-to-bottom controls", () => {
 
   it("exposes collapsed reasoning preview controls", () => {
     const debugSection = CONFIGURE_SECTIONS.find((section) => section.id === "debug-inspection");
+    const preferenceSection = CONFIGURE_SECTIONS.find(
+      (section) => section.id === "stream-display-preferences"
+    );
 
-    expect(debugSection?.fields.some((field) => field.path === "features.reasoningDisplay.expandable")).toBe(true);
-    expect(debugSection?.fields.some((field) => field.path === "features.reasoningDisplay.activePreview")).toBe(true);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.reasoningDisplay.expandable")).toBe(true);
+    expect(preferenceSection?.fields.some((field) => field.path === "features.reasoningDisplay.activePreview")).toBe(true);
     expect(debugSection?.fields.some((field) => field.path === "features.reasoningDisplay.previewMaxLines")).toBe(true);
     expect(debugSection?.fields.some((field) => field.path === "features.reasoningDisplay.activeMinHeight")).toBe(true);
   });

package/src/theme-editor/sections.ts

@@ -369,6 +369,18 @@ const inputShapeSectionDef: SectionDef = {
   ],
 };
 
+const composerSpacingSectionDef: SectionDef = {
+  id: 'comp-composer-spacing',
+  title: 'Composer Spacing',
+  collapsed: true,
+  fields: [
+    { id: 'composer-padding', label: 'Padding', type: 'text', path: 'theme.components.composer.padding', defaultValue: '0.75rem 1rem' },
+    { id: 'composer-gap', label: 'Row Gap', description: 'Space between the textarea row and the actions row', type: 'text', path: 'theme.components.composer.gap', defaultValue: '0.5rem' },
+    { id: 'composer-font-size', label: 'Font Size', type: 'text', path: 'theme.components.composer.fontSize', defaultValue: '0.875rem' },
+    { id: 'composer-line-height', label: 'Line Height', type: 'text', path: 'theme.components.composer.lineHeight', defaultValue: '1.25rem' },
+  ],
+};
+
 const buttonShapeSectionDef: SectionDef = {
   id: 'comp-button-shape',
   title: 'Button Shape',
@@ -466,6 +478,32 @@ const scrollToBottomSectionDef: SectionDef = {
   ],
 };
 
+const suggestionStyleSectionDef: SectionDef = {
+  id: 'comp-suggestions',
+  title: 'Suggestions',
+  description: 'Style starter cards, follow-up chips, and list rows.',
+  collapsed: true,
+  fields: [
+    { id: 'suggestion-chip-bg', label: 'Chip Background', type: 'token-ref', path: 'theme.components.suggestion.chip.background', defaultValue: 'semantic.colors.surface', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-chip-fg', label: 'Chip Text', type: 'token-ref', path: 'theme.components.suggestion.chip.foreground', defaultValue: 'semantic.colors.text', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-chip-border', label: 'Chip Border', type: 'token-ref', path: 'theme.components.suggestion.chip.border', defaultValue: 'semantic.colors.border', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-chip-hover', label: 'Chip Hover', type: 'token-ref', path: 'theme.components.suggestion.chip.hoverBackground', defaultValue: 'palette.colors.gray.100', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-chip-focus', label: 'Chip Focus Ring', type: 'token-ref', path: 'theme.components.suggestion.chip.focusRing', defaultValue: 'semantic.colors.interactive.focus', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-card-bg', label: 'Card Background', type: 'token-ref', path: 'theme.components.suggestion.card.background', defaultValue: 'semantic.colors.surface', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-card-fg', label: 'Card Text', type: 'token-ref', path: 'theme.components.suggestion.card.foreground', defaultValue: 'semantic.colors.text', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-card-border', label: 'Card Border', type: 'token-ref', path: 'theme.components.suggestion.card.border', defaultValue: 'semantic.colors.border', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-card-hover', label: 'Card Hover', type: 'token-ref', path: 'theme.components.suggestion.card.hoverBackground', defaultValue: 'palette.colors.gray.100', tokenRef: { tokenType: 'color' } },
+    { id: 'suggestion-card-shadow', label: 'Card Shadow', type: 'select', path: 'theme.components.suggestion.card.shadow', defaultValue: 'palette.shadows.sm', options: [
+      { value: 'palette.shadows.none', label: 'None' },
+      { value: 'palette.shadows.sm', label: 'Small' },
+      { value: 'palette.shadows.md', label: 'Medium' },
+      { value: 'palette.shadows.lg', label: 'Large' },
+    ] },
+    { id: 'suggestion-list-bg', label: 'List Background', type: 'color', path: 'theme.components.suggestion.list.background', defaultValue: 'transparent' },
+    { id: 'suggestion-list-border', label: 'List Border', type: 'token-ref', path: 'theme.components.suggestion.list.border', defaultValue: 'semantic.colors.border', tokenRef: { tokenType: 'color' } },
+  ],
+};
+
 // Reusable shadow-scale options matching the launcher / panel / scroll-to-bottom selects.
 const SHADOW_SCALE_OPTIONS: { value: string; label: string }[] = [
   { value: 'palette.shadows.none', label: 'None' },
@@ -502,6 +540,7 @@ export const COMPONENT_SHAPE_SECTIONS: SectionDef[] = [
   launcherLayoutSectionDef,
   messageShapeSectionDef,
   inputShapeSectionDef,
+  composerSpacingSectionDef,
   buttonShapeSectionDef,
   componentShadowsSectionDef,
 ];
@@ -513,6 +552,7 @@ export const COMPONENT_COLOR_SECTIONS: SectionDef[] = [
   inputColorsSectionDef,
   buttonColorsSectionDef,
   scrollToBottomSectionDef,
+  suggestionStyleSectionDef,
 ];
 
 export const COMPONENTS_SECTIONS: SectionDef[] = [
@@ -526,9 +566,9 @@ export const COMPONENTS_SECTIONS: SectionDef[] = [
 
 const MB = 1024 * 1024;
 const DEFAULT_SUGGESTION_CHIPS = [
-  'What can you help me with?',
-  'Tell me about your features',
-  'How does this work?',
+  'Show me what you can help with',
+  'Walk me through getting started',
+  'Answer a question about this page',
 ];
 
 const ATTACHMENT_TYPE_PRESETS: Record<string, string[]> = {
@@ -576,9 +616,17 @@ const copySectionDef: SectionDef = {
 };
 
 const suggestionsSectionDef: SectionDef = {
-  id: 'suggestions', title: 'Suggestion Chips', description: 'Configure chip content and styling.', collapsed: true,
+  id: 'suggestions', title: 'Suggestions', description: 'Configure starter prompts and agent follow-ups.', collapsed: true,
   fields: [
-    { id: 'suggestions-list', label: 'Suggestions', description: 'Add, edit, and remove chips directly.', type: 'chip-list', path: 'suggestionChips', defaultValue: DEFAULT_SUGGESTION_CHIPS },
+    { id: 'suggestions-list', label: 'Starter Prompts', description: 'Add, edit, and remove starter prompts directly.', type: 'chip-list', path: 'suggestionChips', defaultValue: DEFAULT_SUGGESTION_CHIPS },
+    { id: 'suggestions-starter-variant', label: 'Starter Style', type: 'select', path: 'suggestions.starters.variant', defaultValue: 'card', options: [{ value: 'card', label: 'Cards' }, { value: 'chip', label: 'Chips' }, { value: 'list', label: 'List' }] },
+    { id: 'suggestions-starter-placement', label: 'Starter Placement', type: 'select', path: 'suggestions.starters.placement', defaultValue: 'auto', options: [{ value: 'auto', label: 'Automatic' }, { value: 'welcome', label: 'Welcome Surface' }, { value: 'composer', label: 'Above Composer' }] },
+    { id: 'suggestions-starter-behavior', label: 'Starter Click', type: 'select', path: 'suggestions.starters.behavior', defaultValue: 'send', options: [{ value: 'send', label: 'Send Immediately' }, { value: 'fill', label: 'Fill Composer' }] },
+    { id: 'suggestions-starter-overflow', label: 'Starter Overflow', type: 'select', path: 'suggestions.starters.overflow', defaultValue: 'wrap', options: [{ value: 'wrap', label: 'Wrap Rows' }, { value: 'scroll', label: 'Horizontal Scroll' }] },
+    { id: 'suggestions-followup-variant', label: 'Follow-up Style', type: 'select', path: 'suggestions.followUps.variant', defaultValue: 'chip', options: [{ value: 'chip', label: 'Chips' }, { value: 'card', label: 'Cards' }, { value: 'list', label: 'List' }] },
+    { id: 'suggestions-followup-placement', label: 'Follow-up Placement', type: 'select', path: 'suggestions.followUps.placement', defaultValue: 'auto', options: [{ value: 'auto', label: 'Automatic' }, { value: 'after-message', label: 'After Messages' }, { value: 'composer', label: 'Above Composer' }] },
+    { id: 'suggestions-followup-behavior', label: 'Follow-up Click', type: 'select', path: 'suggestions.followUps.behavior', defaultValue: 'send', options: [{ value: 'send', label: 'Send Immediately' }, { value: 'fill', label: 'Fill Composer' }] },
+    { id: 'suggestions-followup-overflow', label: 'Follow-up Overflow', type: 'select', path: 'suggestions.followUps.overflow', defaultValue: 'scroll', options: [{ value: 'scroll', label: 'Horizontal Scroll' }, { value: 'wrap', label: 'Wrap Rows' }] },
   ],
 };
 
@@ -869,20 +917,71 @@ const apiIntegrationSectionDef: SectionDef = {
   ],
 };
 
+const DISPLAY_MODE_OPTIONS = [
+  { value: 'collapsed', label: 'Collapsed card' },
+  { value: 'panel', label: 'Side panel' },
+  { value: 'inline', label: 'In conversation' },
+];
+
+const INHERITABLE_DISPLAY_FIELD = {
+  type: 'select' as const,
+  defaultValue: 'panel',
+  options: DISPLAY_MODE_OPTIONS,
+  unsettable: true,
+  unsetLabel: 'Use default',
+  requiresCapability: 'artifacts' as const,
+};
+
+export const ARTIFACT_DISPLAY_PREFERENCE_SECTION: SectionDef = {
+  id: 'artifact-display-preferences',
+  title: 'Artifact display',
+  description: 'Choose where recognizable artifact groups appear.',
+  requiresCapability: 'artifacts',
+  fields: [
+    { ...INHERITABLE_DISPLAY_FIELD, id: 'artifact-display-files', label: 'Generated files', description: 'Default for HTML, CSV, documents, and code files.', path: 'features.artifacts.display.files' },
+    { ...INHERITABLE_DISPLAY_FIELD, id: 'artifact-display-components', label: 'Registered UI components', description: 'Charts, forms, cards, and custom UI rendered by the host.', path: 'features.artifacts.display.byKind.component' },
+    { ...INHERITABLE_DISPLAY_FIELD, id: 'artifact-display-default', label: 'Other artifacts', description: 'Plain documents and anything without a narrower rule.', path: 'features.artifacts.display.default' },
+    {
+      id: 'artifact-file-preview',
+      label: 'Render supported file previews',
+      type: 'toggle',
+      path: 'features.artifacts.filePreview.enabled',
+      defaultValue: true,
+      unsettable: true,
+      unsetLabel: 'Use default',
+      requiresCapability: 'artifacts',
+    },
+  ],
+};
+
+const streamDisplayPreferencesSectionDef: SectionDef = {
+  id: 'stream-display-preferences',
+  title: 'Tool calls and reasoning',
+  description: 'Control how agent activity appears in the conversation.',
+  fields: [
+    { id: 'pref-show-tools', label: 'Show tool calls', type: 'toggle', path: 'features.showToolCalls', defaultValue: true, unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-tool-collapsed-mode', label: 'Tool call summary', type: 'select', path: 'features.toolCallDisplay.collapsedMode', defaultValue: 'tool-call', options: [{ value: 'tool-call', label: 'Tool call' }, { value: 'tool-name', label: 'Tool name' }, { value: 'tool-preview', label: 'Tool preview' }], unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-tool-expandable', label: 'Tool calls expandable', type: 'toggle', path: 'features.toolCallDisplay.expandable', defaultValue: true, unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-tool-grouped', label: 'Group sequential tool calls', type: 'toggle', path: 'features.toolCallDisplay.grouped', defaultValue: false, unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-tool-grouped-mode', label: 'Grouped tool detail', type: 'select', path: 'features.toolCallDisplay.groupedMode', defaultValue: 'stack', options: [{ value: 'stack', label: 'Show steps' }, { value: 'summary', label: 'Summary only' }], unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-tool-loading-animation', label: 'Tool loading animation', type: 'select', path: 'features.toolCallDisplay.loadingAnimation', defaultValue: 'none', options: [{ value: 'none', label: 'None' }, { value: 'pulse', label: 'Pulse' }, { value: 'shimmer', label: 'Shimmer' }, { value: 'shimmer-color', label: 'Color shimmer' }, { value: 'rainbow', label: 'Rainbow' }], unsettable: true, requiresCapability: 'tools' },
+    { id: 'pref-show-reasoning', label: 'Show reasoning', type: 'toggle', path: 'features.showReasoning', defaultValue: true, unsettable: true, requiresCapability: 'reasoning' },
+    { id: 'pref-reasoning-expandable', label: 'Reasoning expandable', type: 'toggle', path: 'features.reasoningDisplay.expandable', defaultValue: true, unsettable: true, requiresCapability: 'reasoning' },
+    { id: 'pref-reasoning-active-preview', label: 'Reasoning preview while active', type: 'toggle', path: 'features.reasoningDisplay.activePreview', defaultValue: false, unsettable: true, requiresCapability: 'reasoning' },
+  ],
+};
+
+export const STREAM_AND_ARTIFACTS_SUB_GROUP: SubGroupDef = {
+  label: 'Stream and artifacts',
+  sections: [streamDisplayPreferencesSectionDef, ARTIFACT_DISPLAY_PREFERENCE_SECTION],
+};
+
 const debugSectionDef: SectionDef = {
   id: 'debug-inspection', title: 'Debug & Inspection', collapsed: true,
   fields: [
-    { id: 'dev-reasoning', label: 'Show Reasoning', description: 'Display AI reasoning steps', type: 'toggle', path: 'features.showReasoning', defaultValue: false },
-    { id: 'dev-tool-calls', label: 'Show Tool Calls', description: 'Display tool call details', type: 'toggle', path: 'features.showToolCalls', defaultValue: false },
-    { id: 'dev-tool-collapsed-mode', label: 'Tool Call Summary', description: 'Choose what collapsed tool rows show by default', type: 'select', path: 'features.toolCallDisplay.collapsedMode', defaultValue: 'tool-call', options: [{ value: 'tool-call', label: 'Tool Call' }, { value: 'tool-name', label: 'Tool Name' }, { value: 'tool-preview', label: 'Tool Preview' }] },
     { id: 'dev-tool-active-preview', label: 'Tool Preview While Active', description: 'Show a lightweight preview in collapsed active tool rows', type: 'toggle', path: 'features.toolCallDisplay.activePreview', defaultValue: false },
     { id: 'dev-tool-preview-lines', label: 'Tool Preview Lines', type: 'select', path: 'features.toolCallDisplay.previewMaxLines', defaultValue: 3, options: [{ value: '1', label: '1' }, { value: '2', label: '2' }, { value: '3', label: '3' }, { value: '4', label: '4' }, { value: '5', label: '5' }], formatValue: (v: unknown) => String(v ?? 3), parseValue: (v: unknown) => Number(v) },
     { id: 'dev-tool-active-min-height', label: 'Tool Active Min Height', description: 'CSS min-height for collapsed active tool rows (e.g. 5rem)', type: 'text', path: 'features.toolCallDisplay.activeMinHeight', defaultValue: '' },
-    { id: 'dev-tool-expandable', label: 'Tool Calls Expandable', description: 'Allow expanding tool call rows to see full details', type: 'toggle', path: 'features.toolCallDisplay.expandable', defaultValue: true },
-    { id: 'dev-tool-grouped', label: 'Group Sequential Tool Calls', description: 'Render consecutive tool rows inside a grouped container', type: 'toggle', path: 'features.toolCallDisplay.grouped', defaultValue: false },
-    { id: 'dev-tool-grouped-mode', label: 'Grouped Tool Detail', description: 'Show each tool step or one consolidated summary', type: 'select', path: 'features.toolCallDisplay.groupedMode', defaultValue: 'stack', options: [{ value: 'stack', label: 'Show Steps' }, { value: 'summary', label: 'Summary Only' }] },
-    { id: 'dev-reasoning-expandable', label: 'Reasoning Expandable', description: 'Allow expanding reasoning rows to see full details', type: 'toggle', path: 'features.reasoningDisplay.expandable', defaultValue: true },
-    { id: 'dev-reasoning-active-preview', label: 'Reasoning Preview While Active', description: 'Show a lightweight preview in collapsed active reasoning rows', type: 'toggle', path: 'features.reasoningDisplay.activePreview', defaultValue: false },
     { id: 'dev-reasoning-preview-lines', label: 'Reasoning Preview Lines', type: 'select', path: 'features.reasoningDisplay.previewMaxLines', defaultValue: 3, options: [{ value: '1', label: '1' }, { value: '2', label: '2' }, { value: '3', label: '3' }, { value: '4', label: '4' }, { value: '5', label: '5' }], formatValue: (v: unknown) => String(v ?? 3), parseValue: (v: unknown) => Number(v) },
     { id: 'dev-reasoning-active-min-height', label: 'Reasoning Active Min Height', description: 'CSS min-height for collapsed active reasoning rows (e.g. 5rem)', type: 'text', path: 'features.reasoningDisplay.activeMinHeight', defaultValue: '' },
     { id: 'dev-debug', label: 'Debug Mode', description: 'Show debug information', type: 'toggle', path: 'debug', defaultValue: false },
@@ -906,6 +1005,7 @@ export const CONFIGURE_SUB_GROUPS: SubGroupDef[] = [
   { label: 'Layout', sections: [generalLayoutSectionDef, headerLayoutSectionDef, messagesLayoutSectionDef, messageActionsSectionDef] },
   { label: 'Widget', sections: [launcherBasicsSectionDef, launcherAdvancedSectionDef, sendButtonSectionDef, closeButtonSectionDef, clearChatSectionDef, statusIndicatorSectionDef] },
   { label: 'Features', sections: [featuresSectionDef, streamAnimationSectionDef, attachmentsSectionDef, artifactsSectionDef, artifactCustomizationSectionDef] },
+  STREAM_AND_ARTIFACTS_SUB_GROUP,
   { label: 'Developer', collapsedByDefault: true, sections: [apiIntegrationSectionDef, debugSectionDef, markdownSectionDef] },
 ];