@nextclaw/ui 0.25.4 → 0.26.1

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

@@ -1,275 +1,83 @@
-import { Button } from "@/shared/components/ui/button";
-import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
-import { Input } from "@/shared/components/ui/input";
-import {
-  Popover,
-  PopoverTrigger,
-} from "@/shared/components/ui/popover";
-import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
-import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
-import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
-import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
-import { cn } from "@/shared/lib/utils";
-import { t } from "@/shared/lib/i18n";
-import { Bot, ChevronDown, Plus, Search } from "lucide-react";
-import {
-  SIDEBAR_RAIL_CONTROL_CLASS,
-  SIDEBAR_RAIL_ICON_CLASS,
-  SIDEBAR_RAIL_ITEM_GAP_CLASS,
-  SIDEBAR_RAIL_SURFACE_CLASS,
-} from "@/app/components/layout/sidebar-rail.styles";
-
-type SessionTypeOption = ChatSessionTypeOption;
+import { useState } from 'react';
+import { ChevronDown, Clock3, Folder, FolderPlus, Plus, Search, X } from 'lucide-react';
+import { Button } from '@/shared/components/ui/button';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { Input } from '@/shared/components/ui/input';
+import { Popover, PopoverTrigger } from '@/shared/components/ui/popover';
+import { ChatPopoverContent } from '@/features/chat/components/chat-popover-content';
+import { ChatSessionHeaderMenuItem } from '@/features/chat/features/session/components/session-header/chat-session-header-menu-item';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+import { SIDEBAR_RAIL_CONTROL_CLASS, SIDEBAR_RAIL_ICON_CLASS, SIDEBAR_RAIL_SURFACE_CLASS } from '@/app/components/layout/sidebar-rail.styles';
 
 type ChatSidebarToolbarProps = {
   query: string;
-  defaultSessionType: string;
-  sessionTypeOptions: SessionTypeOption[];
-  selectedNewSessionType: string;
-  selectedNewSessionTypeOption: SessionTypeOption | null;
-  isCreateMenuOpen: boolean;
-  onCreateMenuOpenChange: (open: boolean) => void;
-  onCreateSession: (sessionType: string) => void;
-  onSelectNewSessionType: (sessionType: string) => void;
   onQueryChange: (query: string) => void;
+  onCreateSession: () => void;
   collapsed?: boolean;
 };
 
-function SessionTypeTriggerIcon({
-  option,
-}: {
-  option: SessionTypeOption | null;
-}) {
-  if (option?.icon?.src) {
-    return (
-      <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
-        <SessionContextIconNode
-          icon={{
-            kind: "runtime-image",
-            src: option.icon.src,
-            alt: option.icon.alt ?? null,
-            name: option.label,
-          }}
-          className="h-4 w-4"
-        />
-      </span>
-    );
-  }
-  return <Bot className="h-4 w-4 shrink-0" />;
-}
-
-export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
-  const {
-    query,
-    selectedNewSessionType,
-    selectedNewSessionTypeOption,
-    sessionTypeOptions,
-    isCreateMenuOpen,
-    onCreateMenuOpenChange,
-    onCreateSession,
-    onSelectNewSessionType,
-    onQueryChange,
-    collapsed = false,
-  } = props;
-  const supportsSessionTypeSwitch = sessionTypeOptions.length > 1;
-
+export function ChatSidebarDesktopToolbar({ query, onQueryChange, onCreateSession, collapsed }: ChatSidebarToolbarProps) {
   if (collapsed) {
-    return (
-      <div className="px-2 pb-2">
-        <div
-          className={cn(
-            "flex flex-col items-center",
-            SIDEBAR_RAIL_ITEM_GAP_CLASS,
-          )}
-        >
-          <IconActionButton
-            icon={<Plus className={SIDEBAR_RAIL_ICON_CLASS} />}
-            label={t("chatSidebarNewTask")}
-            className={cn(
-              SIDEBAR_RAIL_CONTROL_CLASS,
-              SIDEBAR_RAIL_SURFACE_CLASS,
-            )}
-            onClick={() => {
-              onCreateMenuOpenChange(false);
-              onCreateSession(selectedNewSessionType);
-            }}
-          />
-          {supportsSessionTypeSwitch ? (
-            <Popover
-              open={isCreateMenuOpen}
-              onOpenChange={onCreateMenuOpenChange}
-            >
-              <PopoverTrigger asChild>
-                <IconActionButton
-                  icon={
-                    <SessionTypeTriggerIcon
-                      option={selectedNewSessionTypeOption}
-                    />
-                  }
-                  label={t("chatSessionTypeLabel")}
-                  className={cn(
-                    SIDEBAR_RAIL_CONTROL_CLASS,
-                    SIDEBAR_RAIL_SURFACE_CLASS,
-                  )}
-                />
-              </PopoverTrigger>
-              <ChatPopoverContent
-                align="start"
-                side="right"
-                className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
-              >
-                <ChatSessionTypeMenu
-                  options={sessionTypeOptions}
-                  selectedSessionType={selectedNewSessionType}
-                  onSelect={(sessionType) => {
-                    onSelectNewSessionType(sessionType);
-                    onCreateMenuOpenChange(false);
-                  }}
-                />
-              </ChatPopoverContent>
-            </Popover>
-          ) : null}
-        </div>
-      </div>
-    );
+    return <div className="px-2 pb-2">
+      <IconActionButton icon={<Plus className={SIDEBAR_RAIL_ICON_CLASS} />} label={t('chatSidebarNewTask')}
+        className={cn(SIDEBAR_RAIL_CONTROL_CLASS, SIDEBAR_RAIL_SURFACE_CLASS)} onClick={onCreateSession} />
+    </div>;
   }
-
-  return (
-    <>
-      <div className="px-4 pb-2">
-        <div className="flex overflow-hidden rounded-lg bg-primary/10 text-primary ring-1 ring-primary/10">
-          <Button
-            variant="ghost"
-            className={cn(
-              "min-w-0 rounded-none bg-transparent px-3 text-primary shadow-none hover:bg-primary/10 hover:text-primary-700 active:bg-primary/15",
-              supportsSessionTypeSwitch ? "flex-1" : "w-full",
-            )}
-            onClick={() => {
-              onCreateMenuOpenChange(false);
-              onCreateSession(selectedNewSessionType);
-            }}
-          >
-            <Plus className="mr-1.5 h-4 w-4" />
-            {t("chatSidebarNewTask")}
-          </Button>
-          {supportsSessionTypeSwitch ? (
-            <Popover
-              open={isCreateMenuOpen}
-              onOpenChange={onCreateMenuOpenChange}
-            >
-              <PopoverTrigger asChild>
-                <IconActionButton
-                  icon={
-                    <span className="inline-flex items-center gap-1">
-                      <SessionTypeTriggerIcon
-                        option={selectedNewSessionTypeOption}
-                      />
-                      <ChevronDown className="h-3 w-3 opacity-50" />
-                    </span>
-                  }
-                  label={t("chatSessionTypeLabel")}
-                  tooltip={t("chatSessionTypeLabel")}
-                  className="h-9 w-12 shrink-0 rounded-none border-l border-primary/10 bg-transparent text-primary shadow-none hover:bg-primary/10 hover:text-primary-700 active:bg-primary/15"
-                />
-              </PopoverTrigger>
-              <ChatPopoverContent
-                align="end"
-                className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
-              >
-                <ChatSessionTypeMenu
-                  options={sessionTypeOptions}
-                  selectedSessionType={selectedNewSessionType}
-                  onSelect={(sessionType) => {
-                    onSelectNewSessionType(sessionType);
-                    onCreateMenuOpenChange(false);
-                  }}
-                />
-              </ChatPopoverContent>
-            </Popover>
-          ) : null}
-        </div>
-      </div>
-
-      <div className="px-4 pb-2">
-        <div className="relative">
-          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" />
-          <Input
-            data-theme-control="chat-search"
-            value={query}
-            onChange={(event) => onQueryChange(event.target.value)}
-            placeholder={t("chatSidebarSearchPlaceholder")}
-            className="h-8 rounded-lg border-0 bg-background/55 pl-8 text-xs shadow-none hover:bg-background/75"
-          />
-        </div>
+  return <>
+    <div className="px-4 pb-2">
+      <Button variant="ghost" className="w-full rounded-lg bg-primary/10 text-primary hover:bg-primary/15" onClick={onCreateSession}>
+        <Plus className="mr-1.5 h-4 w-4" />{t('chatSidebarNewTask')}
+      </Button>
+    </div>
+    <div className="px-4 pb-2">
+      <div className="relative">
+        <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" />
+        <Input data-theme-control="chat-search" value={query} onChange={event => onQueryChange(event.target.value)}
+          placeholder={t('chatSidebarSearchPlaceholder')} className="h-8 rounded-lg border-0 bg-background/55 pl-8 text-xs shadow-none hover:bg-background/75" />
       </div>
-    </>
-  );
+    </div>
+  </>;
 }
 
-export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
-  const {
-    query,
-    defaultSessionType,
-    sessionTypeOptions,
-    isCreateMenuOpen,
-    onCreateMenuOpenChange,
-    onCreateSession,
-    onQueryChange,
-  } = props;
-  const hasCreateMenu = sessionTypeOptions.length > 1;
-
+export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps & {
+  isProjectFirstView: boolean;
+  onSelectMode: (mode: 'time-first' | 'project-first') => void;
+  onAddProject: () => void;
+}) {
+  const { query, onQueryChange, onCreateSession, isProjectFirstView, onSelectMode, onAddProject } = props;
+  const [searchOpen, setSearchOpen] = useState(Boolean(query));
+  const [viewMenuOpen, setViewMenuOpen] = useState(false);
   return (
-    <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="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
-          <Input
-            data-theme-control="chat-search"
-            value={query}
-            onChange={(event) => onQueryChange(event.target.value)}
-            placeholder={t("chatSidebarSearchPlaceholder")}
-            className="h-9 rounded-full border-0 bg-muted pl-9 pr-3 text-[13px] shadow-none"
-          />
-        </div>
-
-        {hasCreateMenu ? (
-          <Popover
-            open={isCreateMenuOpen}
-            onOpenChange={onCreateMenuOpenChange}
-          >
+    <div className="shrink-0 border-b border-border/50 bg-background px-3 text-foreground" style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}>
+      <div className="flex h-14 items-center gap-1">
+        <Popover open={viewMenuOpen} onOpenChange={setViewMenuOpen}>
+          <h1>
             <PopoverTrigger asChild>
-              <IconActionButton
-                icon={<Plus className="h-4 w-4" />}
-                label={t("chatSidebarNewTask")}
-                tooltip={false}
-                className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
-              />
+              <button type="button" aria-label={t('chatSidebarViewMode')} className="flex h-11 min-w-0 items-center gap-1.5 rounded-lg px-1 text-[18px] font-semibold text-foreground">
+                {t('chat')}{isProjectFirstView ? <Folder className="h-4 w-4" /> : null}
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              </button>
             </PopoverTrigger>
-            <ChatPopoverContent
-              align="end"
-              className="w-60 rounded-3xl border border-border bg-popover p-2 text-popover-foreground shadow-[0_24px_70px_-30px_rgba(15,23,42,0.45)]"
-            >
-              <ChatSessionTypeMenu
-                options={sessionTypeOptions}
-                selectedSessionType={defaultSessionType}
-                title={t("chatSidebarNewTask")}
-                titleClassName="pb-1.5 text-[11px] font-medium normal-case tracking-normal"
-                onSelect={(sessionType) => {
-                  onCreateSession(sessionType);
-                  onCreateMenuOpenChange(false);
-                }}
-              />
-            </ChatPopoverContent>
-          </Popover>
-        ) : (
-          <IconActionButton
-            icon={<Plus className="h-4 w-4" />}
-            label={t("chatSidebarNewTask")}
-            className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
-            onClick={() => onCreateSession(defaultSessionType)}
-          />
-        )}
+          </h1>
+          <ChatPopoverContent align="start" className="w-48 p-1.5">
+            <div onClick={() => setViewMenuOpen(false)}>
+              <ChatSessionHeaderMenuItem icon={Clock3} label={t('chatSidebarViewTime')} onClick={() => onSelectMode('time-first')} />
+              <ChatSessionHeaderMenuItem icon={Folder} label={t('chatSidebarViewProject')} onClick={() => onSelectMode('project-first')} />
+              <ChatSessionHeaderMenuItem icon={FolderPlus} label={t('chatProjectAdd')} onClick={onAddProject} />
+            </div>
+          </ChatPopoverContent>
+        </Popover>
+        <div className="flex-1" />
+        <IconActionButton icon={searchOpen ? <X className="h-5 w-5" /> : <Search className="h-5 w-5" />}
+          label={t(searchOpen ? 'chatSidebarCloseSearch' : 'chatSidebarSearchPlaceholder')} className="h-11 w-11" tooltip={false}
+          onClick={() => { setSearchOpen(!searchOpen); if (searchOpen) onQueryChange(''); }} />
+        <IconActionButton icon={<Plus className="h-5 w-5" />} label={t('chatSidebarNewTask')} className="h-11 w-11" tooltip={false} onClick={onCreateSession} />
       </div>
+      {searchOpen ? <div className="pb-2">
+        <Input autoFocus value={query} onChange={event => onQueryChange(event.target.value)} placeholder={t('chatSidebarSearchPlaceholder')}
+          aria-label={t('chatSidebarSearchPlaceholder')} className="h-10 rounded-lg border-0 bg-muted px-3 text-base shadow-none" />
+      </div> : null}
     </div>
   );
 }

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

@@ -105,7 +105,6 @@ export function ChatSidebar({
   const isSidebarCollapsed = useViewportLayoutStore(
     (state) => state.isSidebarCollapsed,
   );
-  const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
   const [isProjectAddOpen, setIsProjectAddOpen] = useState(false);
   const [isUtilityMenuOpen, setIsUtilityMenuOpen] = useState(false);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
@@ -226,6 +225,7 @@ export function ChatSidebar({
   };
   const renderSessionItem = (item: NcpSessionListItemView) => (
     <ChatSidebarSessionEntry
+      variant={variant}
       key={item.session.key}
       item={item}
       selectedSessionKey={listSnapshot.selectedSessionKey}
@@ -250,13 +250,9 @@ export function ChatSidebar({
       onDeleteSession={presenter.chatThreadManager.deleteSession}
     />
   );
-  const createSessionAndOpenIfNeeded = (
-    sessionType: string,
-    projectRoot?: string | null,
-  ) => {
+  const createSessionAndOpenIfNeeded = () => {
     presenter.chatSessionListManager.createSession({
-      projectRoot: typeof projectRoot === "string" ? projectRoot : undefined,
-      sessionType,
+      sessionType: newSessionTypePreference.selectedSessionType,
     });
   };
   const openProjectAdd = () => {
@@ -283,7 +279,7 @@ export function ChatSidebar({
       className={cn(
         "flex h-full min-h-0 flex-col bg-secondary transition-[width] duration-200 ease-out",
         isMobileVariant
-          ? "flex-1 overflow-hidden"
+          ? "flex-1 overflow-hidden bg-background"
           : shouldCollapse
             ? cn(SIDEBAR_RAIL_WIDTH_CLASS, "shrink-0")
             : "w-[280px] shrink-0",
@@ -299,36 +295,17 @@ export function ChatSidebar({
 
       {isMobileVariant ? (
         <ChatSidebarMobileToolbar
+          isProjectFirstView={isProjectFirstView}
+          onSelectMode={presenter.chatSessionListManager.setListMode}
+          onAddProject={openProjectAdd}
           query={listSnapshot.query}
-          defaultSessionType={newSessionTypePreference.selectedSessionType}
-          sessionTypeOptions={sessionTypeOptions}
-          selectedNewSessionType={newSessionTypePreference.selectedSessionType}
-          selectedNewSessionTypeOption={
-            newSessionTypePreference.selectedSessionTypeOption
-          }
-          isCreateMenuOpen={isCreateMenuOpen}
-          onCreateMenuOpenChange={setIsCreateMenuOpen}
           onCreateSession={createSessionAndOpenIfNeeded}
-          onSelectNewSessionType={
-            newSessionTypePreference.setSelectedSessionType
-          }
           onQueryChange={presenter.chatSessionListManager.setQuery}
         />
       ) : (
         <ChatSidebarDesktopToolbar
           query={listSnapshot.query}
-          defaultSessionType={defaultSessionType}
-          sessionTypeOptions={sessionTypeOptions}
-          selectedNewSessionType={newSessionTypePreference.selectedSessionType}
-          selectedNewSessionTypeOption={
-            newSessionTypePreference.selectedSessionTypeOption
-          }
-          isCreateMenuOpen={isCreateMenuOpen}
-          onCreateMenuOpenChange={setIsCreateMenuOpen}
           onCreateSession={createSessionAndOpenIfNeeded}
-          onSelectNewSessionType={
-            newSessionTypePreference.setSelectedSessionType
-          }
           onQueryChange={presenter.chatSessionListManager.setQuery}
           collapsed={shouldCollapse}
         />
@@ -339,6 +316,7 @@ export function ChatSidebar({
       ) : null}
 
       <ChatSidebarSessionArea
+        variant={variant}
         defaultSessionType={newSessionTypePreference.selectedSessionType}
         groups={groups}
         isCollapsed={shouldCollapse}

package/src/features/chat/components/providers/chat-runtime.provider.tsx

@@ -0,0 +1,62 @@
+import { useWorkbenchSurfaceStore } from '@/shared/components/workbench/stores/workbench-surface.store';
+import { GLOBAL_WORKBENCH_SURFACE, SESSION_WORKBENCH_SURFACE } from '@/shared/components/workbench/types/workbench-surface.types';
+import { useEffect, useMemo, type ReactNode } from 'react';
+import { useLocation, useMatch, useNavigate } from 'react-router-dom';
+import { useAppPresenter } from '@/app/components/app-presenter-provider';
+import { ChatPresenter } from '@/features/chat/presenters/chat.presenter';
+import { ChatPresenterProvider, usePresenter } from './chat-presenter.provider';
+import { useConfirmDialog } from '@/shared/hooks/use-confirm-dialog';
+import { useChatQueryStoreSync } from '@/features/chat/features/ncp/hooks/use-ncp-chat-query-store-sync';
+import { parseSessionKeyFromRoute } from '@/features/chat/features/session/utils/chat-session-route.utils';
+import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
+import { useFloatingSessionStore } from '@/features/chat/stores/floating-session.store';
+import { FloatingSessionConversation } from '@/features/chat/features/conversation/components/floating-session-conversation';
+import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
+import { CHAT_SESSION_PANEL_KIND, parseSessionKeyFromPanelUrl } from '@/features/chat/features/session/utils/chat-session-route.utils';
+
+function ChatRuntime({ children }: { children: ReactNode }) {
+  const presenter = usePresenter();
+  const appPresenter = useAppPresenter();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const match = useMatch('/chat/:sessionId');
+  const sessionKey = parseSessionKeyFromRoute(match?.params.sessionId);
+  const workspaceMinimized = useWorkbenchSurfaceStore((state) => state.surfaces[`session-workspace:${sessionKey ?? 'draft'}`]?.minimized ?? false);
+  const workspaceSessionKey = useChatThreadStore(({ snapshot }) =>
+    snapshot.workspacePanelParentKey === sessionKey && sessionKey && !snapshot.workspacePanelHidden && !workspaceMinimized &&
+    snapshot.activeWorkspacePanelKind === 'child-session'
+      ? snapshot.activeChildSessionKey : null,
+  );
+  const floatingMinimized = useWorkbenchSurfaceStore((state) => state.surfaces[SESSION_WORKBENCH_SURFACE]?.minimized ?? false);
+  const panelMinimized = useWorkbenchSurfaceStore((state) => state.surfaces[GLOBAL_WORKBENCH_SURFACE]?.minimized ?? false);
+  const floatingSessionKey = useFloatingSessionStore((state) => floatingMinimized ? null : state.session?.sessionKey);
+  const panelSessionKey = useDocBrowserStore(({ snapshot }) => {
+    const tab = snapshot.tabs.find((item) => item.id === snapshot.activeTabId);
+    return snapshot.isOpen && !panelMinimized && tab?.kind === CHAT_SESSION_PANEL_KIND
+      ? parseSessionKeyFromPanelUrl(tab.currentUrl) : null;
+  });
+  useChatQueryStoreSync({ sessionKey });
+  useEffect(() => {
+    presenter.chatUiManager.syncState({ pathname: location.pathname });
+    presenter.chatUiManager.bindActions({ navigate, confirm });
+  }, [confirm, location.pathname, navigate, presenter]);
+  useEffect(() => {
+    appPresenter.chatCompletionNotificationManager.syncVisibleSessions([
+      sessionKey, workspaceSessionKey, floatingSessionKey, panelSessionKey,
+    ]);
+    return () => appPresenter.chatCompletionNotificationManager.syncVisibleSessions([]);
+  }, [appPresenter, sessionKey, workspaceSessionKey, floatingSessionKey, panelSessionKey]);
+
+  return <>{children}<FloatingSessionConversation /><ConfirmDialog /></>;
+}
+
+export function ChatRuntimeProvider({ children }: { children: ReactNode }) {
+  const appPresenter = useAppPresenter();
+  const presenter = useMemo(() => new ChatPresenter(appPresenter), [appPresenter]);
+  return (
+    <ChatPresenterProvider presenter={presenter}>
+      <ChatRuntime>{children}</ChatRuntime>
+    </ChatPresenterProvider>
+  );
+}

package/src/features/chat/features/conversation/components/__tests__/floating-session-conversation.test.tsx

@@ -0,0 +1,70 @@
+import { AppPresenterProvider } from '@/app/components/app-presenter-provider';
+import type { ReactElement } from 'react';
+
+vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
+  usePanelApps: () => ({ data: { entries: [] } }),
+  useUpdatePanelAppPreferences: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+function render(ui: ReactElement) {
+  return renderUi(<AppPresenterProvider>{ui}</AppPresenterProvider>);
+}
+import { sessionSurfaceManager } from '@/features/chat/managers/session-surface.manager';
+import { act, render as renderUi, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { FloatingSessionConversation } from '@/features/chat/features/conversation/components/floating-session-conversation';
+import { buildSessionPath } from '@/features/chat/features/session/utils/chat-session-route.utils';
+
+vi.mock('@/features/chat/features/conversation/components/session-conversation-area', () => ({
+  SessionConversationArea: ({ sessionKey }: { sessionKey: string }) =>
+    <textarea aria-label={sessionKey} />,
+}));
+
+function MainConversation() {
+  return <><textarea aria-label="main" /><span data-testid="path">{useLocation().pathname}</span></>;
+}
+
+describe('Floating conversation shell', () => {
+  beforeEach(() => sessionSurfaceManager.close());
+
+  it('preserves the main editor and floating editor identity through minimize and restore', async () => {
+    const user = userEvent.setup();
+    render(<MemoryRouter initialEntries={['/chat/current']}>
+      <MainConversation /><FloatingSessionConversation />
+    </MemoryRouter>);
+    const main = screen.getByRole('textbox', { name: 'main' });
+    await user.type(main, 'main draft');
+    act(() => sessionSurfaceManager.open({ sessionKey: 'other', title: 'Other task' }));
+    expect(document.activeElement).toBe(screen.getByTestId('floating-session-conversation'));
+    const floating = screen.getByRole('textbox', { name: 'other' });
+    await user.type(floating, 'follow-up');
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('textbox', { name: 'other' })).toBeNull();
+    await user.click(screen.getByRole('button', { name: 'Expand view' }));
+    expect(screen.getByRole('textbox', { name: 'other' })).toBe(floating);
+    expect((floating as HTMLTextAreaElement).value).toBe('follow-up');
+    expect(screen.getByRole('textbox', { name: 'main' })).toBe(main);
+    expect((main as HTMLTextAreaElement).value).toBe('main draft');
+    expect(screen.getByTestId('path').textContent).toBe('/chat/current');
+    await user.click(screen.getByRole('button', { name: 'Close view' }));
+    expect(floating.isConnected).toBe(false);
+    expect(main.isConnected).toBe(true);
+  });
+
+  it('switches only the floating target and navigates only on explicit main-view action', async () => {
+    const user = userEvent.setup();
+    render(<MemoryRouter initialEntries={['/settings']}>
+      <MainConversation /><FloatingSessionConversation />
+    </MemoryRouter>);
+    act(() => sessionSurfaceManager.open({ sessionKey: 'one', title: 'One' }));
+    const previous = screen.getByRole('textbox', { name: 'one' });
+    act(() => sessionSurfaceManager.open({ sessionKey: 'two', title: 'Two' }));
+    expect(previous.isConnected).toBe(false);
+    expect(screen.getByRole('textbox', { name: 'two' })).toBeTruthy();
+    expect(screen.getByTestId('path').textContent).toBe('/settings');
+    await user.click(screen.getByRole('button', { name: 'Open in main area' }));
+    expect(screen.getByTestId('path').textContent).toBe(buildSessionPath('two'));
+    expect(screen.queryByTestId('floating-session-conversation')).toBeNull();
+  });
+});

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

@@ -7,7 +7,7 @@ import { ChatVoiceShortcutControl } from './chat-voice-shortcut-control';
 import { voicePermissionInstructionKeys } from '@/features/chat/utils/chat-voice-permissions.utils';
 
 const ERROR_KEYS: Record<VoiceError, string> = {
-  unsupported: 'chatInputVoiceUnsupported', permission: 'chatInputVoicePermissionDenied',
+  'insecure-context': 'chatInputVoiceInsecureContext', unsupported: 'chatInputVoiceUnsupported', permission: 'chatInputVoicePermissionDenied',
   'service-denied': 'chatInputVoiceServiceDenied', 'no-device': 'chatInputVoiceNoDevice', 'device-busy': 'chatInputVoiceDeviceBusy',
   network: 'chatInputVoiceNetwork', 'audio-capture': 'chatInputVoiceDevice',
   'no-speech': 'chatInputVoiceNoSpeech', interrupted: 'chatInputVoiceInterrupted',
@@ -57,7 +57,8 @@ export function ChatVoiceInputPanel({ manager, snapshot, onStart, desktop }: {
       {phase === 'starting' ? <p className='sr-only'>{t('chatInputVoicePermissionPurpose')}</p> : null}
       {error ? <VoiceErrorDetails error={error} microphoneError={microphoneError} text={snapshot.text} /> : null}
       </div>
-      {error ? <Button className='mt-2 shrink-0 self-start' size='sm' disabled={error === 'unsupported'} onClick={onStart}>
+      {error ? <Button className='mt-2 shrink-0 self-start' size='sm'
+        disabled={error === 'unsupported' || error === 'insecure-context'} onClick={onStart}>
         {t(microphoneError ? 'chatInputVoiceCheckAndRetry' : 'chatInputVoiceRetry')}
       </Button> : null}
       {phase === 'error' ? <Button className='mt-2 shrink-0 self-start' variant='ghost' size='sm'

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

@@ -0,0 +1,27 @@
+import { PageResourceActionsMenu } from '@/features/right-panel-resources';
+import { pageResourceFromTarget } from '@/features/right-panel-resources';
+import { buildSessionPanelUrl } from '@/features/chat/features/session/utils/chat-session-route.utils';
+import { MessageSquare } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { getAppPresenter } from '@/app/presenters/app.presenter';
+import { sessionSurfaceManager } from '@/features/chat/managers/session-surface.manager';
+import { useFloatingSessionStore } from '@/features/chat/stores/floating-session.store';
+import { buildSessionPath } from '@/features/chat/features/session/utils/chat-session-route.utils';
+import { WorkbenchSurface } from '@/shared/components/workbench/workbench-surface';
+import { SESSION_WORKBENCH_SURFACE } from '@/shared/components/workbench/types/workbench-surface.types';
+import { SessionConversationArea } from './session-conversation-area';
+
+export function FloatingSessionConversation() {
+  const session = useFloatingSessionStore((state) => state.session);
+  const navigate = useNavigate();
+  const presenter = getAppPresenter();
+  if (!session) return null;
+  return <WorkbenchSurface id={SESSION_WORKBENCH_SURFACE} manager={presenter.workbenchSurfaceManager}
+    title={session.title} icon={<MessageSquare className="h-4 w-4 shrink-0" />} testId="floating-session-conversation" focusOnOpen
+    navigation={<div className="flex min-w-0 flex-1 items-center gap-2"><span className="min-w-0 flex-1 truncate text-xs">{session.title}</span><PageResourceActionsMenu page={pageResourceFromTarget({ kind: 'chat-session', title: session.title, url: buildSessionPanelUrl(session.sessionKey), resourceUri: buildSessionPanelUrl(session.sessionKey), historyPolicy: 'none' })} /></div>}
+    onClose={sessionSurfaceManager.close}
+    onPlace={() => sessionSurfaceManager.dock(session, presenter.docBrowserManager)}
+    onOpenMain={() => { navigate(buildSessionPath(session.sessionKey)); sessionSurfaceManager.close(); }}>
+    <SessionConversationArea key={session.sessionKey} sessionKey={session.sessionKey} />
+  </WorkbenchSurface>;
+}

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

@@ -415,6 +415,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     <>
       <SessionConversationAlerts inputQuery={inputQuery} />
       <ChatConversationContent
+        resourceWorkingDir={selectedSession?.workingDir ?? selectedSession?.projectRoot ?? null}
         hasPreviousMessages={agent.hasPreviousMessages}
         historyError={agent.historyError}
         isHistoryLoading={agent.isHydrating}

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

@@ -0,0 +1,25 @@
+import { MessageSquare } from 'lucide-react';
+import { CHAT_SESSION_PANEL_KIND, parseSessionKeyFromPanelUrl } from '@/features/chat/features/session/utils/chat-session-route.utils';
+import { SessionConversationArea } from './session-conversation-area';
+import type { DocBrowserCustomTabRenderers } from '@/shared/components/doc-browser/doc-browser-renderer.types';
+import type { DocBrowserTab } from '@/shared/components/doc-browser/types/doc-browser.types';
+import { t } from '@/shared/lib/i18n';
+
+function SessionPanelContent({ tab }: { tab: DocBrowserTab }) {
+  const sessionKey = parseSessionKeyFromPanelUrl(tab.currentUrl);
+  return (
+    <div data-testid="session-conversation-panel-tab" className="flex h-full min-h-0 min-w-0 flex-col bg-background text-foreground">
+      {sessionKey
+        ? <SessionConversationArea key={sessionKey} sessionKey={sessionKey} />
+        : <p role="status" className="p-4 text-sm text-muted-foreground">{t('chatPanelUnavailable')}</p>}
+    </div>
+  );
+}
+
+export const CHAT_SESSION_PANEL_RENDERERS: DocBrowserCustomTabRenderers = {
+  [CHAT_SESSION_PANEL_KIND]: {
+    getTitle: (tab) => tab.title,
+    renderIcon: () => <MessageSquare className="h-4 w-4" />,
+    renderContent: ({ tab }) => <SessionPanelContent tab={tab} />,
+  },
+};