@arcote.tech/arc-ds 0.5.2 → 0.5.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-ds",
   "type": "module",
-  "version": "0.5.2",
+  "version": "0.5.5",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Design System for Arc framework — CVA-based components with display modes and variant overrides",
@@ -28,7 +28,7 @@
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.5.2",
+    "@arcote.tech/arc": "^0.5.5",
     "framer-motion": "^12.0.0",
     "lucide-react": ">=0.400.0",
     "radix-ui": "^1.0.0",

package/src/ds/bento-card/bento-card.tsx

@@ -1,5 +1,4 @@
 import { Box } from "../box/box";
-import { useBentoSpan } from "../bento-grid/bento-grid";
 import { motion } from "framer-motion";
 import { Plus } from "lucide-react";
 import type { ComponentType, ReactNode } from "react";
@@ -13,7 +12,6 @@ export interface BentoCardProps {
   onEdit: () => void;
   emptyLabel?: ReactNode;
   className?: string;
-  span?: string;
   children?: ReactNode;
 }
 
@@ -26,45 +24,39 @@ export function BentoCard({
   onEdit,
   emptyLabel,
   className,
-  span,
   children,
 }: BentoCardProps) {
-  const autoSpan = useBentoSpan();
-  const resolvedSpan = span ?? autoSpan;
-
   return (
-    <div className={`h-full ${resolvedSpan} ${className ?? ""}`.trim()}>
-      <motion.div
-        layoutId={layoutId}
-        className="h-full"
-        style={{ opacity: isModalOpen ? 0 : 1 }}
+    <motion.div
+      layoutId={layoutId}
+      className={className}
+      style={{ opacity: isModalOpen ? 0 : 1 }}
+    >
+      <Box
+        layout={false}
+        className="group relative cursor-pointer p-5 hover:shadow-lg transition-all duration-300 hover:scale-[1.01]"
+        onClick={onEdit}
       >
-        <Box
-          layout={false}
-          className="group relative cursor-pointer p-5 hover:shadow-lg transition-all duration-300 h-full min-h-[140px] hover:scale-[1.01]"
-          onClick={onEdit}
-        >
-          <div className="flex items-center gap-2.5 mb-3">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
-              <Icon className="h-4 w-4 text-primary" />
-            </div>
-            <span className="text-sm font-semibold">{title}</span>
+        <div className="flex items-center gap-2.5 mb-3">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+            <Icon className="h-4 w-4 text-primary" />
           </div>
+          <span className="text-sm font-semibold">{title}</span>
+        </div>
 
-          {isEmpty ? (
-            <div className="flex flex-col items-center justify-center gap-2 py-4 border-2 border-dashed border-muted-foreground/15 rounded-xl transition-colors group-hover:border-primary/30">
-              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-muted transition-colors group-hover:bg-primary/10">
-                <Plus className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-primary" />
-              </div>
-              {emptyLabel && (
-                <span className="text-xs text-muted-foreground">{emptyLabel}</span>
-              )}
+        {isEmpty ? (
+          <div className="flex flex-col items-center justify-center gap-2 py-4 border-2 border-dashed border-muted-foreground/15 rounded-xl transition-colors group-hover:border-primary/30">
+            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-muted transition-colors group-hover:bg-primary/10">
+              <Plus className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-primary" />
             </div>
-          ) : (
-            <div className="flex flex-col gap-2">{children}</div>
-          )}
-        </Box>
-      </motion.div>
-    </div>
+            {emptyLabel && (
+              <span className="text-xs text-muted-foreground">{emptyLabel}</span>
+            )}
+          </div>
+        ) : (
+          <div className="flex flex-col gap-2">{children}</div>
+        )}
+      </Box>
+    </motion.div>
   );
 }

package/src/ds/bento-grid/bento-grid.tsx

@@ -1,51 +1,38 @@
-import { Children, createContext, useContext, type ReactNode } from "react";
+import { Children, useMemo, type ReactNode } from "react";
 
 export interface BentoGridProps {
   children: ReactNode;
   className?: string;
 }
 
-type BentoGridItemContext = {
-  index: number;
-  count: number;
-};
-
-const BentoItemContext = createContext<BentoGridItemContext | null>(null);
-
-/**
- * Hook for children to read their grid span class.
- * Returns the appropriate Tailwind class (e.g., "md:row-span-2", "md:col-span-3")
- * or empty string for normal cells.
- */
-export function useBentoSpan(): string {
-  const ctx = useContext(BentoItemContext);
-  if (!ctx) return "";
-  const { index, count } = ctx;
-
-  if (count < 5) return "";
-  if (index === 0) return "md:row-span-2";
-  if (index === count - 1 && (count === 6 || count === 8)) return "md:col-span-3";
-  return "";
-}
-
 /**
- * Responsive bento grid with auto-layout based on child count.
+ * Responsive multi-column layout. Children are distributed round-robin into
+ * 3 columns; each column is a flex-col so items take their natural height.
+ * No row-spanning, no fixed row heights, no auto-layout magic — every item
+ * controls its own size and renders exactly as tall as its content.
  *
- * Children call useBentoSpan() to get their grid span class.
- * No wrapper divs — children control their own layout.
+ * Breakpoints: 1 column (mobile), 2 (md), 3 (lg+). Children are always
+ * distributed across 3 buckets; on narrower viewports the buckets stack via
+ * the outer `grid-cols-*` utilities.
  */
 export function BentoGrid({ children, className }: BentoGridProps) {
-  const items = Children.toArray(children);
-  const count = items.length;
-
-  if (count === 0) return null;
+  const columns = useMemo(() => {
+    const items = Children.toArray(children);
+    const cols: ReactNode[][] = [[], [], []];
+    items.forEach((item, i) => {
+      cols[i % 3].push(item);
+    });
+    return cols;
+  }, [children]);
 
   return (
-    <div className={`grid grid-cols-1 md:grid-cols-3 gap-3 ${className ?? ""}`}>
-      {items.map((child, index) => (
-        <BentoItemContext.Provider key={index} value={{ index, count }}>
-          {child}
-        </BentoItemContext.Provider>
+    <div
+      className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 items-start ${className ?? ""}`}
+    >
+      {columns.map((col, i) => (
+        <div key={i} className="flex flex-col gap-3">
+          {col}
+        </div>
       ))}
     </div>
   );

package/src/ds/chat/chat-input.tsx

@@ -5,6 +5,7 @@ import { SearchSelect } from "../search-select/search-select";
 import { Send, Globe } from "lucide-react";
 import { useState, type ReactNode } from "react";
 import type { ChatModel, SendMessageOptions } from "./types";
+import { useChatLabels } from "./chat-labels";
 
 interface ChatInputProps {
   onSend: (message: string, options: SendMessageOptions) => void;
@@ -12,10 +13,18 @@ interface ChatInputProps {
   defaultModel?: string;
   /** Extra toolbar content (e.g., attach menu) rendered after web search toggle */
   toolbar?: ReactNode;
-  /** Label for web search toggle */
-  webSearchLabel?: string;
-  /** Placeholder for message input */
-  placeholder?: string;
+  /** Show the model selector dropdown. Default true. */
+  showModelSelector?: boolean;
+  /** Show the web search toggle. Default true. */
+  showWebSearch?: boolean;
+  /**
+   * Render slot for the send button. Receives `onClick` and `disabled` —
+   * consumer wires them to its own button. Defaults to a `<Button icon={Send}>`.
+   */
+  renderSendButton?: (props: {
+    onClick: () => void;
+    disabled: boolean;
+  }) => ReactNode;
   /** Disable input (e.g., during generation) */
   disabled?: boolean;
 }
@@ -25,10 +34,12 @@ export function ChatInput({
   models,
   defaultModel,
   toolbar,
-  webSearchLabel = "Web",
-  placeholder = "Type a message...",
+  showModelSelector = true,
+  showWebSearch = true,
+  renderSendButton,
   disabled = false,
 }: ChatInputProps) {
+  const labels = useChatLabels();
   const [message, setMessage] = useState("");
   const [model, setModel] = useState(defaultModel ?? models[0]?.value ?? "");
   const [webSearch, setWebSearch] = useState(false);
@@ -41,51 +52,65 @@ export function ChatInput({
     setMessage("");
   };
 
+  // Hide the toolbar row entirely if there's nothing in it
+  const hasToolbar = showModelSelector || showWebSearch || toolbar;
+  const sendDisabled = disabled || !message.trim();
+
   return (
     <Box className={`p-3 space-y-2 ${disabled ? "opacity-50 pointer-events-none" : ""}`}>
       {/* Input + send */}
-      <div className="flex items-end gap-2">
+      <div className="flex items-center gap-2">
         <div className="flex-1">
           <TextareaField
             value={message}
             onChange={(val) => setMessage(val ?? "")}
-            placeholder={disabled ? "Generowanie..." : placeholder}
+            placeholder={disabled ? labels.placeholderGenerating : labels.placeholder}
             rows={1}
           />
         </div>
-        <Button
-          size="sm"
-          icon={Send}
-          onClick={handleSend}
-          disabled={disabled || !message.trim()}
-        />
+        {renderSendButton ? (
+          renderSendButton({ onClick: handleSend, disabled: sendDisabled })
+        ) : (
+          <Button
+            size="sm"
+            icon={Send}
+            onClick={handleSend}
+            disabled={sendDisabled}
+          />
+        )}
       </div>
 
       {/* Toolbar */}
-      <div className="flex items-center gap-1.5">
-        <div className="w-[130px]">
-          <SearchSelect
-            value={model}
-            onChange={setModel}
-            options={models}
-            placeholder="Model..."
-            position="absolute"
-            direction="up"
-            size="sm"
-            allowClear={false}
-          />
-        </div>
+      {hasToolbar && (
+        <div className="flex items-center gap-1.5">
+          {showModelSelector && (
+            <div className="w-[130px]">
+              <SearchSelect
+                value={model}
+                onChange={setModel}
+                options={models}
+                placeholder={labels.modelPlaceholder}
+                position="absolute"
+                direction="up"
+                size="sm"
+                allowClear={false}
+              />
+            </div>
+          )}
 
-        <Button
-          variant={webSearch ? "default" : "ghost"}
-          size="xs"
-          icon={Globe}
-          label={webSearchLabel}
-          onClick={() => setWebSearch((v) => !v)}
-        />
+          {showWebSearch && (
+            <Button
+              variant={webSearch ? "default" : "ghost"}
+              size="xs"
+              icon={Globe}
+              label={labels.webSearchLabel}
+              onClick={() => setWebSearch((v) => !v)}
+            />
+          )}
 
-        {toolbar}
-      </div>
+          {toolbar}
+        </div>
+      )}
     </Box>
   );
 }

package/src/ds/chat/chat-labels.tsx

@@ -0,0 +1,89 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+export interface ChatLabels {
+  // ChatInput
+  placeholder: string;
+  placeholderGenerating: string;
+  modelPlaceholder: string;
+  webSearchLabel: string;
+  // QuestionTabs (wizard)
+  submitLabel: string;
+  customPlaceholder: string;
+  nextLabel: string;
+  backLabel: string;
+  summaryTitle: string;
+  editLabel: string;
+  noAnswerLabel: string;
+  questionOfLabel: (current: number, total: number) => string;
+  /** Secondary button in QuestionTabs — "Continue discussion" instead of answering */
+  discussLabel: string;
+  // ChatMessage
+  questionsLabel: string;
+  answerLabel: string;
+  // Tool execution log (rendered by chat-component)
+  toolCallingLabel: string;
+  toolDoneLabel: string;
+  errorLabel: string;
+  // askQuestions tool view
+  answerBelowLabel: string;
+  // completeStage tool view
+  stageCompleteLabel: string;
+  advanceStageLabel: string;
+  continueStageLabel: string;
+  stageAdvancedLabel: string;
+  stageContinuedLabel: string;
+  /** Label for the "Przejdź do następnego" button on the final stage. */
+  finishConsultationLabel: string;
+}
+
+export const defaultChatLabels: ChatLabels = {
+  placeholder: "Type a message...",
+  placeholderGenerating: "Generating...",
+  modelPlaceholder: "Model...",
+  webSearchLabel: "Web",
+  submitLabel: "Submit",
+  customPlaceholder: "Custom answer...",
+  nextLabel: "Next",
+  backLabel: "Back",
+  summaryTitle: "Summary",
+  editLabel: "Edit",
+  noAnswerLabel: "No answer",
+  questionOfLabel: (current, total) => `Question ${current} of ${total}`,
+  discussLabel: "Continue discussion",
+  questionsLabel: "questions to answer",
+  answerLabel: "Answer",
+  toolCallingLabel: "Executing...",
+  toolDoneLabel: "Done",
+  errorLabel: "Error",
+  answerBelowLabel: "Answer the questions below",
+  stageCompleteLabel: "Stage complete",
+  advanceStageLabel: "Go to next stage",
+  continueStageLabel: "Keep talking",
+  stageAdvancedLabel: "Moved to next stage",
+  stageContinuedLabel: "Staying on this stage",
+  finishConsultationLabel: "Finish consultation",
+};
+
+const ChatLabelsContext = createContext<ChatLabels>(defaultChatLabels);
+
+export function ChatLabelsProvider({
+  labels,
+  children,
+}: {
+  labels?: Partial<ChatLabels>;
+  children: ReactNode;
+}) {
+  const merged = useMemo<ChatLabels>(
+    () => ({ ...defaultChatLabels, ...labels }),
+    [labels],
+  );
+  return (
+    <ChatLabelsContext.Provider value={merged}>
+      {children}
+    </ChatLabelsContext.Provider>
+  );
+}
+
+export function useChatLabels(): ChatLabels {
+  return useContext(ChatLabelsContext);
+}

package/src/ds/chat/chat-message.tsx

@@ -2,24 +2,20 @@ import { Button } from "../button/button";
 import { Bot, User, MessageSquare } from "lucide-react";
 import type { ChatMessageData } from "./types";
 import { ToolUseBlock } from "./tool-use-block";
+import { useChatLabels } from "./chat-labels";
 
 interface ChatMessageProps {
   message: ChatMessageData;
   onAnswerQuestions?: () => void;
   onToolUseClick?: (link: string) => void;
-  /** Label for questions count, e.g. "questions to answer" */
-  questionsLabel?: string;
-  /** Label for the answer button */
-  answerLabel?: string;
 }
 
 export function ChatMessage({
   message,
   onAnswerQuestions,
   onToolUseClick,
-  questionsLabel = "questions to answer",
-  answerLabel = "Answer",
 }: ChatMessageProps) {
+  const { questionsLabel, answerLabel } = useChatLabels();
   const isUser = message.role === "user";
   const hasUnansweredQuestions =
     message.questions && message.questions.length > 0;

package/src/ds/chat/chat-tool-question.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { MessageCircleQuestion, CheckCircle2 } from "lucide-react";
+import { MessageCircleQuestion, User } from "lucide-react";
 
 export interface ChatToolQuestionProps {
   /** Whether the tool is waiting for user response */
@@ -12,23 +12,23 @@ export function ChatToolQuestion({
   calling,
   children,
 }: ChatToolQuestionProps) {
-  const borderColor = calling
-    ? "border-amber-500/20 bg-amber-500/5"
-    : "border-green-500/20 bg-green-500/5";
+  // Calling = waiting for user → amber accent.
+  // Answered → primary (purple) so it visually matches user message bubbles.
+  const containerColor = calling
+    ? "border border-amber-500/20 bg-amber-500/5"
+    : "border border-primary/20 bg-primary/10";
 
-  const iconColor = calling
-    ? "text-amber-500"
-    : "text-green-500";
+  const iconColor = calling ? "text-amber-500" : "text-primary";
 
   return (
     <div
-      className={`flex items-start gap-3 w-full rounded-xl border p-3 transition-colors ${borderColor}`}
+      className={`flex items-start gap-3 w-full rounded-xl p-3 transition-colors ${containerColor}`}
     >
       <div className={`mt-0.5 shrink-0 ${iconColor}`}>
         {calling ? (
           <MessageCircleQuestion className="h-4 w-4" />
         ) : (
-          <CheckCircle2 className="h-4 w-4" />
+          <User className="h-4 w-4" />
         )}
       </div>
       <div className="flex-1 min-w-0 space-y-2 text-sm">{children}</div>

package/src/ds/chat/chat.tsx

@@ -32,20 +32,22 @@ export interface ChatProps {
   sidebar?: ReactNode;
   /** Extra toolbar content for ChatInput (attach menu, etc.) */
   toolbar?: ReactNode;
+  /** Show the model selector dropdown in ChatInput. Default true. */
+  showModelSelector?: boolean;
+  /** Show the web search toggle in ChatInput. Default true. */
+  showWebSearch?: boolean;
+  /**
+   * Render slot for ChatInput's send button. Receives `onClick` and
+   * `disabled` — caller renders its own button (e.g. branded with a logo).
+   */
+  renderSendButton?: (props: {
+    onClick: () => void;
+    disabled: boolean;
+  }) => ReactNode;
   /** Max width class for the message area */
   maxWidth?: string;
   /** Disable input (during generation) */
   disabled?: boolean;
-  /** Labels for i18n */
-  labels?: {
-    questionsLabel?: string;
-    answerLabel?: string;
-    webSearchLabel?: string;
-    placeholder?: string;
-    submitLabel?: string;
-    completedLabel?: string;
-    customPlaceholder?: string;
-  };
 }
 
 export function Chat({
@@ -58,9 +60,11 @@ export function Chat({
   header,
   sidebar,
   toolbar,
+  showModelSelector = true,
+  showWebSearch = true,
+  renderSendButton,
   maxWidth = "max-w-3xl",
   disabled = false,
-  labels,
 }: ChatProps) {
   const { inputOverride } = useChatInput();
   const [answeringMessageId, setAnsweringMessageId] = useState<string | null>(
@@ -103,8 +107,6 @@ export function Chat({
                   : undefined
               }
               onToolUseClick={onToolUseClick}
-              questionsLabel={labels?.questionsLabel}
-              answerLabel={labels?.answerLabel}
             />
           ))}
           <div ref={messagesEndRef} />
@@ -121,9 +123,6 @@ export function Chat({
                 onAnswerQuestions?.(answeringMessageId!, answers);
                 setAnsweringMessageId(null);
               }}
-              submitLabel={labels?.submitLabel}
-              completedLabel={labels?.completedLabel}
-              customPlaceholder={labels?.customPlaceholder}
             />
           ) : (
             <ChatInput
@@ -131,8 +130,9 @@ export function Chat({
               models={models}
               defaultModel={defaultModel}
               toolbar={toolbar}
-              webSearchLabel={labels?.webSearchLabel}
-              placeholder={labels?.placeholder}
+              showModelSelector={showModelSelector}
+              showWebSearch={showWebSearch}
+              renderSendButton={renderSendButton}
               disabled={disabled}
             />
           )}

package/src/ds/chat/question-tabs.tsx

@@ -1,29 +1,40 @@
 import { Box } from "../box/box";
 import { Button } from "../button/button";
 import { TextareaField } from "../form";
-import { Send, Check } from "lucide-react";
-import { useState } from "react";
+import { ArrowLeft, ArrowRight, Check, MessageCircle, Pencil, Send } from "lucide-react";
+import { Fragment, useState } from "react";
 import type { Question, QuestionAnswers } from "./types";
+import { useChatLabels } from "./chat-labels";
 
 interface QuestionTabsProps {
   questions: Question[];
-  onSubmit: (answers: QuestionAnswers) => void;
-  /** Label for submit button */
-  submitLabel?: string;
-  /** Label for completed count, e.g. "completed" */
-  completedLabel?: string;
-  /** Placeholder for custom answer input */
-  customPlaceholder?: string;
+  /**
+   * Called when user finishes answering. `wantsToDiscuss` is true when the
+   * user clicked the secondary "Continue discussion" button — consumers
+   * should forward this to the LLM so it knows to switch from question
+   * mode to open-ended conversation.
+   */
+  onSubmit: (
+    answers: QuestionAnswers,
+    options: { wantsToDiscuss: boolean },
+  ) => void;
 }
 
-export function QuestionTabs({
-  questions,
-  onSubmit,
-  submitLabel = "Submit",
-  completedLabel = "completed",
-  customPlaceholder = "Custom answer...",
-}: QuestionTabsProps) {
-  const [activeTab, setActiveTab] = useState(0);
+type Step = { type: "question"; index: number } | { type: "summary" };
+
+export function QuestionTabs({ questions, onSubmit }: QuestionTabsProps) {
+  const {
+    submitLabel,
+    nextLabel,
+    backLabel,
+    summaryTitle,
+    editLabel,
+    noAnswerLabel,
+    questionOfLabel,
+    customPlaceholder,
+    discussLabel,
+  } = useChatLabels();
+  const [step, setStep] = useState<Step>({ type: "question", index: 0 });
   const [answers, setAnswers] = useState<QuestionAnswers>(
     () =>
       Object.fromEntries(
@@ -31,69 +42,147 @@ export function QuestionTabs({
       ),
   );
 
-  const current = questions[activeTab];
-  const currentAnswer = answers[current.id] ?? { selected: [], text: "" };
+  const isQuestionStep = step.type === "question";
+  const currentIndex = isQuestionStep ? step.index : -1;
+  const isLastQuestion = currentIndex === questions.length - 1;
 
-  const toggleOption = (option: string) => {
-    const selected = currentAnswer.selected.includes(option)
-      ? currentAnswer.selected.filter((o) => o !== option)
-      : [...currentAnswer.selected, option];
-    setAnswers((prev) => ({
-      ...prev,
-      [current.id]: { ...prev[current.id], selected },
-    }));
+  const goToQuestion = (index: number) =>
+    setStep({ type: "question", index });
+  const goToSummary = () => setStep({ type: "summary" });
+
+  const handleNext = () => {
+    if (!isQuestionStep) return;
+    if (isLastQuestion) {
+      goToSummary();
+    } else {
+      goToQuestion(currentIndex + 1);
+    }
   };
 
-  const setText = (text: string) => {
+  const handleBackFromSummary = () => {
+    goToQuestion(questions.length - 1);
+  };
+
+  const updateAnswer = (
+    questionId: string,
+    updater: (a: { selected: string[]; text: string }) => {
+      selected: string[];
+      text: string;
+    },
+  ) => {
     setAnswers((prev) => ({
       ...prev,
-      [current.id]: { ...prev[current.id], text },
+      [questionId]: updater(prev[questionId] ?? { selected: [], text: "" }),
     }));
   };
 
+  // ─── Summary step ──────────────────────────────────────────────
+  if (step.type === "summary") {
+    return (
+      <Box className="p-0 overflow-hidden">
+        <div className="border-b border-border px-4 py-3">
+          <p className="text-sm font-semibold">{summaryTitle}</p>
+        </div>
+
+        <ul className="divide-y divide-border">
+          {questions.map((q, i) => {
+            const answer = answers[q.id] ?? { selected: [], text: "" };
+            const parts = [
+              ...answer.selected,
+              ...(answer.text.trim() ? [answer.text.trim()] : []),
+            ];
+            const hasAnswer = parts.length > 0;
+            return (
+              <li
+                key={q.id}
+                className="group flex items-start gap-3 px-4 py-2.5"
+              >
+                <div className="flex-1 min-w-0">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    {q.label}
+                  </p>
+                  <p
+                    className={`text-sm mt-0.5 ${
+                      hasAnswer ? "" : "italic text-muted-foreground/60"
+                    }`}
+                  >
+                    {hasAnswer ? parts.join(", ") : noAnswerLabel}
+                  </p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  icon={Pencil}
+                  label={editLabel}
+                  onClick={() => goToQuestion(i)}
+                  className="opacity-0 group-hover:opacity-100 transition-opacity"
+                />
+              </li>
+            );
+          })}
+        </ul>
+
+        <div className="flex items-center justify-between border-t border-border px-3 py-2 gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            icon={ArrowLeft}
+            label={backLabel}
+            onClick={handleBackFromSummary}
+          />
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              icon={MessageCircle}
+              label={discussLabel}
+              onClick={() => onSubmit(answers, { wantsToDiscuss: true })}
+            />
+            <Button
+              size="sm"
+              icon={Send}
+              label={submitLabel}
+              onClick={() => onSubmit(answers, { wantsToDiscuss: false })}
+            />
+          </div>
+        </div>
+      </Box>
+    );
+  }
+
+  // ─── Question step ─────────────────────────────────────────────
+  const current = questions[currentIndex];
+  const currentAnswer = answers[current.id] ?? { selected: [], text: "" };
   const hasCustomText = currentAnswer.text.trim().length > 0;
 
-  const totalAnswered = questions.filter(
-    (q) =>
-      (answers[q.id]?.selected.length ?? 0) > 0 ||
-      (answers[q.id]?.text ?? "").trim().length > 0,
-  ).length;
+  const toggleOption = (option: string) => {
+    updateAnswer(current.id, (a) => ({
+      ...a,
+      selected: a.selected.includes(option)
+        ? a.selected.filter((o) => o !== option)
+        : [...a.selected, option],
+    }));
+  };
+
+  const setText = (text: string) => {
+    updateAnswer(current.id, (a) => ({ ...a, text }));
+  };
 
   return (
     <Box className="p-0 overflow-hidden">
-      {/* Tabs */}
-      <div className="flex border-b border-border overflow-x-auto">
-        {questions.map((q, i) => {
-          const hasAnswer =
-            (answers[q.id]?.selected.length ?? 0) > 0 ||
-            (answers[q.id]?.text ?? "").trim().length > 0;
-          return (
-            <button
-              key={q.id}
-              type="button"
-              onClick={() => setActiveTab(i)}
-              className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium whitespace-nowrap transition-colors border-b-2 -mb-px ${
-                i === activeTab
-                  ? "border-primary text-primary"
-                  : "border-transparent text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              {hasAnswer && (
-                <span className="h-1.5 w-1.5 rounded-full bg-primary shrink-0" />
-              )}
-              {q.label}
-            </button>
-          );
-        })}
+      {/* Header */}
+      <div className="border-b border-border px-4 py-3 space-y-1">
+        <p className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+          {questionOfLabel(currentIndex + 1, questions.length)}
+        </p>
+        <p className="text-sm font-semibold">{current.label}</p>
+        {current.description && (
+          <p className="text-xs text-muted-foreground">{current.description}</p>
+        )}
       </div>
 
-      {/* Content */}
+      {/* Options */}
       <div className="p-3 space-y-1.5">
-        <p className="text-xs text-muted-foreground mb-2">
-          {current.description}
-        </p>
-
-        {/* Options */}
         {current.options.map((option) => {
           const isSelected = currentAnswer.selected.includes(option);
           return (
@@ -123,7 +212,7 @@ export function QuestionTabs({
           );
         })}
 
-        {/* Custom option */}
+        {/* Custom answer */}
         <div
           className={`flex items-start gap-2.5 w-full rounded-lg px-3 py-2.5 transition-colors ${
             hasCustomText
@@ -153,17 +242,46 @@ export function QuestionTabs({
         </div>
       </div>
 
-      {/* Footer */}
-      <div className="flex items-center justify-between border-t border-border px-3 py-2">
-        <span className="text-[10px] text-muted-foreground">
-          {totalAnswered}/{questions.length} {completedLabel}
-        </span>
-        <Button
-          size="sm"
-          icon={Send}
-          label={submitLabel}
-          onClick={() => onSubmit(answers)}
-        />
+      {/* Footer — progress dots + discuss/next buttons */}
+      <div className="flex items-center justify-between border-t border-border px-3 py-2 gap-2">
+        <div className="flex items-center gap-1">
+          {questions.map((q, i) => {
+            const answered =
+              (answers[q.id]?.selected.length ?? 0) > 0 ||
+              (answers[q.id]?.text ?? "").trim().length > 0;
+            return (
+              <Fragment key={q.id}>
+                <button
+                  type="button"
+                  onClick={() => goToQuestion(i)}
+                  className={`h-1.5 rounded-full transition-all ${
+                    i === currentIndex
+                      ? "w-4 bg-primary"
+                      : answered
+                        ? "w-1.5 bg-primary/60"
+                        : "w-1.5 bg-muted-foreground/30"
+                  }`}
+                  aria-label={q.label}
+                />
+              </Fragment>
+            );
+          })}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            icon={MessageCircle}
+            label={discussLabel}
+            onClick={() => onSubmit(answers, { wantsToDiscuss: true })}
+          />
+          <Button
+            size="sm"
+            icon={ArrowRight}
+            label={nextLabel}
+            onClick={handleNext}
+          />
+        </div>
       </div>
     </Box>
   );

package/src/ds/sidebar/sidebar.tsx

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ReactNode } from "react";
+import { cn } from "../../lib/utils";
+import { Box } from "../box/box";
+
+/**
+ * Sidebar — vertical container for navigation/auxiliary content beside main
+ * page content. Typically registered into a layout slot like `sidebar-left`.
+ *
+ * The `sticky` variant pins the sidebar next to the toolbar and stretches it
+ * to fill the visible viewport height. It relies on the CSS variable
+ * `--arc-toolbar-height` set by the desktop `Layout` (measured from the
+ * actual rendered toolbar via ResizeObserver). Falls back to `5rem` if the
+ * variable isn't set.
+ */
+export const sidebarVariants = cva("flex flex-col gap-3 p-4", {
+  variants: {
+    variant: {
+      default: "",
+      sticky:
+        "sticky top-[var(--arc-toolbar-height,5rem)] " +
+        "max-h-[calc(100vh-var(--arc-toolbar-height,5rem)-1rem)] " +
+        "overflow-y-auto",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export interface SidebarProps extends VariantProps<typeof sidebarVariants> {
+  children?: ReactNode;
+  className?: string;
+  /** Title rendered at the top with uppercase muted styling. */
+  title?: ReactNode;
+  /** Footer rendered at the bottom with a top border. */
+  footer?: ReactNode;
+}
+
+export function Sidebar({
+  variant,
+  children,
+  className,
+  title,
+  footer,
+}: SidebarProps) {
+  return (
+    <Box className={cn(sidebarVariants({ variant }), className)}>
+      {title && (
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          {title}
+        </h3>
+      )}
+      <div className="flex-1 min-h-0">{children}</div>
+      {footer && (
+        <div className="pt-2 border-t border-border">{footer}</div>
+      )}
+    </Box>
+  );
+}

package/src/index.ts

@@ -54,7 +54,7 @@ export {
 } from "./ds/avatar/avatar";
 export { BentoCard } from "./ds/bento-card/bento-card";
 export type { BentoCardProps } from "./ds/bento-card/bento-card";
-export { BentoGrid, useBentoSpan } from "./ds/bento-grid/bento-grid";
+export { BentoGrid } from "./ds/bento-grid/bento-grid";
 export type { BentoGridProps } from "./ds/bento-grid/bento-grid";
 export { CardModal, CardFormModal, ModalActions } from "./ds/card-modal/card-modal";
 export type { CardModalProps, CardFormModalProps, ModalActionsProps } from "./ds/card-modal/card-modal";
@@ -67,6 +67,8 @@ export type { SearchSelectProps, SearchSelectOption } from "./ds/search-select/s
 export { Badge, badgeVariants } from "./ds/badge/badge";
 export { Box, boxVariants } from "./ds/box/box";
 export type { BoxProps } from "./ds/box/box";
+export { Sidebar, sidebarVariants } from "./ds/sidebar/sidebar";
+export type { SidebarProps } from "./ds/sidebar/sidebar";
 export {
   Button,
   buttonIconVariants,
@@ -111,6 +113,12 @@ export type { ChatToolLogProps } from "./ds/chat/chat-tool-log";
 export { ChatToolQuestion } from "./ds/chat/chat-tool-question";
 export type { ChatToolQuestionProps } from "./ds/chat/chat-tool-question";
 export { ChatInputProvider, useChatInput } from "./ds/chat/chat-input-provider";
+export {
+  ChatLabelsProvider,
+  useChatLabels,
+  defaultChatLabels,
+} from "./ds/chat/chat-labels";
+export type { ChatLabels } from "./ds/chat/chat-labels";
 export type {
   ChatMessageData,
   ChatModel,

package/src/layout/dynamic-slot.tsx

@@ -68,6 +68,12 @@ export function DynamicSlotProvider({ children }: { children: ReactNode }) {
 /**
  * Register dynamic content into a named slot.
  * Content appears while the component is mounted, removed on unmount.
+ *
+ * Always registers — even with `null` content — so the slot preserves a
+ * stable insertion order across re-renders. Readers filter out null entries
+ * via `useDynamicSlotContent` below, so conditional injection
+ * (`useSlotContent(slot, id, cond ? <x /> : null)`) works without shifting
+ * the position of sibling slot entries.
  */
 export function useSlotContent(slotId: string, id: string, content: ReactNode) {
   const ctx = useContext(DynamicSlotContext);
@@ -85,11 +91,15 @@ export function useSlotContent(slotId: string, id: string, content: ReactNode) {
 }
 
 /**
- * Read dynamic slot content for a given slot ID.
+ * Read dynamic slot content for a given slot ID. Filters out null/undefined
+ * entries so consumers get only the renderable pieces.
  */
 export function useDynamicSlotContent(slotId: string): ReactNode[] {
   const ctx = useContext(DynamicSlotContext);
   if (!ctx) return [];
   const entries = ctx.entries.get(slotId);
-  return entries ? entries.map((e) => e.content) : [];
+  if (!entries) return [];
+  return entries
+    .map((e) => e.content)
+    .filter((c) => c != null && c !== false);
 }

package/src/layout/layout.tsx

@@ -47,8 +47,11 @@ export function Layout({ children }: { children?: ReactNode }) {
 function SubNavSlot() {
   const content = useDynamicSlotContent("sub-nav");
   if (content.length === 0) return null;
+  // `relative z-30` creates an explicit stacking context at Z.BASE so any
+  // popovers inside the sub-nav (SearchSelect absolute dropdown, etc.) paint
+  // above the main content area that follows it in document flow.
   return (
-    <div className="flex justify-center py-2">
+    <div className="relative z-30 flex justify-center py-2">
       <Box layoutId="sub-nav" className="flex items-center gap-1 px-3 py-2">
         {content}
       </Box>
@@ -56,21 +59,84 @@ function SubNavSlot() {
   );
 }
 
+/**
+ * Tracks the desktop toolbar's actual rendered height and exposes it as a
+ * CSS variable on `<html>`. The toolbar is `position: fixed` so the layout
+ * itself can't measure it via flow — we query the data-attributed boxes
+ * (set by `DesktopToolbar`) and observe size changes.
+ *
+ * Consumers (sidebar, content spacer) read `var(--arc-toolbar-height)` to
+ * align with the toolbar without hard-coding pixel values.
+ */
+function useDesktopToolbarHeight() {
+  useEffect(() => {
+    const root = document.documentElement;
+    const set = (px: number) => {
+      root.style.setProperty("--arc-toolbar-height", `${px}px`);
+    };
+
+    let ro: ResizeObserver | null = null;
+    let cancelled = false;
+
+    const start = () => {
+      if (cancelled) return;
+      const boxes = Array.from(
+        document.querySelectorAll<HTMLElement>("[data-arc-toolbar]"),
+      );
+      if (boxes.length === 0) {
+        // Toolbar not mounted yet — try again next frame
+        requestAnimationFrame(start);
+        return;
+      }
+      const measure = () => {
+        const tallest = boxes.reduce(
+          (max, el) => Math.max(max, el.offsetHeight),
+          0,
+        );
+        // 16px top margin (top-4) + box height + 16px breathing room
+        set(tallest + 16 + 16);
+      };
+      measure();
+      ro = new ResizeObserver(measure);
+      for (const el of boxes) ro.observe(el);
+    };
+
+    start();
+
+    return () => {
+      cancelled = true;
+      ro?.disconnect();
+      root.style.removeProperty("--arc-toolbar-height");
+    };
+  }, []);
+}
+
 function DesktopLayout({ children }: { children?: ReactNode }) {
   const renderSlot = useRenderSlot();
+  useDesktopToolbarHeight();
 
   return (
     <>
       <DesktopToolbar />
-      <div className="h-16" />
+      {/* Spacer pushing main content below the fixed toolbar.
+          Height matches `--arc-toolbar-height` set by useDesktopToolbarHeight. */}
+      <div style={{ height: "var(--arc-toolbar-height, 5rem)" }} />
       <SubNavSlot />
-      <div className="mx-auto flex w-full max-w-5xl flex-1 gap-4 p-4">
-        {renderSlot("sidebar-left", { className: "flex w-64 shrink-0 flex-col gap-4" })}
-        <div className="min-w-0 flex-1">
-          {children}
-          {renderSlot("main-content", { className: "flex flex-col gap-4" })}
+      <div className="flex w-full flex-1">
+        <div className="flex min-w-0 flex-1 justify-center">
+          <div className="flex w-full max-w-5xl gap-4 p-4">
+            {renderSlot("sidebar-left", { className: "flex w-64 shrink-0 flex-col gap-4" })}
+            <div className="min-w-0 flex-1">
+              {children}
+              {renderSlot("main-content", { className: "flex flex-col gap-4" })}
+            </div>
+            {renderSlot("sidebar-right", { className: "flex w-64 shrink-0 flex-col gap-4" })}
+          </div>
         </div>
-        {renderSlot("sidebar-right", { className: "flex w-64 shrink-0 flex-col gap-4" })}
+        {renderSlot("preview-pane", {
+          className:
+            "flex w-[480px] shrink-0 flex-col gap-4 overflow-y-auto border-l p-4",
+        })}
       </div>
     </>
   );
@@ -98,6 +164,7 @@ function DesktopToolbar() {
   return (
     <>
       <div
+        data-arc-toolbar="left"
         className="fixed left-4 top-4"
         style={{ zIndex: zIndex("workspace") }}
       >
@@ -108,6 +175,7 @@ function DesktopToolbar() {
       </div>
 
       <div
+        data-arc-toolbar="center"
         className="fixed left-1/2 top-4 max-w-[calc(100vw-26rem)] -translate-x-1/2"
         style={{ zIndex: zIndex("center") }}
       >
@@ -117,6 +185,7 @@ function DesktopToolbar() {
       </div>
 
       <div
+        data-arc-toolbar="right"
         className="fixed right-4 top-4"
         style={{ zIndex: zIndex("settings") }}
       >