@nextclaw/ui 0.15.1 → 0.15.2

package/src/app/configs/app-navigation.config.ts

@@ -2,6 +2,7 @@ import type { LucideIcon } from "lucide-react";
 import {
   Bot,
   BrainCircuit,
+  AlarmClock,
   Cpu,
   Download,
   KeyRound,
@@ -25,6 +26,11 @@ export type AppNavigationItem = {
   icon: LucideIcon;
 };
 
+export type AppNavigationSection = {
+  label: string;
+  items: AppNavigationItem[];
+};
+
 function matchesRouteTarget(pathname: string, target: string): boolean {
   const normalizedPath = pathname.toLowerCase();
   const normalizedTarget = target.toLowerCase();
@@ -80,6 +86,33 @@ export function getMobileBottomNavItems(
   ];
 }
 
+export function getMainSidebarNavItems(
+  translate: Translate,
+): AppNavigationItem[] {
+  return [
+    {
+      target: "/chat",
+      label: translate("chat"),
+      icon: MessageCircle,
+    },
+    {
+      target: "/chat/cron",
+      label: translate("cron"),
+      icon: AlarmClock,
+    },
+    {
+      target: "/chat/skills",
+      label: translate("marketplaceFilterSkills"),
+      icon: BrainCircuit,
+    },
+    {
+      target: "/agents",
+      label: translate("agentsPageTitle"),
+      icon: Bot,
+    },
+  ];
+}
+
 export function getSettingsNavItems(
   translate: Translate,
 ): AppNavigationItem[] {
@@ -142,6 +175,22 @@ export function getSettingsNavItems(
   ];
 }
 
+export function getSettingsNavSections(
+  translate: Translate,
+): AppNavigationSection[] {
+  const items = getSettingsNavItems(translate);
+  return [
+    {
+      label: translate("settingsGroupBasic"),
+      items: items.slice(0, 3),
+    },
+    {
+      label: translate("settingsGroupAdvanced"),
+      items: items.slice(3),
+    },
+  ];
+}
+
 export function getMobileSettingsNavItems(
   translate: Translate,
 ): AppNavigationItem[] {

package/src/app/styles/design-system.css

@@ -284,6 +284,88 @@
    }
 }
 
+@layer base {
+   :root[data-theme="work"] {
+      /* ========================================
+       BRAND COLORS (Work White Ink)
+       ======================================== */
+      --brand-50: 0 0% 97%;
+      --brand-100: 0 0% 94%;
+      --brand-200: 0 0% 88%;
+      --brand-300: 0 0% 78%;
+      --brand-400: 0 0% 58%;
+      --brand-500: 0 0% 23%;
+      --brand-600: 0 0% 18%;
+      --brand-700: 0 0% 12%;
+      --brand-800: 0 0% 7%;
+      --brand-900: 0 0% 4%;
+
+      /* ========================================
+       NEUTRAL COLORS (White Canvas / Soft Gray Rail)
+       ======================================== */
+      --gray-50: 0 0% 100%;
+      --gray-100: 0 0% 95%;
+      --gray-200: 0 0% 90%;
+      --gray-300: 0 0% 84%;
+      --gray-400: 0 0% 70%;
+      --gray-500: 0 0% 46%;
+      --gray-600: 0 0% 34%;
+      --gray-700: 0 0% 28%;
+      --gray-800: 0 0% 13%;
+      --gray-900: 0 0% 7%;
+
+      /* Semantic Colors */
+      --background: var(--gray-50);
+      --background-secondary: var(--gray-100);
+      --background-tertiary: var(--gray-200);
+      --foreground: var(--gray-800);
+      --foreground-secondary: var(--gray-700);
+      --foreground-tertiary: var(--gray-500);
+      --foreground-muted: var(--gray-400);
+      --primary: var(--brand-500);
+      --primary-hover: var(--brand-600);
+      --primary-active: var(--brand-700);
+      --primary-foreground: 0 0% 100%;
+      --secondary: var(--gray-100);
+      --secondary-hover: var(--gray-200);
+      --secondary-foreground: var(--gray-800);
+      --accent: var(--gray-200);
+      --accent-foreground: var(--gray-800);
+      --muted: var(--gray-100);
+      --muted-foreground: var(--gray-500);
+      --card: 0 0% 100%;
+      --card-foreground: var(--gray-800);
+      --card-border: var(--gray-200);
+      --popover: 0 0% 100%;
+      --popover-foreground: var(--gray-800);
+      --border: var(--gray-200);
+      --border-hover: var(--gray-300);
+      --border-active: var(--gray-600);
+      --input: 0 0% 100%;
+      --input-border: var(--gray-200);
+      --input-focus: var(--gray-600);
+      --ring: var(--gray-600);
+      --ring-offset: var(--gray-50);
+
+      /* Shadows (bright neutral tint) */
+      --shadow-xs: 0 1px 2px 0 rgb(20 24 28 / 0.03);
+      --shadow-sm: 0 1px 3px 0 rgb(20 24 28 / 0.05), 0 1px 2px -1px rgb(20 24 28 / 0.04);
+      --shadow-md: 0 4px 6px -1px rgb(20 24 28 / 0.05), 0 2px 4px -2px rgb(20 24 28 / 0.04);
+      --shadow-lg: 0 10px 15px -3px rgb(20 24 28 / 0.06), 0 4px 6px -4px rgb(20 24 28 / 0.04);
+      --shadow-xl: 0 20px 25px -5px rgb(20 24 28 / 0.08), 0 8px 10px -6px rgb(20 24 28 / 0.04);
+      --shadow-2xl: 0 25px 50px -12px rgb(20 24 28 / 0.14);
+      --shadow-card: 0 0 8px 0 rgba(20, 24, 28, 0.04);
+      --shadow-card-hover: 0 0 16px 0 rgba(20, 24, 28, 0.06);
+   }
+
+   :root[data-theme="work"] .nextclaw-chat-message-user {
+      background-color: hsl(var(--gray-100));
+      border-color: transparent;
+      color: hsl(var(--gray-800));
+   }
+
+}
+
 @layer base {
    :root[data-theme="warm"] {
       /* ========================================

package/src/features/channels/components/config/channel-form.tsx

@@ -5,6 +5,7 @@ import { BookOpen, ChevronDown } from 'lucide-react';
 import { toast } from 'sonner';
 import { LogoBadge } from '@/shared/components/common/logo-badge';
 import { Button } from '@/shared/components/ui/button';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { StatusDot } from '@/shared/components/status/status-dot';
 import { nextclawClient } from '@/shared/lib/api';
 import { useConfig, useConfigMeta, useConfigSchema, useExecuteConfigAction, useUpdateChannel } from '@/shared/hooks/use-config';
@@ -363,17 +364,19 @@ function ChannelFormEditor({
           />
         </ConfigSplitPaneBody>
 
-        <ConfigSplitPaneFooter className="flex flex-wrap items-center justify-between gap-3 px-6 py-4">
-          <div className="flex flex-wrap items-center gap-2">
-            {actions.filter((action) => action.trigger === 'manual').map((action) => (
-              <Button key={action.id} type="button" onClick={() => void handleManualAction(action)} disabled={disabled} variant="secondary">
-                {runningActionId === action.id ? t('connecting') : action.title}
-              </Button>
-            ))}
-          </div>
-          <Button type="submit" disabled={disabled}>
-            {updateChannel.isPending ? t('saving') : t('save')}
-          </Button>
+        <ConfigSplitPaneFooter>
+          <FormActions align="between">
+            <div className="flex flex-wrap items-center gap-2">
+              {actions.filter((action) => action.trigger === 'manual').map((action) => (
+                <Button key={action.id} type="button" size="sm" onClick={() => void handleManualAction(action)} disabled={disabled} variant="secondary">
+                  {runningActionId === action.id ? t('connecting') : action.title}
+                </Button>
+              ))}
+            </div>
+            <Button type="submit" size="sm" disabled={disabled}>
+              {updateChannel.isPending ? t('saving') : t('save')}
+            </Button>
+          </FormActions>
         </ConfigSplitPaneFooter>
       </form>
     </ConfigSplitDetailPane>

package/src/features/chat/components/conversation/__tests__/chat-conversation-header-section.test.tsx

@@ -224,6 +224,46 @@ describe("ChatConversationHeaderSection", () => {
 
     expect(screen.queryByRole("button", { name: /Switch session/ })).toBeNull();
     expect(screen.getByText("Parent Task")).toBeTruthy();
+    expect(screen.queryByText("Native")).toBeNull();
+  });
+
+  it("keeps the runtime badge for a non-native session", () => {
+    useChatQueryStore.setState({
+      snapshot: {
+        ...useChatQueryStore.getState().snapshot,
+        sessionsQuery: {
+          data: {
+            sessions: [
+              createSummary({
+                sessionId: "parent-session-1",
+                metadata: {
+                  label: "Parent Task",
+                  session_type: "codex",
+                },
+              }),
+            ],
+            total: 1,
+          },
+        } as never,
+        sessionTypesQuery: {
+          data: {
+            defaultType: "native",
+            options: [{ value: "codex", label: "Codex", ready: true }],
+          },
+        } as never,
+      },
+    });
+    mocks.sessionItems = [
+      createSessionListItem({
+        key: "parent-session-1",
+        label: "Parent Task",
+        sessionType: "codex",
+      }),
+    ];
+
+    renderHeaderSection();
+
+    expect(screen.getByText("Codex")).toBeTruthy();
   });
 
   it("keeps session switching available from a collapsed new-session header", async () => {

package/src/features/chat/components/conversation/chat-conversation-header-section.tsx

@@ -53,6 +53,8 @@ export function ChatConversationHeaderSection({
     sessionTypeOptions.find((option) => option.value === sessionType) ?? null;
   const sessionTypeLabel =
     sessionTypeOption?.label ?? resolveSessionTypeLabel(sessionType);
+  const shouldShowSessionTypeBadge =
+    sessionType !== DEFAULT_SESSION_TYPE && Boolean(sessionTypeLabel);
   const sessionProjectRoot = selectedSession?.projectRoot ?? null;
   const sessionProjectName =
     selectedSession?.projectName ?? getSessionProjectName(sessionProjectRoot);
@@ -110,7 +112,7 @@ export function ChatConversationHeaderSection({
         ) : null
       }
       sessionTypeBadge={
-        sessionTypeLabel ? (
+        shouldShowSessionTypeBadge ? (
           <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
             {sessionTypeOption?.icon?.src ? (
               <span className="inline-flex h-[1.125rem] w-[1.125rem] items-center justify-center">

package/src/features/chat/components/conversation/chat-conversation-panel.tsx

@@ -34,7 +34,7 @@ export function ChatConversationPanel({
   }
 
   return (
-    <section className="flex-1 min-h-0 flex overflow-hidden bg-background">
+    <section className="relative flex-1 min-h-0 flex overflow-hidden bg-background">
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
         <ChatConversationParentBanner />
         <ChatConversationHeaderSection

package/src/features/chat/components/layout/__tests__/chat-sidebar-toolbar.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  ChatSidebarDesktopToolbar,
+  ChatSidebarMobileToolbar,
+} from "@/features/chat/components/layout/chat-sidebar-toolbar";
+import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+
+const sessionTypeOptions: ChatSessionTypeOption[] = [
+  { value: "native", label: "Native", icon: null, ready: true },
+  { value: "codex", label: "Codex", icon: null, ready: true },
+];
+
+const toolbarProps = {
+  query: "",
+  defaultSessionType: "native",
+  sessionTypeOptions,
+  nonDefaultSessionTypeOptions: [sessionTypeOptions[1]],
+  selectedNewSessionType: "native",
+  selectedNewSessionTypeOption: sessionTypeOptions[0],
+  isCreateMenuOpen: false,
+  onCreateMenuOpenChange: vi.fn(),
+  onCreateSession: vi.fn(),
+  onSelectNewSessionType: vi.fn(),
+  onQueryChange: vi.fn(),
+};
+
+function searchIconClassName() {
+  return (
+    screen
+      .getByPlaceholderText("Search conversations...")
+      .previousElementSibling?.getAttribute("class") ?? ""
+  );
+}
+
+describe("ChatSidebarToolbar", () => {
+  it("keeps desktop search icon transparent to pointer input", () => {
+    render(<ChatSidebarDesktopToolbar {...toolbarProps} />);
+
+    expect(searchIconClassName()).toContain("pointer-events-none");
+  });
+
+  it("keeps mobile search icon transparent to pointer input", () => {
+    render(<ChatSidebarMobileToolbar {...toolbarProps} />);
+
+    expect(searchIconClassName()).toContain("pointer-events-none");
+  });
+});

package/src/features/chat/components/layout/__tests__/chat-sidebar-utility-menu.test.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-sidebar-utility-menu";
+
+function renderUtilityMenu() {
+  return render(
+    <MemoryRouter>
+      <ChatSidebarUtilityMenu
+        isOpen
+        onOpenChange={vi.fn()}
+        currentTheme="warm"
+        currentThemeLabel="Warm"
+        themeOptions={[{ value: "warm", label: "Warm" }]}
+        onSelectTheme={vi.fn()}
+        currentLanguage="en"
+        currentLanguageLabel="English"
+        languageOptions={[{ value: "en", label: "English" }]}
+        onSelectLanguage={vi.fn()}
+        onOpenDocs={vi.fn()}
+        onOpenApps={vi.fn()}
+      />
+    </MemoryRouter>,
+  );
+}
+
+function appendComposerFocusTarget(): HTMLElement {
+  const composerShell = document.createElement("div");
+  composerShell.className = "nextclaw-chat-input-bar-shell";
+  const composer = document.createElement("div");
+  composer.setAttribute("contenteditable", "true");
+  composer.setAttribute("role", "textbox");
+  composer.tabIndex = 0;
+  composerShell.appendChild(composer);
+  document.body.appendChild(composerShell);
+  return composer;
+}
+
+describe("ChatSidebarUtilityMenu", () => {
+  it("stays open when the streaming composer restores focus", () => {
+    const composer = appendComposerFocusTarget();
+
+    try {
+      renderUtilityMenu();
+
+      expect(screen.getByRole("button", { name: "Help Docs" })).toBeTruthy();
+
+      fireEvent.focusIn(composer);
+
+      expect(screen.getByRole("button", { name: "Help Docs" })).toBeTruthy();
+    } finally {
+      composer.closest(".nextclaw-chat-input-bar-shell")?.remove();
+    }
+  });
+});

package/src/features/chat/components/layout/chat-sidebar-desktop-layout.tsx

@@ -134,7 +134,6 @@ export function ChatSidebarSessionArea({
   isCollapsed,
   isLoading,
   isProjectFirstView,
-  onCreateSession,
   onSelectMode,
   projectGroups,
   renderSessionItem,
@@ -145,7 +144,6 @@ export function ChatSidebarSessionArea({
   isCollapsed: boolean;
   isLoading: boolean;
   isProjectFirstView: boolean;
-  onCreateSession: (sessionType: string, projectRoot?: string | null) => void;
   onSelectMode: (mode: "time-first" | "project-first") => void;
   projectGroups: ReturnType<typeof groupSessionsByProject>;
   renderSessionItem: (item: NcpSessionListItemView) => JSX.Element;
@@ -183,7 +181,6 @@ export function ChatSidebarSessionArea({
           defaultSessionType={defaultSessionType}
           sessionTypeOptions={sessionTypeOptions}
           renderSessionItem={renderSessionItem}
-          onCreateSession={onCreateSession}
         />
       </div>
     </>

package/src/features/chat/components/layout/chat-sidebar-toolbar.tsx

@@ -16,7 +16,6 @@ import {
   SIDEBAR_RAIL_CONTROL_CLASS,
   SIDEBAR_RAIL_ICON_CLASS,
   SIDEBAR_RAIL_ITEM_GAP_CLASS,
-  SIDEBAR_RAIL_PRIMARY_SURFACE_CLASS,
   SIDEBAR_RAIL_SURFACE_CLASS,
 } from "@/app/components/layout/sidebar-rail.styles";
 
@@ -150,7 +149,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
             label={t("chatSidebarNewTask")}
             className={cn(
               SIDEBAR_RAIL_CONTROL_CLASS,
-              SIDEBAR_RAIL_PRIMARY_SURFACE_CLASS,
+              SIDEBAR_RAIL_SURFACE_CLASS,
             )}
             onClick={() => {
               onCreateMenuOpenChange(false);
@@ -259,7 +258,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
 
       <div className="px-4 pb-3">
         <div className="relative">
-          <Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/70" />
+          <Search className="pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/70" />
           <Input
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
@@ -294,7 +293,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
     <div className="px-4 pb-2 pt-1">
       <div className="flex items-center gap-2">
         <div className="relative min-w-0 flex-1">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
           <Input
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}

package/src/features/chat/components/layout/chat-sidebar-utility-menu.tsx

@@ -34,10 +34,7 @@ import {
   type LucideIcon,
 } from "lucide-react";
 
-type ChatSidebarUtilityOption<Value extends string> = {
-  value: Value;
-  label: string;
-};
+type ChatSidebarUtilityOption<Value extends string> = { value: Value; label: string };
 
 type ChatSidebarUtilityMenuProps = {
   isOpen: boolean;
@@ -55,6 +52,12 @@ type ChatSidebarUtilityMenuProps = {
   collapsed?: boolean;
 };
 
+function isChatComposerFocusTarget(target: EventTarget | null): boolean {
+  return target instanceof HTMLElement && Boolean(
+    target.closest('.nextclaw-chat-input-bar-shell [role="textbox"][contenteditable="true"]'),
+  );
+}
+
 export function ChatSidebarUtilityMenu({
   isOpen,
   onOpenChange,
@@ -70,16 +73,6 @@ export function ChatSidebarUtilityMenu({
   onOpenApps,
   collapsed = false,
 }: ChatSidebarUtilityMenuProps) {
-  const handleOpenDocs = () => {
-    onOpenDocs();
-    onOpenChange(false);
-  };
-
-  const handleOpenApps = () => {
-    onOpenApps();
-    onOpenChange(false);
-  };
-
   return (
     <Popover open={isOpen} onOpenChange={onOpenChange}>
       {collapsed ? (
@@ -129,6 +122,11 @@ export function ChatSidebarUtilityMenu({
         side={collapsed ? "right" : "top"}
         align={collapsed ? "end" : "start"}
         className="w-64 p-2"
+        onFocusOutside={(event) => {
+          if (isChatComposerFocusTarget(event.detail.originalEvent.target)) {
+            event.preventDefault();
+          }
+        }}
       >
         <div className="space-y-1">
           <NavLink
@@ -139,22 +137,23 @@ export function ChatSidebarUtilityMenu({
             <Settings className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("settings")}</span>
           </NavLink>
-          <button
-            type="button"
-            onClick={handleOpenDocs}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
-          >
-            <BookOpen className="h-4 w-4 text-muted-foreground/70" />
-            <span className="flex-1 text-left">{t("docBrowserHelp")}</span>
-          </button>
-          <button
-            type="button"
-            onClick={handleOpenApps}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
-          >
-            <Boxes className="h-4 w-4 text-muted-foreground/70" />
-            <span className="flex-1 text-left">{t("appsTitle")}</span>
-          </button>
+          {[
+            { key: "docs", icon: BookOpen, label: t("docBrowserHelp"), action: onOpenDocs },
+            { key: "apps", icon: Boxes, label: t("appsTitle"), action: onOpenApps },
+          ].map(({ key, icon: Icon, label, action }) => (
+            <button
+              key={key}
+              type="button"
+              onClick={() => {
+                action();
+                onOpenChange(false);
+              }}
+              className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
+            >
+              <Icon className="h-4 w-4 text-muted-foreground/70" />
+              <span className="flex-1 text-left">{label}</span>
+            </button>
+          ))}
         </div>
 
         <div className="my-2 h-px bg-border" />

package/src/features/chat/components/layout/chat-sidebar.tsx

@@ -105,7 +105,7 @@ export function ChatSidebar({
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
   const currentThemeLabel = t(
-    THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? "themeNatural",
+    THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? "themeWork",
   );
   const currentLanguageLabel =
     LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
@@ -132,6 +132,14 @@ export function ChatSidebar({
       ),
     [agentsQuery.data?.agents],
   );
+  const pinnedSessionKeys = useMemo(
+    () => new Set(listSnapshot.pinnedSessionKeys),
+    [listSnapshot.pinnedSessionKeys],
+  );
+  const pinnedProjectRoots = useMemo(
+    () => new Set(listSnapshot.pinnedProjectRoots),
+    [listSnapshot.pinnedProjectRoots],
+  );
   const sortedItems = useMemo(
     () => sortSessionItemsByActivityAtDesc(items),
     [items],
@@ -140,10 +148,13 @@ export function ChatSidebar({
     () => groupChildSessionsByParentKey(items),
     [items],
   );
-  const groups = useMemo(() => groupSessionsByDate(sortedItems), [sortedItems]);
+  const groups = useMemo(
+    () => groupSessionsByDate(sortedItems, pinnedSessionKeys),
+    [pinnedSessionKeys, sortedItems],
+  );
   const projectGroups = useMemo(
-    () => groupSessionsByProject(sortedItems),
-    [sortedItems],
+    () => groupSessionsByProject(sortedItems, pinnedSessionKeys, pinnedProjectRoots),
+    [pinnedProjectRoots, pinnedSessionKeys, sortedItems],
   );
   const sessionTypeOptions = useMemo(
     () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
@@ -200,6 +211,7 @@ export function ChatSidebar({
       draftLabel={draftLabel}
       savingSessionKey={savingSessionKey}
       sessionTypeOptions={sessionTypeOptions}
+      isPinned={pinnedSessionKeys.has(item.session.key)}
       sessionTitle={getSessionTitle}
       onSelectSession={presenter.chatSessionListManager.selectSession}
       onOpenChildSessions={(parentSessionKey, activeChildSessionKey) =>
@@ -212,6 +224,9 @@ export function ChatSidebar({
       onDraftLabelChange={setDraftLabel}
       onSaveSessionLabel={saveSessionLabel}
       onCancelEditingSessionLabel={cancelEditingSessionLabel}
+      onTogglePinned={() =>
+        presenter.chatSessionListManager.toggleSessionPinned(item.session.key)
+      }
     />
   );
   const createSessionAndOpenIfNeeded = (
@@ -233,9 +248,9 @@ export function ChatSidebar({
           : shouldCollapse
             ? cn(
                 SIDEBAR_RAIL_WIDTH_CLASS,
-                "shrink-0 border-r border-border/70",
+                "shrink-0",
               )
-            : "w-[280px] shrink-0 border-r border-border/70",
+            : "w-[280px] shrink-0",
       )}
       data-sidebar-collapsed={shouldCollapse ? "true" : "false"}
     >
@@ -295,7 +310,6 @@ export function ChatSidebar({
         isCollapsed={shouldCollapse}
         isLoading={isLoading}
         isProjectFirstView={isProjectFirstView}
-        onCreateSession={createSessionAndOpenIfNeeded}
         onSelectMode={presenter.chatSessionListManager.setListMode}
         projectGroups={projectGroups}
         renderSessionItem={renderSessionItem}

package/src/features/chat/features/conversation/components/session-conversation-input.tsx

@@ -417,7 +417,8 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
           },
         })}
         toolbar={{
-          selects: toolbarSelects,
+          selects: [],
+          trailingSelects: toolbarSelects,
           accessories: [
             {
               key: 'attach',

package/src/features/chat/features/message/components/__tests__/chat-inline-panel-app-card.test.tsx

@@ -32,8 +32,13 @@ vi.mock('@/app/presenters/app.presenter', () => ({
 }));
 
 vi.mock('@/features/panel-apps', () => ({
+  PANEL_APP_IFRAME_SANDBOX: 'allow-scripts allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-downloads allow-pointer-lock allow-presentation',
   findPanelAppEntryByDisplayId: (entries: Array<{ appId: string; id: string; title: string }>, value: string) =>
     entries.find((entry) => [entry.appId, entry.id, entry.title].includes(value)) ?? null,
+  focusPanelAppIframe: (iframe: HTMLIFrameElement | null) => {
+    iframe?.focus({ preventScroll: true });
+    iframe?.contentWindow?.focus();
+  },
   usePanelApps: () => mocks.panelApps,
 }));
 
@@ -68,7 +73,6 @@ it('renders inline panel apps as bounded card-mode iframes with an expand action
   expect(iframe.getAttribute('src')).toBe(
     '/api/panel-apps/weather-card/content?nextclawDisplayMode=card&nextclawPlacement=inline',
   );
-  expect(iframe.getAttribute('scrolling')).toBe('auto');
 
   fireEvent.click(screen.getByLabelText('chatPanelCardExpand'));
 
@@ -80,6 +84,23 @@ it('renders inline panel apps as bounded card-mode iframes with an expand action
   }));
 });
 
+it('focuses the inline panel app iframe when the pointer enters it', () => {
+  render(<ChatInlinePanelAppCard panelApp={{
+    appId: 'weather-card',
+    title: 'Weather',
+  }} />);
+
+  const iframe = screen.getByTitle('Weather') as HTMLIFrameElement;
+  const iframeFocus = vi.spyOn(iframe, 'focus');
+  const contentWindowFocus = vi.spyOn(iframe.contentWindow!, 'focus').mockImplementation(() => undefined);
+
+  fireEvent.pointerOver(iframe);
+
+  expect(iframe.getAttribute('tabindex')).toBe('0');
+  expect(iframeFocus).toHaveBeenCalledWith({ preventScroll: true });
+  expect(contentWindowFocus).toHaveBeenCalled();
+});
+
 it('can render inline panel apps without a side-panel expand action', () => {
   render(
     <ChatInlinePanelAppCard