feat(webui): add project workspaces and access controls (#4007)

* feat(webui): add project workspaces and access controls

* feat(webui): add project workspaces and access controls

* refactor(tools): centralize workspace access resolution

* refactor(webui): remove unused workspace host state

* fix(webui): hide estimated file edit label

* fix(webui): clarify file edit deletion feedback

* fix(webui): label deleted file activity

* fix(webui): flatten file edit activity rows

* fix(core): remove path-only patch deletion

* fix(core): keep apply patch non-destructive

* refactor(webui): trim workspace host plumbing

* fix(tools): register exec with tools config

webui/src/components/ChatList.tsx

@@ -7,10 +7,12 @@ import {
 import {
   Archive,
   ArchiveRestore,
+  Folder,
   MoreHorizontal,
   Pencil,
   Pin,
   PinOff,
+  Plus,
   Trash2,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
@@ -22,6 +24,17 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { deriveTitle, relativeTime } from "@/lib/format";
+import {
+  COLLAPSED_CHATS_VISIBLE_COUNT,
+  displayTitle,
+  groupSessions,
+  isCollapsedProject,
+  isFoldableChatsGroup,
+  isFoldedChatsGroup,
+  limitGroups,
+  visibleSessionsForGroup,
+  type ChatGroupLabels,
+} from "@/lib/chat-groups";
 import { cn } from "@/lib/utils";
 import type { ChatSummary, SidebarDensity, SidebarSortMode } from "@/lib/types";
 
@@ -36,9 +49,14 @@ interface ChatListProps {
   onTogglePin: (key: string) => void;
   onRequestRename: (key: string, label: string) => void;
   onToggleArchive: (key: string) => void;
+  onToggleGroup?: (groupId: string) => void;
+  onRequestRenameProject?: (projectKey: string, label: string) => void;
+  onNewChatInProject?: (projectPath: string, projectName: string) => void;
   pinnedKeys?: string[];
   archivedKeys?: string[];
   titleOverrides?: Record<string, string>;
+  projectNameOverrides?: Record<string, string>;
+  collapsedGroups?: Record<string, boolean>;
   runningChatIds?: string[];
   completedChatIds?: string[];
   density?: SidebarDensity;
@@ -46,6 +64,7 @@ interface ChatListProps {
   showTimestamps?: boolean;
   sort?: SidebarSortMode;
   showArchived?: boolean;
+  defaultWorkspacePath?: string | null;
   actionMenuPortalContainer?: HTMLElement | null;
   loading?: boolean;
   emptyLabel?: string;
@@ -59,9 +78,14 @@ export const ChatList = memo(function ChatList({
   onTogglePin,
   onRequestRename,
   onToggleArchive,
+  onToggleGroup,
+  onRequestRenameProject,
+  onNewChatInProject,
   pinnedKeys = [],
   archivedKeys = [],
   titleOverrides = {},
+  projectNameOverrides = {},
+  collapsedGroups = {},
   runningChatIds = [],
   completedChatIds = [],
   density = "comfortable",
@@ -69,19 +93,21 @@ export const ChatList = memo(function ChatList({
   showTimestamps = false,
   sort = "updated_desc",
   showArchived = false,
+  defaultWorkspacePath,
   actionMenuPortalContainer,
   loading,
   emptyLabel,
 }: ChatListProps) {
   const { t } = useTranslation();
   const [visibleLimit, setVisibleLimit] = useState(INITIAL_VISIBLE_SESSIONS);
-  const labels = useMemo(() => ({
+  const labels = useMemo<ChatGroupLabels>(() => ({
     pinned: t("chat.groups.pinned"),
     all: t("chat.groups.all"),
     today: t("chat.groups.today"),
     yesterday: t("chat.groups.yesterday"),
     earlier: t("chat.groups.earlier"),
     archived: t("chat.groups.archived"),
+    projects: t("chat.groups.projects"),
     fallbackTitle: t("chat.newChat"),
   }), [t]);
   const groups = useMemo(
@@ -89,8 +115,10 @@ export const ChatList = memo(function ChatList({
       pinnedKeys,
       archivedKeys,
       titleOverrides,
+      projectNameOverrides,
       showArchived,
       sort,
+      defaultWorkspacePath,
     }),
     [
       archivedKeys,
@@ -100,15 +128,21 @@ export const ChatList = memo(function ChatList({
       showArchived,
       sort,
       titleOverrides,
+      projectNameOverrides,
+      defaultWorkspacePath,
     ],
   );
   const limitedGroups = useMemo(
-    () => limitGroups(groups, visibleLimit, activeKey),
-    [activeKey, groups, visibleLimit],
+    () => limitGroups(groups, visibleLimit, activeKey, collapsedGroups),
+    [activeKey, collapsedGroups, groups, visibleLimit],
   );
   const totalSessionCount = useMemo(
-    () => groups.reduce((total, group) => total + group.sessions.length, 0),
-    [groups],
+    () => groups.reduce(
+      (total, group) =>
+        total + (isCollapsedProject(group, collapsedGroups) ? 0 : group.sessions.length),
+      0,
+    ),
+    [collapsedGroups, groups],
   );
   const visibleSessionCount = useMemo(
     () => limitedGroups.reduce((total, group) => total + group.sessions.length, 0),
@@ -143,131 +177,194 @@ export const ChatList = memo(function ChatList({
   const compact = density === "compact";
 
   return (
-    <div className="h-full min-h-0 min-w-0 overflow-x-hidden overflow-y-auto overscroll-contain">
+    <div className="h-full min-h-0 min-w-0 overflow-x-hidden overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent">
       <div className="min-w-0 space-y-3 px-2 py-1.5">
-        {limitedGroups.map((group) => (
-          <section key={group.label} aria-label={group.label}>
-            <div className="px-2 pb-1 text-[12px] font-medium text-muted-foreground/65">
-              {group.label}
-            </div>
-            <ul className="space-y-0.5">
-              {group.sessions.map((s) => {
-                const active = s.key === activeKey;
-                const fallbackTitle = t("chat.fallbackTitle", {
-                  id: s.chatId.slice(0, 6),
-                });
-                const generatedTitle = s.title?.trim() || "";
-                const title = displayTitle(s, titleOverrides, t("chat.newChat"));
-                const tooltipTitle =
-                  titleOverrides[s.key]?.trim() ||
-                  generatedTitle ||
-                  deriveTitle(s.preview, fallbackTitle);
-                const isPinned = pinned.has(s.key);
-                const isArchived = archived.has(s.key);
-                const preview = s.preview.trim();
-                const showPreview = showPreviews && preview && preview !== title;
-                const timestamp = showTimestamps
-                  ? relativeTime(s.updatedAt ?? s.createdAt)
-                  : "";
-                const activityState = running.has(s.chatId)
-                  ? "running"
-                  : completed.has(s.chatId)
-                    ? "complete"
-                    : null;
-                return (
-                  <li key={s.key} className="min-w-0">
-                    <div
-                      className={cn(
-                        "group flex min-w-0 max-w-full items-center gap-2 rounded-xl px-2 text-[13px] transition-colors",
-                        compact ? "min-h-7" : "min-h-8",
-                        active
-                          ? "bg-sidebar-accent/70 text-sidebar-accent-foreground shadow-[inset_0_0_0_1px_hsl(var(--sidebar-border)/0.28)]"
-                          : "text-sidebar-foreground/82 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
-                      )}
-                    >
-                      <button
-                        type="button"
-                        onClick={() => onSelect(s.key)}
-                        title={tooltipTitle}
-                        className={cn(
-                          "min-w-0 flex-1 overflow-hidden text-left",
-                          compact ? "py-1" : "py-1.5",
-                        )}
-                      >
-                        <span className="block w-full truncate font-medium leading-5">{title}</span>
-                        {showPreview ? (
-                          <span className="block w-full truncate text-[11.5px] leading-4 text-muted-foreground/72">
-                            {preview}
-                          </span>
-                        ) : null}
-                        {timestamp ? (
-                          <span className="block w-full truncate text-[11px] leading-4 text-muted-foreground/58">
-                            {timestamp}
-                          </span>
-                        ) : null}
-                      </button>
-                      <SessionActivityIndicator state={activityState} />
-                      <DropdownMenu modal={false}>
-                        <DropdownMenuTrigger
+        {limitedGroups.map((group, index) => {
+          const foldableChatsGroup = isFoldableChatsGroup(group);
+          const foldedChatsGroup = isFoldedChatsGroup(group, collapsedGroups);
+          const visibleSessions = visibleSessionsForGroup(
+            group,
+            activeKey,
+            collapsedGroups,
+          );
+          const hiddenInGroup = Math.max(0, group.sessions.length - visibleSessions.length);
+          const canToggleFold = group.sessions.length > COLLAPSED_CHATS_VISIBLE_COUNT;
+
+          return (
+            <section key={group.id} aria-label={group.label}>
+              {group.kind === "project"
+                && limitedGroups[index - 1]?.kind !== "project" ? (
+                  <div className="px-2 pb-1 text-[12px] font-medium text-muted-foreground/65">
+                    {labels.projects}
+                  </div>
+                ) : null}
+              {group.kind === "project" ? (
+                <ProjectGroupHeader
+                  label={group.label}
+                  path={group.projectPath}
+                  collapsed={Boolean(collapsedGroups[group.id])}
+                  onToggle={() => onToggleGroup?.(group.id)}
+                  onRequestRename={
+                    group.projectKey && onRequestRenameProject
+                      ? () => onRequestRenameProject(group.projectKey ?? "", group.label)
+                      : undefined
+                  }
+                  onNewChat={
+                    group.projectPath && onNewChatInProject
+                      ? () => onNewChatInProject(group.projectPath ?? "", group.label)
+                      : undefined
+                  }
+                  actionMenuPortalContainer={actionMenuPortalContainer}
+                  updatedAt={showTimestamps ? group.updatedAt : null}
+                />
+              ) : (
+                <ChatsGroupHeader label={group.label} />
+              )}
+              {group.kind === "project" && collapsedGroups[group.id] ? null : (
+                <ul className="space-y-0.5">
+                  {visibleSessions.map((s) => {
+                    const active = s.key === activeKey;
+                    const fallbackTitle = t("chat.fallbackTitle", {
+                      id: s.chatId.slice(0, 6),
+                    });
+                    const generatedTitle = s.title?.trim() || "";
+                    const title = displayTitle(s, titleOverrides, t("chat.newChat"));
+                    const tooltipTitle =
+                      titleOverrides[s.key]?.trim() ||
+                      generatedTitle ||
+                      deriveTitle(s.preview, fallbackTitle);
+                    const isPinned = pinned.has(s.key);
+                    const isArchived = archived.has(s.key);
+                    const preview = s.preview.trim();
+                    const showPreview = showPreviews && preview && preview !== title;
+                    const timestamp = showTimestamps
+                      ? relativeTime(s.updatedAt ?? s.createdAt)
+                      : "";
+                    const projectMode = group.kind === "project";
+                    const activityState = running.has(s.chatId)
+                      ? "running"
+                      : completed.has(s.chatId) && !active
+                        ? "complete"
+                        : null;
+                    return (
+                      <li key={s.key} className="min-w-0">
+                        <div
                           className={cn(
-                            "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground/75 opacity-40 transition-opacity",
-                            "hover:bg-sidebar-accent hover:text-sidebar-foreground group-hover:opacity-100",
-                            "focus-visible:opacity-100",
-                            active && "opacity-100",
+                            "group flex min-w-0 max-w-full items-center gap-2 rounded-xl px-2 text-[13px] transition-colors",
+                            compact ? "min-h-7" : "min-h-8",
+                            active
+                              ? "bg-sidebar-accent/70 text-sidebar-accent-foreground shadow-[inset_0_0_0_1px_hsl(var(--sidebar-border)/0.28)]"
+                              : "text-sidebar-foreground/82 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
                           )}
-                          aria-label={t("chat.actions", { title })}
                         >
-                          <MoreHorizontal className="h-3.5 w-3.5" />
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent
-                          align="end"
-                          portalContainer={actionMenuPortalContainer}
-                          onCloseAutoFocus={(event) => event.preventDefault()}
-                        >
-                          <DropdownMenuItem
-                            onSelect={() => onTogglePin(s.key)}
-                          >
-                            {isPinned ? (
-                              <PinOff className="mr-2 h-4 w-4" />
-                            ) : (
-                              <Pin className="mr-2 h-4 w-4" />
+                          <button
+                            type="button"
+                            onClick={() => onSelect(s.key)}
+                            title={tooltipTitle}
+                            className={cn(
+                              "min-w-0 flex-1 overflow-hidden text-left",
+                              compact ? "py-1" : "py-1.5",
+                              projectMode && "pl-7",
                             )}
-                            {isPinned ? t("chat.unpin") : t("chat.pin")}
-                          </DropdownMenuItem>
-                          <DropdownMenuItem
-                            onSelect={() => onRequestRename(s.key, title)}
                           >
-                            <Pencil className="mr-2 h-4 w-4" />
-                            {t("chat.rename")}
-                          </DropdownMenuItem>
-                          <DropdownMenuItem
-                            onSelect={() => onToggleArchive(s.key)}
-                          >
-                            {isArchived ? (
-                              <ArchiveRestore className="mr-2 h-4 w-4" />
+                            {projectMode ? (
+                              <span className="flex w-full min-w-0 items-baseline gap-2">
+                                <span className="min-w-0 flex-1 truncate font-medium leading-5">
+                                  {title}
+                                </span>
+                                {timestamp ? (
+                                  <span className="shrink-0 text-[11.5px] font-medium text-muted-foreground/58">
+                                    {timestamp}
+                                  </span>
+                                ) : null}
+                              </span>
                             ) : (
-                              <Archive className="mr-2 h-4 w-4" />
+                              <span className="block w-full truncate font-medium leading-5">
+                                {title}
+                              </span>
                             )}
-                            {isArchived ? t("chat.unarchive") : t("chat.archive")}
-                          </DropdownMenuItem>
-                          <DropdownMenuItem
-                            onSelect={() => {
-                              window.setTimeout(() => onRequestDelete(s.key, title), 0);
-                            }}
-                            className="text-destructive focus:text-destructive"
-                          >
-                            <Trash2 className="mr-2 h-4 w-4" />
-                            {t("chat.delete")}
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </div>
-                  </li>
-                );
-              })}
-            </ul>
-          </section>
-        ))}
+                            {showPreview ? (
+                              <span className="block w-full truncate text-[11.5px] leading-4 text-muted-foreground/72">
+                                {preview}
+                              </span>
+                            ) : null}
+                            {timestamp && !projectMode ? (
+                              <span className="block w-full truncate text-[11px] leading-4 text-muted-foreground/58">
+                                {timestamp}
+                              </span>
+                            ) : null}
+                          </button>
+                          <SessionActivityIndicator state={activityState} />
+                          <DropdownMenu modal={false}>
+                            <DropdownMenuTrigger
+                              className={cn(
+                                "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground/75 opacity-40 transition-opacity",
+                                "hover:bg-sidebar-accent hover:text-sidebar-foreground group-hover:opacity-100",
+                                "focus-visible:opacity-100",
+                                active && "opacity-100",
+                              )}
+                              aria-label={t("chat.actions", { title })}
+                            >
+                              <MoreHorizontal className="h-3.5 w-3.5" />
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent
+                              align="end"
+                              portalContainer={actionMenuPortalContainer}
+                              onCloseAutoFocus={(event) => event.preventDefault()}
+                            >
+                              <DropdownMenuItem
+                                onSelect={() => onTogglePin(s.key)}
+                              >
+                                {isPinned ? (
+                                  <PinOff className="mr-2 h-4 w-4" />
+                                ) : (
+                                  <Pin className="mr-2 h-4 w-4" />
+                                )}
+                                {isPinned ? t("chat.unpin") : t("chat.pin")}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onSelect={() => onRequestRename(s.key, title)}
+                              >
+                                <Pencil className="mr-2 h-4 w-4" />
+                                {t("chat.rename")}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onSelect={() => onToggleArchive(s.key)}
+                              >
+                                {isArchived ? (
+                                  <ArchiveRestore className="mr-2 h-4 w-4" />
+                                ) : (
+                                  <Archive className="mr-2 h-4 w-4" />
+                                )}
+                                {isArchived ? t("chat.unarchive") : t("chat.archive")}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onSelect={() => {
+                                  window.setTimeout(() => onRequestDelete(s.key, title), 0);
+                                }}
+                                className="text-destructive focus:text-destructive"
+                              >
+                                <Trash2 className="mr-2 h-4 w-4" />
+                                {t("chat.delete")}
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+              {foldableChatsGroup && canToggleFold ? (
+                <ChatsFoldFooter
+                  folded={foldedChatsGroup}
+                  hiddenCount={hiddenInGroup}
+                  onToggle={() => onToggleGroup?.(group.id)}
+                />
+              ) : null}
+            </section>
+          );
+        })}
         {hiddenSessionCount > 0 ? (
           <div className="px-2 pb-2 pt-1">
             <button
@@ -277,7 +374,7 @@ export const ChatList = memo(function ChatList({
                   Math.min(totalSessionCount, limit + VISIBLE_SESSIONS_INCREMENT),
                 )
               }
-              className="h-8 w-full rounded-full text-[12px] font-medium text-muted-foreground transition-colors hover:bg-sidebar-accent/65 hover:text-sidebar-foreground"
+              className="h-8 w-full rounded-full text-[12px] font-medium text-muted-foreground/65 transition-colors hover:bg-sidebar-accent/65 hover:text-muted-foreground"
             >
               {t("chat.showMore", { count: hiddenSessionCount })}
             </button>
@@ -288,6 +385,133 @@ export const ChatList = memo(function ChatList({
   );
 });
 
+function ProjectGroupHeader({
+  label,
+  path,
+  collapsed,
+  onToggle,
+  onRequestRename,
+  onNewChat,
+  actionMenuPortalContainer,
+  updatedAt,
+}: {
+  label: string;
+  path?: string;
+  collapsed: boolean;
+  onToggle: () => void;
+  onRequestRename?: () => void;
+  onNewChat?: () => void;
+  actionMenuPortalContainer?: HTMLElement | null;
+  updatedAt?: string | null;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      title={path}
+      className="group flex min-w-0 items-center gap-1 px-1 pb-1 pt-1 text-[12px] font-medium text-muted-foreground/78"
+    >
+      <button
+        type="button"
+        aria-expanded={!collapsed}
+        onClick={onToggle}
+        className="flex min-w-0 flex-1 items-center gap-2 rounded-lg px-1.5 py-1 text-left transition-colors hover:bg-sidebar-accent/45 hover:text-sidebar-foreground"
+      >
+        <Folder className="h-3.5 w-3.5 shrink-0" aria-hidden />
+        <span className="min-w-0 flex-1 truncate">{label}</span>
+      </button>
+      {updatedAt ? (
+        <span className="shrink-0 text-[11px] text-muted-foreground/55">
+          {relativeTime(updatedAt)}
+        </span>
+      ) : null}
+      {onRequestRename ? (
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger
+            className={cn(
+              "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 opacity-40 transition-opacity",
+              "hover:bg-sidebar-accent hover:text-sidebar-foreground group-hover:opacity-100 focus-visible:opacity-100",
+            )}
+            aria-label={t("chat.actions", { title: label })}
+            onClick={(event) => event.stopPropagation()}
+          >
+            <MoreHorizontal className="h-3.5 w-3.5" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="end"
+            portalContainer={actionMenuPortalContainer}
+            onCloseAutoFocus={(event) => event.preventDefault()}
+          >
+            <DropdownMenuItem onSelect={onRequestRename}>
+              <Pencil className="mr-2 h-4 w-4" />
+              {t("chat.rename")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+      {onNewChat ? (
+        <button
+          type="button"
+          aria-label={t("chat.newInProject", { project: label })}
+          title={t("chat.newInProject", { project: label })}
+          onClick={(event) => {
+            event.stopPropagation();
+            onNewChat();
+          }}
+          className={cn(
+            "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 opacity-40 transition-opacity",
+            "hover:bg-sidebar-accent hover:text-sidebar-foreground group-hover:opacity-100 focus-visible:opacity-100",
+          )}
+        >
+          <Plus className="h-3.5 w-3.5" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function ChatsGroupHeader({ label }: { label: string }) {
+  return (
+    <div className="px-2 pb-1 text-[12px] font-medium text-muted-foreground/65">
+      {label}
+    </div>
+  );
+}
+
+function ChatsFoldFooter({
+  folded,
+  hiddenCount,
+  onToggle,
+}: {
+  folded: boolean;
+  hiddenCount: number;
+  onToggle: () => void;
+}) {
+  const { t, i18n } = useTranslation();
+  const collapsedFallback = i18n.resolvedLanguage?.startsWith("zh")
+    ? `已折叠 ${hiddenCount} 个对话`
+    : `${hiddenCount} hidden chats`;
+
+  return (
+    <div className="px-2 pb-1 pt-1">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="h-7 w-full rounded-xl text-left text-[12px] font-medium text-muted-foreground/65 transition-colors hover:bg-sidebar-accent/50 hover:text-muted-foreground"
+      >
+        <span className="px-2">
+          {folded
+            ? t("chat.collapsed", {
+                count: hiddenCount,
+                defaultValue: collapsedFallback,
+              })
+            : t("chat.showLess")}
+        </span>
+      </button>
+    </div>
+  );
+}
+
 function SessionActivityIndicator({
   state,
 }: {
@@ -316,202 +540,10 @@ function SessionActivityIndicator({
         title={label}
         className="grid h-4 w-4 shrink-0 place-items-center"
       >
-        <span className="h-1.5 w-1.5 rounded-full bg-blue-500 shadow-[0_0_0_3px_rgba(59,130,246,0.14)] dark:bg-blue-400 dark:shadow-[0_0_0_3px_rgba(96,165,250,0.18)]" />
+        <span className="h-1.5 w-1.5 rounded-full bg-blue-500 dark:bg-blue-400" />
       </span>
     );
   }
 
   return <span className="h-4 w-4 shrink-0" aria-hidden="true" />;
 }
-
-function groupSessions(
-  sessions: ChatSummary[],
-  labels: {
-    pinned: string;
-    all: string;
-    today: string;
-    yesterday: string;
-    earlier: string;
-    archived: string;
-    fallbackTitle: string;
-  },
-  options: {
-    pinnedKeys: string[];
-    archivedKeys: string[];
-    titleOverrides: Record<string, string>;
-    showArchived: boolean;
-    sort: SidebarSortMode;
-  },
-): Array<{ label: string; sessions: ChatSummary[] }> {
-  const now = new Date();
-  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
-  const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000;
-  const buckets = new Map<string, ChatSummary[]>();
-  const pinned = new Set(options.pinnedKeys);
-  const archived = new Set(options.archivedKeys);
-
-  const pinnedSessions: ChatSummary[] = [];
-  const archivedSessions: ChatSummary[] = [];
-  const normalSessions: ChatSummary[] = [];
-
-  for (const session of sessions) {
-    if (archived.has(session.key)) {
-      if (options.showArchived) archivedSessions.push(session);
-      continue;
-    }
-    if (pinned.has(session.key)) {
-      pinnedSessions.push(session);
-      continue;
-    }
-    if (options.sort === "title_asc") {
-      normalSessions.push(session);
-      continue;
-    }
-    const timestamp = Date.parse(session.updatedAt ?? session.createdAt ?? "");
-    const label = Number.isFinite(timestamp) && timestamp >= startOfToday
-      ? labels.today
-      : Number.isFinite(timestamp) && timestamp >= startOfYesterday
-        ? labels.yesterday
-        : labels.earlier;
-    const bucket = buckets.get(label) ?? [];
-    bucket.push(session);
-    buckets.set(label, bucket);
-  }
-
-  const groups = [labels.today, labels.yesterday, labels.earlier]
-    .map((label) => ({
-      label,
-      sessions: sortSessions(
-        buckets.get(label) ?? [],
-        options.sort,
-        options.titleOverrides,
-      ),
-    }))
-    .filter((group) => group.sessions.length > 0);
-  if (options.sort === "title_asc" && normalSessions.length) {
-    groups.push({
-      label: labels.all,
-      sessions: sortSessions(
-        normalSessions,
-        options.sort,
-        options.titleOverrides,
-      ),
-    });
-  }
-  if (pinnedSessions.length) {
-    groups.unshift({
-      label: labels.pinned,
-      sessions: sortSessions(
-        pinnedSessions,
-        options.sort,
-        options.titleOverrides,
-      ),
-    });
-  }
-  if (archivedSessions.length) {
-    groups.push({
-      label: labels.archived,
-      sessions: sortSessions(
-        archivedSessions,
-        options.sort,
-        options.titleOverrides,
-      ),
-    });
-  }
-  return groups;
-}
-
-function limitGroups(
-  groups: Array<{ label: string; sessions: ChatSummary[] }>,
-  limit: number,
-  activeKey: string | null,
-): Array<{ label: string; sessions: ChatSummary[] }> {
-  let remaining = Math.max(0, limit);
-  let activeVisible = !activeKey;
-  const out: Array<{ label: string; sessions: ChatSummary[] }> = [];
-
-  for (const group of groups) {
-    const visible = remaining > 0
-      ? group.sessions.slice(0, remaining)
-      : [];
-    remaining -= visible.length;
-    if (activeKey && visible.some((session) => session.key === activeKey)) {
-      activeVisible = true;
-    }
-    if (visible.length > 0) {
-      out.push({ label: group.label, sessions: visible });
-    }
-  }
-
-  if (activeVisible || !activeKey) return out;
-
-  for (const group of groups) {
-    const active = group.sessions.find((session) => session.key === activeKey);
-    if (!active) continue;
-    const existing = out.find((item) => item.label === group.label);
-    if (existing) {
-      existing.sessions = [...existing.sessions, active];
-    } else {
-      out.push({ label: group.label, sessions: [active] });
-    }
-    return out;
-  }
-
-  return out;
-}
-
-function sortSessions(
-  sessions: ChatSummary[],
-  sort: SidebarSortMode,
-  titleOverrides: Record<string, string>,
-): ChatSummary[] {
-  const copy = [...sessions];
-  copy.sort((a, b) => {
-    if (sort === "title_asc") {
-      const titleOrder = titleForSort(a, titleOverrides).localeCompare(
-        titleForSort(b, titleOverrides),
-        "en",
-        { numeric: true, sensitivity: "base" },
-      );
-      if (titleOrder !== 0) return titleOrder;
-      return sessionTime(b, "updatedAt") - sessionTime(a, "updatedAt");
-    }
-    const aTime = sessionTime(a, sort === "created_desc" ? "createdAt" : "updatedAt");
-    const bTime = sessionTime(b, sort === "created_desc" ? "createdAt" : "updatedAt");
-    return bTime - aTime;
-  });
-  return copy;
-}
-
-function titleForSort(
-  session: ChatSummary,
-  titleOverrides: Record<string, string>,
-): string {
-  return (
-    titleOverrides[session.key]?.trim() ||
-    session.title?.trim() ||
-    deriveTitle(session.preview, "new chat")
-  ).toLocaleLowerCase("en");
-}
-
-function displayTitle(
-  session: ChatSummary,
-  titleOverrides: Record<string, string>,
-  fallbackTitle: string,
-): string {
-  return (
-    titleOverrides[session.key]?.trim() ||
-    session.title?.trim() ||
-    deriveTitle(session.preview, fallbackTitle)
-  );
-}
-
-function sessionTime(
-  session: ChatSummary,
-  field: "createdAt" | "updatedAt",
-): number {
-  const primary = Date.parse(session[field] ?? "");
-  if (Number.isFinite(primary)) return primary;
-  const fallback = Date.parse(session.updatedAt ?? session.createdAt ?? "");
-  return Number.isFinite(fallback) ? fallback : 0;
-}

webui/src/components/RenameChatDialog.tsx

@@ -15,6 +15,9 @@ import { Input } from "@/components/ui/input";
 interface RenameChatDialogProps {
   open: boolean;
   title: string;
+  dialogTitle?: string;
+  description?: string;
+  placeholder?: string;
   onCancel: () => void;
   onConfirm: (title: string) => void;
 }
@@ -22,6 +25,9 @@ interface RenameChatDialogProps {
 export function RenameChatDialog({
   open,
   title,
+  dialogTitle,
+  description,
+  placeholder,
   onCancel,
   onConfirm,
 }: RenameChatDialogProps) {
@@ -48,15 +54,15 @@ export function RenameChatDialog({
           }}
         >
           <DialogHeader className="text-left">
-            <DialogTitle>{t("chat.renameTitle")}</DialogTitle>
+            <DialogTitle>{dialogTitle ?? t("chat.renameTitle")}</DialogTitle>
             <DialogDescription>
-              {t("chat.renameDescription")}
+              {description ?? t("chat.renameDescription")}
             </DialogDescription>
           </DialogHeader>
           <Input
             value={value}
             onChange={(event) => setValue(event.target.value)}
-            placeholder={t("chat.renamePlaceholder")}
+            placeholder={placeholder ?? t("chat.renamePlaceholder")}
             autoFocus
             maxLength={160}
           />

webui/src/components/Sidebar.tsx

@@ -1,7 +1,6 @@
 import { useState, type ReactNode } from "react";
 import {
   Archive,
-  ListFilter,
   Menu,
   Search,
   Settings,
@@ -13,20 +12,9 @@ import { useTranslation } from "react-i18next";
 import { ChatList } from "@/components/ChatList";
 import { ConnectionBadge } from "@/components/ConnectionBadge";
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import { Separator } from "@/components/ui/separator";
 import type {
   ChatSummary,
-  SidebarSortMode,
   SidebarViewState,
 } from "@/lib/types";
 import { cn } from "@/lib/utils";
@@ -41,12 +29,14 @@ interface SidebarProps {
   onTogglePin: (key: string) => void;
   onRequestRename: (key: string, label: string) => void;
   onToggleArchive: (key: string) => void;
+  onToggleGroup: (groupId: string) => void;
+  onRequestRenameProject: (projectKey: string, label: string) => void;
+  onNewChatInProject: (projectPath: string, projectName: string) => void;
   onOpenSettings: () => void;
   onOpenApps: () => void;
   onOpenSearch: () => void;
   activeUtility?: "apps" | null;
   onToggleArchived: () => void;
-  onUpdateView: (view: Partial<SidebarViewState>) => void;
   onCollapse: () => void;
   onExpand?: () => void;
   containActionMenus?: boolean;
@@ -54,11 +44,15 @@ interface SidebarProps {
   pinnedKeys?: string[];
   archivedKeys?: string[];
   titleOverrides?: Record<string, string>;
+  projectNameOverrides?: Record<string, string>;
+  collapsedGroups?: Record<string, boolean>;
   runningChatIds?: string[];
   completedChatIds?: string[];
   viewState?: SidebarViewState;
   showArchived?: boolean;
   archivedCount?: number;
+  defaultWorkspacePath?: string | null;
+  hostChromeInset?: boolean;
 }
 
 export function Sidebar(props: SidebarProps) {
@@ -72,11 +66,15 @@ export function Sidebar(props: SidebarProps) {
     <nav
       ref={props.containActionMenus ? setMenuPortalContainer : undefined}
       aria-label={t("sidebar.navigation")}
-      className="flex h-full w-full min-w-0 flex-col border-r border-sidebar-border/60 bg-sidebar text-sidebar-foreground"
+      className={cn(
+        "flex h-full w-full min-w-0 flex-col bg-sidebar text-sidebar-foreground",
+        !props.hostChromeInset && "border-r border-sidebar-border/60",
+      )}
     >
       <div
         className={cn(
-          "flex items-center px-3 pb-2.5 pt-3",
+          "flex items-center px-3 pb-2.5",
+          props.hostChromeInset ? "pt-[2.85rem]" : "pt-3",
           collapsed ? "w-14 justify-start" : "justify-between",
         )}
       >
@@ -101,7 +99,7 @@ export function Sidebar(props: SidebarProps) {
             draggable={false}
           />
         </button>
-        {!collapsed && (
+        {!collapsed && !props.hostChromeInset && (
           <Button
             variant="ghost"
             size="icon"
@@ -139,11 +137,6 @@ export function Sidebar(props: SidebarProps) {
           active={props.activeUtility === "apps"}
           icon={<Blocks className="h-4 w-4" />}
         />
-        <SidebarViewMenu
-          compact={collapsed}
-          view={props.viewState}
-          onUpdateView={props.onUpdateView}
-        />
         {props.archivedCount ? (
           <SidebarActionButton
             collapsed={collapsed}
@@ -170,9 +163,14 @@ export function Sidebar(props: SidebarProps) {
             onTogglePin={props.onTogglePin}
             onRequestRename={props.onRequestRename}
             onToggleArchive={props.onToggleArchive}
+            onToggleGroup={props.onToggleGroup}
+            onRequestRenameProject={props.onRequestRenameProject}
+            onNewChatInProject={props.onNewChatInProject}
             pinnedKeys={props.pinnedKeys}
             archivedKeys={props.archivedKeys}
             titleOverrides={props.titleOverrides}
+            projectNameOverrides={props.projectNameOverrides}
+            collapsedGroups={props.collapsedGroups}
             runningChatIds={props.runningChatIds}
             completedChatIds={props.completedChatIds}
             density={props.viewState?.density}
@@ -180,6 +178,7 @@ export function Sidebar(props: SidebarProps) {
             showTimestamps={props.viewState?.show_timestamps}
             sort={props.viewState?.sort}
             showArchived={props.showArchived}
+            defaultWorkspacePath={props.defaultWorkspacePath}
             actionMenuPortalContainer={
               props.containActionMenus ? menuPortalContainer : undefined
             }
@@ -261,102 +260,3 @@ function SidebarActionButton({
     </Button>
   );
 }
-
-function SidebarViewMenu({
-  compact = false,
-  view,
-  onUpdateView,
-}: {
-  compact?: boolean;
-  view?: SidebarViewState;
-  onUpdateView: (view: Partial<SidebarViewState>) => void;
-}) {
-  const { t } = useTranslation();
-  const sort = view?.sort ?? "updated_desc";
-  const setSort = (value: string) => {
-    if (isSidebarSortMode(value)) onUpdateView({ sort: value });
-  };
-
-  return (
-    <DropdownMenu modal={false}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          type="button"
-          aria-label={t("sidebar.viewOptions")}
-          title={compact ? t("sidebar.viewOptions") : undefined}
-          className={cn(
-            "h-8 min-w-0 overflow-hidden font-medium text-sidebar-foreground/75 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground",
-            "transition-[width,padding,border-radius,color,background-color] duration-300 ease-out",
-            compact
-              ? "w-9 justify-center gap-0 rounded-xl px-0"
-              : "w-full justify-start gap-2 rounded-full px-3 text-[12.5px]",
-          )}
-          variant="ghost"
-        >
-          <ListFilter className="h-4 w-4 shrink-0" aria-hidden />
-          <span
-            className={cn(
-              "min-w-0 overflow-hidden truncate whitespace-nowrap transition-[max-width,opacity,transform] duration-200 ease-out",
-              compact
-                ? "max-w-0 -translate-x-1 opacity-0"
-                : "max-w-[12rem] translate-x-0 opacity-100",
-            )}
-          >
-            {t("sidebar.viewOptions")}
-          </span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-52">
-        <DropdownMenuLabel className="text-xs text-muted-foreground">
-          {t("sidebar.viewOptions")}
-        </DropdownMenuLabel>
-        <DropdownMenuCheckboxItem
-          checked={view?.density === "compact"}
-          onCheckedChange={(checked) =>
-            onUpdateView({ density: checked ? "compact" : "comfortable" })
-          }
-          onSelect={(event) => event.preventDefault()}
-        >
-          {t("sidebar.compactList")}
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem
-          checked={Boolean(view?.show_previews)}
-          onCheckedChange={(checked) =>
-            onUpdateView({ show_previews: Boolean(checked) })
-          }
-          onSelect={(event) => event.preventDefault()}
-        >
-          {t("sidebar.showPreviews")}
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem
-          checked={Boolean(view?.show_timestamps)}
-          onCheckedChange={(checked) =>
-            onUpdateView({ show_timestamps: Boolean(checked) })
-          }
-          onSelect={(event) => event.preventDefault()}
-        >
-          {t("sidebar.showTimestamps")}
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuLabel className="text-xs text-muted-foreground">
-          {t("sidebar.sortLabel")}
-        </DropdownMenuLabel>
-        <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>
-          <DropdownMenuRadioItem value="updated_desc">
-            {t("sidebar.sortUpdated")}
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="created_desc">
-            {t("sidebar.sortCreated")}
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="title_asc">
-            {t("sidebar.sortTitle")}
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-function isSidebarSortMode(value: string): value is SidebarSortMode {
-  return value === "updated_desc" || value === "created_desc" || value === "title_asc";
-}

webui/src/components/thread/AgentActivityCluster.tsx

@@ -48,6 +48,7 @@ interface ActivityCounts {
   hasDiffStats: boolean;
   hasEditingFiles: boolean;
   hasFailedFiles: boolean;
+  hasDeletedFiles: boolean;
   primaryFilePath?: string;
   primaryFileTooltipPath?: string;
   primaryCliName?: string;
@@ -66,6 +67,7 @@ interface FileEditSummary {
   approximate: boolean;
   binary: boolean;
   status: UIFileEdit["status"];
+  operation?: UIFileEdit["operation"];
   pending: boolean;
   error?: string;
 }
@@ -126,6 +128,7 @@ function countActivity(
   let hasDiffStats = false;
   let hasEditingFiles = false;
   let failedFileCount = 0;
+  let deletedFileCount = 0;
   let primaryFilePath: string | undefined;
   let primaryFileTooltipPath: string | undefined;
   for (const edit of fileEdits) {
@@ -137,6 +140,9 @@ function countActivity(
     if (edit.status === "error") {
       failedFileCount += 1;
     }
+    if (edit.operation === "delete") {
+      deletedFileCount += 1;
+    }
     if (edit.status === "error" || edit.binary) {
       continue;
     }
@@ -158,6 +164,7 @@ function countActivity(
     hasDiffStats,
     hasEditingFiles,
     hasFailedFiles: fileEdits.length > 0 && failedFileCount === fileEdits.length,
+    hasDeletedFiles: fileEdits.length > 0 && deletedFileCount === fileEdits.length,
     primaryFilePath,
     primaryFileTooltipPath,
     primaryCliName,
@@ -217,6 +224,7 @@ export function AgentActivityCluster({
     hasDiffStats,
     hasEditingFiles,
     hasFailedFiles,
+    hasDeletedFiles,
     primaryFilePath,
     primaryFileTooltipPath,
     primaryCliName,
@@ -245,6 +253,7 @@ export function AgentActivityCluster({
   const singleFilePath = fileCount === 1 ? primaryFilePath : undefined;
   const singleFileTooltipPath = fileCount === 1 ? primaryFileTooltipPath : undefined;
   const hasVisibleActivity = reasoningSteps > 0 || toolCalls > 0 || cliCount > 0 || mcpCount > 0 || fileCount > 0;
+  const hasOnlyFileActivity = fileCount > 0 && messages.every(messageHasOnlyFileActivity);
   const durationMs = activityDurationMs(messages, isTurnStreaming, now, turnLatencyMs);
   const activityDuration = formatActivityDuration(durationMs);
   const thoughtLabel = isTurnStreaming
@@ -263,13 +272,13 @@ export function AgentActivityCluster({
     ? hasPendingFileEdit && !singleFilePath
       ? t("message.fileActivityPreparing", { defaultValue: "Preparing edit…" })
       : singleFilePath
-      ? t(fileActivitySummaryKey(hasLiveEditingFiles, hasFailedFiles), {
+      ? t(fileActivitySummaryKey(hasLiveEditingFiles, hasFailedFiles, hasDeletedFiles), {
           file: shortFileName(singleFilePath),
-          defaultValue: `${fileActivityVerb(hasLiveEditingFiles, hasFailedFiles)} {{file}}`,
+          defaultValue: `${fileActivityVerb(hasLiveEditingFiles, hasFailedFiles, hasDeletedFiles)} {{file}}`,
         })
-      : t(fileActivityManySummaryKey(hasLiveEditingFiles, hasFailedFiles), {
+      : t(fileActivityManySummaryKey(hasLiveEditingFiles, hasFailedFiles, hasDeletedFiles), {
           count: fileCount,
-          defaultValue: `${fileActivityVerb(hasLiveEditingFiles, hasFailedFiles)} {{count}} files`,
+          defaultValue: `${fileActivityVerb(hasLiveEditingFiles, hasFailedFiles, hasDeletedFiles)} {{count}} files`,
         })
     : "";
 
@@ -410,6 +419,25 @@ export function AgentActivityCluster({
 
   if (!hasVisibleActivity) return null;
 
+  if (hasOnlyFileActivity) {
+    return (
+      <FileEditFlatActivity
+        edits={fileEdits}
+        active={isTurnStreaming}
+        hasBodyBelow={hasBodyBelow}
+        summary={summary}
+        singleFilePath={singleFilePath}
+        singleFileTooltipPath={singleFileTooltipPath}
+        hasLiveEditingFiles={hasLiveEditingFiles}
+        hasFailedFiles={hasFailedFiles}
+        hasDeletedFiles={hasDeletedFiles}
+        added={added}
+        deleted={deleted}
+        hasDiffStats={hasDiffStats}
+      />
+    );
+  }
+
   return (
     <div className={cn("w-full", hasBodyBelow && "mb-2")}>
       <button
@@ -426,7 +454,7 @@ export function AgentActivityCluster({
           active={isTurnStreaming}
           className="min-w-0"
         >
-          {singleFilePath ? fileActivityVerb(hasLiveEditingFiles, hasFailedFiles) : thoughtLabel}
+          {singleFilePath ? fileActivityVerb(hasLiveEditingFiles, hasFailedFiles, hasDeletedFiles) : thoughtLabel}
         </StreamingLabelSheen>
         {singleFilePath ? (
           <FileReferenceChip
@@ -502,6 +530,77 @@ export function AgentActivityCluster({
   );
 }
 
+function messageHasOnlyFileActivity(message: UIMessage): boolean {
+  if (message.kind !== "trace" || !message.fileEdits?.length) return false;
+  return traceLines(message).every((line) => !line.trim() || isFileEditTraceLine(line));
+}
+
+function FileEditFlatActivity({
+  edits,
+  active,
+  hasBodyBelow,
+  summary,
+  singleFilePath,
+  singleFileTooltipPath,
+  hasLiveEditingFiles,
+  hasFailedFiles,
+  hasDeletedFiles,
+  added,
+  deleted,
+  hasDiffStats,
+}: {
+  edits: FileEditSummary[];
+  active: boolean;
+  hasBodyBelow: boolean;
+  summary: string;
+  singleFilePath?: string;
+  singleFileTooltipPath?: string;
+  hasLiveEditingFiles: boolean;
+  hasFailedFiles: boolean;
+  hasDeletedFiles: boolean;
+  added: number;
+  deleted: number;
+  hasDiffStats: boolean;
+}) {
+  const showRows = edits.length > 1 || edits.some((edit) => edit.status === "error" || edit.pending);
+  return (
+    <div className={cn("w-full", hasBodyBelow && "mb-2")} aria-label={summary}>
+      <div
+        className={cn(
+          "flex max-w-full items-center gap-1.5 px-1 py-1",
+          "text-[12.5px] text-muted-foreground/72",
+        )}
+      >
+        <StreamingLabelSheen active={active} className="min-w-0">
+          {singleFilePath
+            ? fileActivityVerb(hasLiveEditingFiles, hasFailedFiles, hasDeletedFiles)
+            : summary}
+        </StreamingLabelSheen>
+        {singleFilePath ? (
+          <FileReferenceChip
+            path={singleFilePath}
+            tooltipPath={singleFileTooltipPath}
+            active={hasLiveEditingFiles}
+            className="-my-0.5 min-w-0"
+            textClassName="text-xs"
+            testId="activity-header-file-reference"
+          />
+        ) : null}
+        {hasDiffStats ? (
+          <span className="inline-flex min-w-0 items-center gap-1 text-muted-foreground/85">
+            <DiffPair added={added} deleted={deleted} />
+          </span>
+        ) : null}
+      </div>
+      {showRows ? (
+        <div className="mt-0.5 pl-4">
+          <FileEditGroup edits={edits} />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 function shortFileName(path: string): string {
   return path.split(/[\\/]/).pop() || path;
 }
@@ -1039,6 +1138,10 @@ function isMcpRunTraceLine(line: string): boolean {
   return MCP_TOOL_NAME_RE.test(line.trim().split("(", 1)[0] ?? "");
 }
 
+function isFileEditTraceLine(line: string): boolean {
+  return /^(write_file|edit_file|apply_patch)\(/.test(line.trim());
+}
+
 function parseCliRunTrace(line: string, status: CliRunStatus = "running"): CliRunSummary | null {
   const match = /^(run_cli_app|cli_anything_run)\((.*)\)$/.exec(line.trim());
   if (!match) return null;
@@ -1365,18 +1468,21 @@ function mcpRunLabelDefault(run: McpRunSummary, active: boolean): string {
   return active && run.status === "running" ? "Using" : "Used";
 }
 
-function fileActivityVerb(editing: boolean, failed: boolean): string {
+function fileActivityVerb(editing: boolean, failed: boolean, deleted: boolean): string {
   if (failed) return "Failed";
+  if (deleted) return editing ? "Deleting" : "Deleted";
   return editing ? "Editing" : "Edited";
 }
 
-function fileActivitySummaryKey(editing: boolean, failed: boolean): string {
+function fileActivitySummaryKey(editing: boolean, failed: boolean, deleted: boolean): string {
   if (failed) return "message.fileActivityFailedOne";
+  if (deleted) return editing ? "message.fileActivityDeletingOne" : "message.fileActivityDeletedOne";
   return editing ? "message.fileActivityEditingOne" : "message.fileActivityEditedOne";
 }
 
-function fileActivityManySummaryKey(editing: boolean, failed: boolean): string {
+function fileActivityManySummaryKey(editing: boolean, failed: boolean, deleted: boolean): string {
   if (failed) return "message.fileActivityFailedMany";
+  if (deleted) return editing ? "message.fileActivityDeletingMany" : "message.fileActivityDeletedMany";
   return editing ? "message.fileActivityEditingMany" : "message.fileActivityEditedMany";
 }
 
@@ -1419,6 +1525,7 @@ function summarizeFileEdits(edits: UIFileEdit[], active: boolean): FileEditSumma
     hasSuccessfulChange: boolean;
     hasActiveEditing: boolean;
     hasFailed: boolean;
+    operation?: UIFileEdit["operation"];
     error?: string;
   }
 
@@ -1440,6 +1547,7 @@ function summarizeFileEdits(edits: UIFileEdit[], active: boolean): FileEditSumma
         hasSuccessfulChange: false,
         hasActiveEditing: false,
         hasFailed: false,
+        operation: undefined,
       };
       byPath.set(key, summary);
       order.push(key);
@@ -1451,6 +1559,9 @@ function summarizeFileEdits(edits: UIFileEdit[], active: boolean): FileEditSumma
     if (edit.absolute_path) {
       summary.absolute_path = edit.absolute_path;
     }
+    if (edit.operation === "delete") {
+      summary.operation = "delete";
+    }
     summary.pending = summary.pending || !!edit.pending || !edit.path;
     if (!edit.path && edit.pending) {
       if (active && edit.status === "editing") {
@@ -1515,6 +1626,7 @@ function summarizeFileEdits(edits: UIFileEdit[], active: boolean): FileEditSumma
       approximate: summary.approximate,
       binary: summary.binary,
       status,
+      operation: summary.operation,
       pending: summary.pending && !summary.path,
       error: summary.error,
     }];
@@ -1525,6 +1637,23 @@ function hasVisibleDiffStats(edit: Pick<FileEditSummary, "added" | "deleted">):
   return edit.added > 0 || edit.deleted > 0;
 }
 
+function formatFileEditError(error?: string): string {
+  const firstLine = (error || "").replace(/\s+/g, " ").trim();
+  if (!firstLine) return "";
+  const cleaned = firstLine
+    .replace(/^Error applying patch:\s*/i, "")
+    .replace(/^Error writing file:\s*/i, "")
+    .replace(/^Error editing file:\s*/i, "")
+    .replace(/^Error:\s*/i, "");
+
+  return cleaned
+    .replace(/^old_text not found in (.+)$/i, "Target text was not found in $1.")
+    .replace(/^old_text appears multiple times in (.+)$/i, "Target text matched multiple places in $1.")
+    .replace(/^file to (?:update|delete) does not exist: (.+)$/i, "File does not exist: $1.")
+    .replace(/^path to (?:update|delete) is not a file: (.+)$/i, "Path is not a file: $1.")
+    .slice(0, 180);
+}
+
 function CliRunGroup({
   runs,
   active,
@@ -1758,8 +1887,15 @@ function FileEditRow({ edit }: { edit: FileEditSummary }) {
   const editing = edit.status === "editing";
   const failed = edit.status === "error";
   const hasCountedDiff = !failed && !edit.binary && hasVisibleDiffStats(edit);
+  const failureDetail = failed
+    ? formatFileEditError(edit.error)
+      || t("message.fileEditFailedFallback", { defaultValue: "File change was not applied." })
+    : "";
   return (
-    <li className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 py-0.5 text-xs">
+    <li
+      className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 py-0.5 text-xs"
+      title={failureDetail || edit.absolute_path || edit.path}
+    >
       <div className="flex min-w-0 items-center gap-2">
         <span className="grid h-5 w-5 shrink-0 place-items-center text-muted-foreground/50">
           {failed ? (
@@ -1789,13 +1925,8 @@ function FileEditRow({ edit }: { edit: FileEditSummary }) {
           />
         )}
         {failed ? (
-          <span className="inline-flex shrink-0 items-center gap-1 text-[10.5px] font-medium text-destructive/75">
-            {t("message.fileEditFailed", { defaultValue: "Failed" })}
-          </span>
-        ) : null}
-        {edit.approximate && !failed ? (
-          <span className="shrink-0 text-[10.5px] font-medium text-muted-foreground/55">
-            {t("message.fileEditApproximate", { defaultValue: "estimated" })}
+          <span className="min-w-0 truncate text-[11px] leading-4 text-destructive/75">
+            {failureDetail}
           </span>
         ) : null}
       </div>

webui/src/components/thread/StreamErrorNotice.tsx

@@ -62,10 +62,15 @@ function resolveCopy(
         title: t("errors.messageTooBig.title"),
         body: t("errors.messageTooBig.body"),
       };
+    case "workspace_scope_rejected":
+      return {
+        title: t("errors.workspaceScopeRejected.title"),
+        body: t("errors.workspaceScopeRejected.body"),
+      };
     default: {
       // Exhaustiveness guard: if a new StreamError kind is added, TS will
       // complain here until we add a corresponding i18n branch.
-      const _exhaustive: never = error.kind;
+      const _exhaustive: never = error;
       return { title: String(_exhaustive), body: "" };
     }
   }

webui/src/components/thread/ThreadComposer.tsx

@@ -43,6 +43,10 @@ import {
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
+import {
+  WorkspaceAccessMenu,
+  WorkspaceProjectPicker,
+} from "@/components/thread/WorkspaceControls";
 import {
   useAttachedImages,
   type AttachedImage,
@@ -58,6 +62,8 @@ import type {
   OutboundCliAppMention,
   OutboundMcpPresetMention,
   SlashCommand,
+  WorkspaceScopePayload,
+  WorkspacesPayload,
 } from "@/lib/types";
 import {
   inferProviderFromModelName,
@@ -88,6 +94,7 @@ interface ThreadComposerProps {
   slashCommands?: SlashCommand[];
   cliApps?: CliAppInfo[];
   mcpPresets?: McpPresetInfo[];
+  imageGenerationEnabled?: boolean;
   imageMode?: boolean;
   onImageModeChange?: (enabled: boolean) => void;
   onStop?: () => void;
@@ -95,6 +102,12 @@ interface ThreadComposerProps {
   runStartedAt?: number | null;
   /** Sustained objective for this chat (WebSocket ``goal_state``). */
   goalState?: GoalStateWsPayload;
+  workspaceScope?: WorkspaceScopePayload | null;
+  workspaceDefaultScope?: WorkspaceScopePayload | null;
+  workspaceControls?: WorkspacesPayload["controls"] | null;
+  workspaceScopeDisabled?: boolean;
+  workspaceError?: string | null;
+  onWorkspaceScopeChange?: (scope: WorkspaceScopePayload) => void;
 }
 
 const COMMAND_ICONS: Record<string, LucideIcon> = {
@@ -471,11 +484,18 @@ export function ThreadComposer({
   slashCommands = [],
   cliApps = [],
   mcpPresets = [],
+  imageGenerationEnabled = true,
   imageMode: controlledImageMode,
   onImageModeChange,
   onStop,
   runStartedAt = null,
   goalState,
+  workspaceScope = null,
+  workspaceDefaultScope = null,
+  workspaceControls = null,
+  workspaceScopeDisabled = false,
+  workspaceError = null,
+  onWorkspaceScopeChange,
 }: ThreadComposerProps) {
   const { t } = useTranslation();
   const [value, setValue] = useState("");
@@ -495,7 +515,13 @@ export function ThreadComposer({
   const aspectControlRef = useRef<HTMLDivElement>(null);
   const chipRefs = useRef(new Map<string, HTMLButtonElement>());
   const isHero = variant === "hero";
-  const imageMode = controlledImageMode ?? uncontrolledImageMode;
+  const showProjectPicker =
+    isHero
+    && !!workspaceDefaultScope
+    && !!onWorkspaceScopeChange
+    && workspaceControls?.can_change_project !== false;
+  const requestedImageMode = controlledImageMode ?? uncontrolledImageMode;
+  const imageMode = imageGenerationEnabled && requestedImageMode;
   const setImageMode = useCallback(
     (enabled: boolean) => {
       if (controlledImageMode === undefined) {
@@ -505,6 +531,13 @@ export function ThreadComposer({
     },
     [controlledImageMode, onImageModeChange],
   );
+
+  useEffect(() => {
+    if (imageGenerationEnabled || !requestedImageMode) return;
+    setImageMode(false);
+    setAspectMenuOpen(false);
+  }, [imageGenerationEnabled, requestedImageMode, setImageMode]);
+
   const resolvedPlaceholder = isStreaming
     ? t("thread.composer.placeholderStreaming")
     : imageMode
@@ -574,16 +607,17 @@ export function ThreadComposer({
   }, [disabled, slashMenuDismissed, value]);
 
   const visibleSlashCommands = useMemo(() => {
-    if (!(isStreaming && onStop)) return slashCommands;
-    if (slashCommands.some((command) => command.command === "/stop")) return slashCommands;
+    const baseCommands = slashCommands.filter((command) => command.command !== "/stop");
+    if (!(isStreaming && onStop)) return baseCommands;
+    const stopCommand = slashCommands.find((command) => command.command === "/stop") ?? {
+      command: "/stop",
+      title: "Stop current task",
+      description: "Cancel the active agent turn for this chat.",
+      icon: "square",
+    };
     return [
-      {
-        command: "/stop",
-        title: "Stop current task",
-        description: "Cancel the active agent turn for this chat.",
-        icon: "square",
-      },
-      ...slashCommands,
+      stopCommand,
+      ...baseCommands,
     ];
   }, [isStreaming, onStop, slashCommands]);
 
@@ -845,13 +879,6 @@ export function ThreadComposer({
 
   const chooseSlashCommand = useCallback(
     (command: SlashCommand) => {
-      const nextRecents = [
-        command.command,
-        ...recentSlashCommands.filter((item) => item !== command.command),
-      ].slice(0, SLASH_RECENTS_LIMIT);
-      setRecentSlashCommands(nextRecents);
-      storeSlashRecents(nextRecents);
-
       if (command.command === "/stop" && isStreaming && onStop) {
         onStop();
         setValue("");
@@ -862,6 +889,13 @@ export function ThreadComposer({
         return;
       }
 
+      const nextRecents = [
+        command.command,
+        ...recentSlashCommands.filter((item) => item !== command.command),
+      ].slice(0, SLASH_RECENTS_LIMIT);
+      setRecentSlashCommands(nextRecents);
+      storeSlashRecents(nextRecents);
+
       setValue(command.argHint ? `${command.command} ` : command.command);
       setSlashMenuDismissed(true);
       setCliAppMenuDismissed(false);
@@ -1051,10 +1085,15 @@ export function ThreadComposer({
 
   const attachButtonDisabled = disabled || full;
   const showStopButton = isStreaming && !!onStop;
+  const centerHeroPlaceholder =
+    isHero && value.length === 0 && images.length === 0 && !isStreaming;
   const inputTextClasses = cn(
     "w-full resize-none bg-transparent",
     isHero
-      ? "min-h-[78px] px-5 pb-2 pt-5 text-[15px] leading-6"
+      ? cn(
+          "min-h-[78px] px-5 text-[15px] leading-6",
+          centerHeroPlaceholder ? "pb-2 pt-[27px]" : "pb-1.5 pt-4",
+        )
       : "min-h-[50px] px-4 pb-1.5 pt-3 text-[13.5px] leading-5",
   );
 
@@ -1093,11 +1132,12 @@ export function ThreadComposer({
       ) : null}
       <div
         className={cn(
-          "relative mx-auto flex w-full flex-col overflow-visible transition-all duration-200",
+          "group/composer relative mx-auto flex w-full flex-col overflow-visible transition-all duration-200",
+          "after:pointer-events-none after:absolute after:inset-[-1px] after:rounded-[inherit] after:border after:border-blue-300/75 after:opacity-0 after:transition-opacity after:duration-200 focus-within:after:opacity-100 dark:after:border-blue-400/55",
           isHero
             ? "max-w-[58rem] rounded-[28px] border border-black/[0.035] bg-card shadow-[0_20px_55px_rgba(15,23,42,0.08)] dark:border-white/[0.06] dark:shadow-[0_24px_55px_rgba(0,0,0,0.34)]"
             : "max-w-[49.5rem] rounded-[22px] border border-black/[0.035] bg-card shadow-[0_12px_30px_rgba(15,23,42,0.07)] dark:border-white/[0.06] dark:shadow-[0_16px_34px_rgba(0,0,0,0.28)]",
-          "focus-within:ring-1 focus-within:ring-foreground/8",
+          "focus-within:border-blue-300/75 dark:focus-within:border-blue-400/55",
           disabled && "opacity-60",
           isDragging && "ring-2 ring-primary/40 motion-reduce:ring-0 motion-reduce:border-primary",
           goalState?.active &&
@@ -1184,11 +1224,11 @@ export function ThreadComposer({
         ) : null}
         <div
           className={cn(
-            "flex items-center justify-between gap-2",
-            isHero ? "px-4 pb-4" : "px-3 pb-2",
+            "flex items-center justify-between",
+            isHero ? cn("gap-1.5 px-4", showProjectPicker ? "pb-1.5" : "pb-3.5") : "gap-2 px-3 pb-2",
           )}
         >
-          <div className="flex min-w-0 items-center gap-2">
+          <div className={cn("flex min-w-0 flex-1 items-center", isHero ? "gap-1.5" : "gap-2")}>
             <input
               ref={fileInputRef}
               type="file"
@@ -1207,36 +1247,46 @@ export function ThreadComposer({
               className={cn(
                 "rounded-full text-muted-foreground hover:text-foreground",
                 isHero
-                  ? "h-9 w-9 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card"
+                  ? "h-8 w-8 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card"
                   : "h-9 w-9 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card",
               )}
             >
-              <Plus className={cn(isHero ? "h-5 w-5" : "h-4 w-4")} />
+              <Plus className={cn(isHero ? "h-[18px] w-[18px]" : "h-4 w-4")} />
             </Button>
-            <div ref={aspectControlRef} className="relative flex items-center gap-1">
-              <Button
-                type="button"
-                variant="ghost"
-                disabled={disabled}
-                aria-pressed={imageMode}
-                aria-label={t("thread.composer.imageMode.toggle")}
-                onClick={() => {
-                  setImageMode(!imageMode);
-                  setAspectMenuOpen(false);
-                  textareaRef.current?.focus();
-                }}
-                className={cn(
-                  "rounded-full border border-border/55 px-2.5 font-medium shadow-[0_2px_8px_rgba(15,23,42,0.04)]",
-                  "h-9 text-[12px]",
-                  imageMode
-                    ? "border-primary/30 bg-primary/10 text-primary hover:bg-primary/12"
-                    : "bg-card text-muted-foreground hover:bg-card hover:text-foreground",
-                )}
-              >
-                <ImageIcon className={cn("mr-1.5", isHero ? "h-4 w-4" : "h-3.5 w-3.5")} />
-                {t("thread.composer.imageMode.label")}
-              </Button>
-              {imageMode ? (
+            {workspaceScope ? (
+              <WorkspaceAccessMenu
+                scope={workspaceScope}
+                disabled={disabled || workspaceScopeDisabled}
+                canUseFullAccess={workspaceControls?.can_use_full_access !== false}
+                isHero={isHero}
+                onChange={onWorkspaceScopeChange}
+              />
+            ) : null}
+            {imageGenerationEnabled ? (
+              <div ref={aspectControlRef} className="relative flex items-center gap-1">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  disabled={disabled}
+                  aria-pressed={imageMode}
+                  aria-label={t("thread.composer.imageMode.toggle")}
+                  onClick={() => {
+                    setImageMode(!imageMode);
+                    setAspectMenuOpen(false);
+                    textareaRef.current?.focus();
+                  }}
+                  className={cn(
+                    "max-w-[11rem] rounded-full border border-border/55 px-2.5 font-medium shadow-[0_2px_8px_rgba(15,23,42,0.04)]",
+                    isHero ? "h-8 text-[11.5px]" : "h-9 text-[12px]",
+                    imageMode
+                      ? "border-primary/30 bg-primary/10 text-primary hover:bg-primary/12"
+                      : "bg-card text-muted-foreground hover:bg-card hover:text-foreground",
+                  )}
+                >
+                  <ImageIcon className={cn("mr-1.5", isHero ? "h-3.5 w-3.5" : "h-3.5 w-3.5")} />
+                  <span className="truncate">{t("thread.composer.imageMode.label")}</span>
+                </Button>
+                {imageMode ? (
                 <Button
                   type="button"
                   variant="ghost"
@@ -1247,25 +1297,28 @@ export function ThreadComposer({
                   onClick={() => setAspectMenuOpen((open) => !open)}
                   className={cn(
                     "rounded-full border border-border/55 bg-card px-2.5 font-medium text-foreground/80 shadow-[0_2px_8px_rgba(15,23,42,0.04)] hover:bg-card",
-                    "h-9 text-[12px]",
+                    isHero ? "h-8 text-[11.5px]" : "h-9 text-[12px]",
                   )}
                 >
                   <span>{t(`thread.composer.imageMode.aspect.${imageAspectRatio.replace(":", "_")}`)}</span>
                   <ChevronDown className={cn("ml-1.5", isHero ? "h-3.5 w-3.5" : "h-3 w-3")} />
                 </Button>
-              ) : null}
-              {imageMode && aspectMenuOpen ? (
-                <ImageAspectMenu
-                  selected={imageAspectRatio}
-                  isHero={isHero}
-                  onSelect={(ratio) => {
-                    setImageAspectRatio(ratio);
-                    setAspectMenuOpen(false);
-                    textareaRef.current?.focus();
-                  }}
-                />
-              ) : null}
-            </div>
+                ) : null}
+                {imageMode && aspectMenuOpen ? (
+                  <ImageAspectMenu
+                    selected={imageAspectRatio}
+                    isHero={isHero}
+                    onSelect={(ratio) => {
+                      setImageAspectRatio(ratio);
+                      setAspectMenuOpen(false);
+                      textareaRef.current?.focus();
+                    }}
+                  />
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+          <div className={cn("flex shrink-0 items-center", isHero ? "gap-1.5" : "gap-2")}>
             {modelLabel ? (
               <ComposerModelBadge
                 label={modelLabel}
@@ -1274,39 +1327,42 @@ export function ThreadComposer({
                 isHero={isHero}
               />
             ) : null}
-            {!isHero ? (
-              <span className="hidden select-none text-[10.5px] text-muted-foreground/60 sm:inline">
-                {t("thread.composer.sendHint")}
-              </span>
-            ) : null}
+            <Button
+              type={showStopButton ? "button" : "submit"}
+              size="icon"
+              disabled={showStopButton ? disabled : !canSend}
+              aria-label={showStopButton ? t("thread.composer.stop") : t("thread.composer.send")}
+              onClick={showStopButton ? onStop : undefined}
+              className={cn(
+                "rounded-full transition-transform",
+                showStopButton
+                  ? "border border-border/70 bg-card text-foreground/85 shadow-[0_3px_10px_rgba(15,23,42,0.08)] hover:bg-muted/65 hover:text-foreground disabled:text-muted-foreground/50"
+                  : isHero
+                    ? "border border-foreground bg-foreground text-background shadow-[0_4px_12px_rgba(15,23,42,0.20)] hover:bg-foreground/90 disabled:border-foreground/35 disabled:bg-foreground/35 disabled:text-background/80"
+                    : "border border-foreground bg-foreground text-background shadow-[0_3px_10px_rgba(15,23,42,0.18)] hover:bg-foreground/90 disabled:border-foreground/35 disabled:bg-foreground/35 disabled:text-background/80",
+                isHero ? "h-8 w-8" : "h-9 w-9",
+                (canSend || showStopButton) && "hover:scale-[1.03] active:scale-95",
+              )}
+            >
+              {showStopButton ? (
+                <Square className={cn("fill-current stroke-current", isHero ? "h-3 w-3" : "h-3.5 w-3.5")} />
+              ) : isStreaming ? (
+                <Loader2 className={cn(isHero ? "h-4 w-4" : "h-4 w-4", "animate-spin")} />
+              ) : (
+                <ArrowUp className={cn(isHero ? "h-4 w-4" : "h-4 w-4")} />
+              )}
+            </Button>
           </div>
-          <span className={cn(isHero ? "hidden" : "sm:hidden")} aria-hidden />
-          <Button
-            type={showStopButton ? "button" : "submit"}
-            size="icon"
-            disabled={showStopButton ? disabled : !canSend}
-            aria-label={showStopButton ? t("thread.composer.stop") : t("thread.composer.send")}
-            onClick={showStopButton ? onStop : undefined}
-            className={cn(
-              "rounded-full transition-transform",
-              showStopButton
-                ? "border border-border/70 bg-card text-foreground/85 shadow-[0_3px_10px_rgba(15,23,42,0.08)] hover:bg-muted/65 hover:text-foreground disabled:text-muted-foreground/50"
-                : isHero
-                  ? "border border-foreground bg-foreground text-background shadow-[0_4px_12px_rgba(15,23,42,0.20)] hover:bg-foreground/90 disabled:border-foreground/35 disabled:bg-foreground/35 disabled:text-background/80"
-                  : "border border-foreground bg-foreground text-background shadow-[0_3px_10px_rgba(15,23,42,0.18)] hover:bg-foreground/90 disabled:border-foreground/35 disabled:bg-foreground/35 disabled:text-background/80",
-              "h-9 w-9",
-              (canSend || showStopButton) && "hover:scale-[1.03] active:scale-95",
-            )}
-          >
-            {showStopButton ? (
-              <Square className={cn("fill-current stroke-current", isHero ? "h-3 w-3" : "h-2.5 w-2.5")} />
-            ) : isStreaming ? (
-              <Loader2 className={cn(isHero ? "h-4.5 w-4.5" : "h-4 w-4", "animate-spin")} />
-            ) : (
-              <ArrowUp className={cn(isHero ? "h-4.5 w-4.5" : "h-4 w-4")} />
-            )}
-          </Button>
         </div>
+        <WorkspaceProjectPicker
+          isHero={isHero}
+          disabled={disabled || workspaceScopeDisabled}
+          scope={workspaceScope}
+          defaultScope={workspaceDefaultScope}
+          controls={workspaceControls}
+          error={workspaceError}
+          onChange={onWorkspaceScopeChange}
+        />
       </div>
     </form>
   );
@@ -1338,14 +1394,14 @@ function ComposerModelBadge({
       className={cn(
         "inline-flex min-w-0 items-center rounded-full border border-border/55 bg-card font-medium text-foreground/82",
         "shadow-[0_2px_8px_rgba(15,23,42,0.045)]",
-        isHero ? "h-9 max-w-[13.5rem] gap-2 px-2.5 text-[12px]" : "h-9 max-w-[12rem] gap-2 px-2.5 text-[12px]",
+        isHero ? "h-8 max-w-[12.5rem] gap-1.5 px-2 text-[11.5px]" : "h-9 max-w-[12rem] gap-2 px-2.5 text-[12px]",
       )}
     >
       <span
         data-testid={inferredProvider ? `composer-model-logo-${inferredProvider}` : "composer-model-logo"}
         className={cn(
           "grid shrink-0 place-items-center overflow-hidden rounded-full border bg-background",
-          "h-5 w-5",
+          isHero ? "h-[18px] w-[18px]" : "h-5 w-5",
         )}
         style={{
           borderColor: brand ? `${brand.color}28` : undefined,
@@ -1357,21 +1413,21 @@ function ComposerModelBadge({
           <img
             src={logoUrl}
             alt=""
-            className="h-3.5 w-3.5 object-contain"
+            className={cn("object-contain", isHero ? "h-3 w-3" : "h-3.5 w-3.5")}
             onError={() => setLogoIndex((index) => index + 1)}
           />
         ) : brand ? (
           <span
             className={cn(
               "grid h-full w-full place-items-center rounded-full text-white",
-              "text-[8px]",
+              isHero ? "text-[7.5px]" : "text-[8px]",
             )}
             style={{ backgroundColor: brand.color }}
           >
             {brand.initials.slice(0, 2)}
           </span>
         ) : (
-          <Sparkles className={cn("text-muted-foreground/65", isHero ? "h-3.5 w-3.5" : "h-3 w-3")} />
+          <Sparkles className={cn("text-muted-foreground/65", isHero ? "h-3 w-3" : "h-3 w-3")} />
         )}
       </span>
       <span className="truncate">{label}</span>
@@ -1440,6 +1496,23 @@ interface CliAppMentionPaletteProps {
   onChoose: (candidate: MentionCandidate) => void;
 }
 
+function useSelectedOptionScroll(selectedIndex: number) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const option = container.querySelector<HTMLElement>(
+      `[data-palette-index="${selectedIndex}"]`,
+    );
+    if (typeof option?.scrollIntoView === "function") {
+      option.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedIndex]);
+
+  return containerRef;
+}
+
 function ImageAspectMenu({
   selected,
   isHero,
@@ -1506,6 +1579,7 @@ function CliAppMentionPalette({
     0,
     layout.maxHeight - SLASH_PALETTE_CHROME_PX,
   );
+  const listRef = useSelectedOptionScroll(selectedIndex);
   return (
     <div
       role="listbox"
@@ -1522,7 +1596,7 @@ function CliAppMentionPalette({
       <div className="px-2 pb-1.5 pt-0.5 text-[13px] font-semibold text-muted-foreground/78">
         {t("thread.composer.mentions.label")}
       </div>
-      <div className="overflow-y-auto" style={{ maxHeight: listMaxHeight }}>
+      <div ref={listRef} className="overflow-y-auto" style={{ maxHeight: listMaxHeight }}>
         {candidates.map((candidate, index) => {
           const selected = index === selectedIndex;
           const name = candidate.name;
@@ -1540,6 +1614,7 @@ function CliAppMentionPalette({
               key={`${candidate.kind}-${name}`}
               type="button"
               role="option"
+              data-palette-index={index}
               aria-selected={selected}
               aria-label={`${displayName} @${name} ${ariaDescription} ${typeLabel}`}
               onMouseEnter={() => onHover(index)}
@@ -1640,6 +1715,7 @@ function SlashCommandPalette({
     0,
     layout.maxHeight - SLASH_PALETTE_CHROME_PX,
   );
+  const listRef = useSelectedOptionScroll(selectedIndex);
   return (
     <div
       role="listbox"
@@ -1653,7 +1729,7 @@ function SlashCommandPalette({
         isHero ? "max-w-[58rem]" : "max-w-[49.5rem]",
       )}
     >
-      <div className="overflow-y-auto pr-0.5" style={{ maxHeight: listMaxHeight }}>
+      <div ref={listRef} className="overflow-y-auto pr-0.5" style={{ maxHeight: listMaxHeight }}>
         {commands.map((command, index) => {
           const Icon = COMMAND_ICONS[command.icon] ?? CircleHelp;
           const selected = index === selectedIndex;
@@ -1669,6 +1745,7 @@ function SlashCommandPalette({
               key={command.command}
               type="button"
               role="option"
+              data-palette-index={index}
               aria-selected={selected}
               onMouseEnter={() => onHover(index)}
               onMouseDown={(e) => {

webui/src/components/thread/ThreadHeader.tsx

@@ -9,7 +9,7 @@ interface ThreadHeaderProps {
   onToggleSidebar: () => void;
   theme: "light" | "dark";
   onToggleTheme: () => void;
-  hideSidebarToggleOnDesktop?: boolean;
+  hideSidebarToggleForHostChrome?: boolean;
   minimal?: boolean;
 }
 
@@ -18,7 +18,7 @@ export function ThreadHeader({
   onToggleSidebar,
   theme,
   onToggleTheme,
-  hideSidebarToggleOnDesktop = false,
+  hideSidebarToggleForHostChrome = false,
   minimal = false,
 }: ThreadHeaderProps) {
   const { t } = useTranslation();
@@ -32,7 +32,7 @@ export function ThreadHeader({
           onClick={onToggleSidebar}
           className={cn(
             "h-7 w-7 rounded-md text-muted-foreground hover:bg-accent/35 hover:text-foreground",
-            hideSidebarToggleOnDesktop && "lg:hidden",
+            hideSidebarToggleForHostChrome && "lg:hidden",
           )}
         >
           <Menu className="h-3.5 w-3.5" />
@@ -57,7 +57,7 @@ export function ThreadHeader({
           onClick={onToggleSidebar}
           className={cn(
             "h-7 w-7 rounded-md text-muted-foreground hover:bg-accent/35 hover:text-foreground",
-            hideSidebarToggleOnDesktop && "lg:hidden",
+            hideSidebarToggleForHostChrome && "lg:hidden",
           )}
         >
           <Menu className="h-3.5 w-3.5" />

webui/src/components/thread/ThreadMessages.tsx

@@ -59,7 +59,7 @@ export function buildDisplayUnits(messages: UIMessage[]): DisplayUnit[] {
         cluster.push(current);
         i += 1;
       }
-      out.push({ type: "cluster", messages: cluster });
+      pushActivityCluster(out, cluster);
       continue;
     }
     const previous = out[out.length - 1];
@@ -85,6 +85,42 @@ export function buildDisplayUnits(messages: UIMessage[]): DisplayUnit[] {
   return out;
 }
 
+function pushActivityCluster(out: DisplayUnit[], cluster: UIMessage[]) {
+  const previous = out[out.length - 1];
+  if (
+    previous?.type !== "single"
+    || !shouldPlaceLateActivityBeforeAssistant(out, previous.message)
+  ) {
+    out.push({ type: "cluster", messages: cluster });
+    return;
+  }
+
+  const beforeAssistant = out[out.length - 2];
+  if (beforeAssistant?.type === "cluster" && canMergeActivityClusters(beforeAssistant.messages, cluster)) {
+    beforeAssistant.messages.push(...cluster);
+    return;
+  }
+
+  out.splice(out.length - 1, 0, { type: "cluster", messages: cluster });
+}
+
+function shouldPlaceLateActivityBeforeAssistant(out: DisplayUnit[], message: UIMessage): boolean {
+  if (message.role !== "assistant" || message.kind === "trace") return false;
+  if (message.isStreaming) return true;
+  if (hasTurnLatency(message)) return true;
+
+  const beforeAssistant = out[out.length - 2];
+  return beforeAssistant?.type === "cluster";
+}
+
+function hasTurnLatency(message: UIMessage): boolean {
+  return (
+    typeof message.latencyMs === "number"
+    && Number.isFinite(message.latencyMs)
+    && message.latencyMs >= 0
+  );
+}
+
 function clusterSegmentId(messages: UIMessage[]): string | undefined {
   return messages.find((message) => message.activitySegmentId)?.activitySegmentId;
 }
@@ -115,6 +151,19 @@ function canFoldInlineReasoning(cluster: UIMessage[], message: UIMessage): boole
   return segmentId === message.activitySegmentId;
 }
 
+function canMergeActivityClusters(target: UIMessage[], incoming: UIMessage[]): boolean {
+  let segmentId = clusterSegmentId(target);
+  let includesFileEdits = clusterHasFileEdits(target);
+  for (const message of incoming) {
+    if (!canJoinActivityCluster(segmentId, includesFileEdits, message)) return false;
+    if (!segmentId && message.activitySegmentId) {
+      segmentId = message.activitySegmentId;
+    }
+    includesFileEdits = includesFileEdits || hasFileEdits(message);
+  }
+  return true;
+}
+
 function assistantHasInlineReasoning(message: UIMessage): boolean {
   return (
     message.role === "assistant"
@@ -261,8 +310,14 @@ function activityClusterTurnLatencyMs(
 }
 
 function currentActivityClusterIndex(units: DisplayUnit[]): number {
-  const last = units.length - 1;
-  return units[last]?.type === "cluster" ? last : -1;
+  for (let i = units.length - 1; i >= 0; i -= 1) {
+    const unit = units[i];
+    if (unit.type === "cluster") return i;
+    if (unit.message.role === "assistant" && unit.message.isStreaming) continue;
+    if (unit.message.role === "user") break;
+    return -1;
+  }
+  return -1;
 }
 
 function unitKey(unit: DisplayUnit, index: number): string {

webui/src/components/thread/ThreadShell.tsx

@@ -1,16 +1,4 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import {
-  BarChart3,
-  BookOpen,
-  ChevronRight,
-  Code2,
-  ImageIcon,
-  LayoutGrid,
-  Lightbulb,
-  MoreHorizontal,
-  Palette,
-  Sparkles,
-} from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { ThreadComposer } from "@/components/thread/ThreadComposer";
@@ -31,7 +19,16 @@ import {
   isMcpPresetsPayload,
 } from "@/lib/mcp-preset-events";
 import { inferProviderFromModelName, providerDisplayLabel } from "@/lib/provider-brand";
-import type { ChatSummary, CliAppInfo, McpPresetInfo, SettingsPayload, SlashCommand, UIMessage } from "@/lib/types";
+import type {
+  ChatSummary,
+  CliAppInfo,
+  McpPresetInfo,
+  SettingsPayload,
+  SlashCommand,
+  UIMessage,
+  WorkspaceScopePayload,
+  WorkspacesPayload,
+} from "@/lib/types";
 import { normalizeLegacyLongTaskMessages } from "@/lib/thread-display-compat";
 import { scrubSubagentUiMessages } from "@/lib/subagent-channel-display";
 import { useClient } from "@/providers/ClientProvider";
@@ -60,11 +57,19 @@ interface ThreadShellProps {
   onToggleSidebar: () => void;
   onGoHome?: () => void;
   onNewChat?: () => void;
-  onCreateChat?: () => Promise<string | null>;
+  onCreateChat?: (workspaceScope?: WorkspaceScopePayload | null) => Promise<string | null>;
   onTurnEnd?: () => void;
   theme?: "light" | "dark";
   onToggleTheme?: () => void;
-  hideSidebarToggleOnDesktop?: boolean;
+  hideSidebarToggleForHostChrome?: boolean;
+  hideHeader?: boolean;
+  workspaceScope?: WorkspaceScopePayload | null;
+  workspaceDefaultScope?: WorkspaceScopePayload | null;
+  workspaceControls?: WorkspacesPayload["controls"] | null;
+  workspaceScopeDisabled?: boolean;
+  workspaceError?: string | null;
+  onWorkspaceScopeChange?: (scope: WorkspaceScopePayload) => void;
+  settingsSnapshot?: SettingsPayload | null;
 }
 
 function toModelBadgeLabel(modelName: string | null): string | null {
@@ -110,23 +115,17 @@ function toModelBadgeInfo(modelName: string | null, settings: SettingsPayload |
   };
 }
 
-const QUICK_ACTION_KEYS = [
-  { key: "plan", icon: LayoutGrid, tone: "text-[#f25b8f]" },
-  { key: "analyze", icon: BarChart3, tone: "text-[#4f9de8]" },
-  { key: "brainstorm", icon: Lightbulb, tone: "text-[#53c59d]" },
-  { key: "code", icon: Code2, tone: "text-[#eba45d]" },
-  { key: "summarize", icon: BookOpen, tone: "text-[#a877e7]" },
-  { key: "more", icon: MoreHorizontal, tone: "text-muted-foreground/65" },
+const HERO_GREETING_KEYS = [
+  "thread.empty.greetings.workOn",
+  "thread.empty.greetings.start",
+  "thread.empty.greetings.build",
+  "thread.empty.greetings.tackle",
 ] as const;
 
-const IMAGE_QUICK_ACTION_KEYS = [
-  { key: "icon", icon: ImageIcon, tone: "text-[#4f9de8]" },
-  { key: "sticker", icon: Sparkles, tone: "text-[#f25b8f]" },
-  { key: "poster", icon: Palette, tone: "text-[#eba45d]" },
-  { key: "product", icon: LayoutGrid, tone: "text-[#53c59d]" },
-  { key: "portrait", icon: ImageIcon, tone: "text-[#a877e7]" },
-  { key: "edit", icon: MoreHorizontal, tone: "text-muted-foreground/65" },
-] as const;
+function randomHeroGreetingKey(): (typeof HERO_GREETING_KEYS)[number] {
+  const index = Math.floor(Math.random() * HERO_GREETING_KEYS.length);
+  return HERO_GREETING_KEYS[index] ?? HERO_GREETING_KEYS[0];
+}
 
 interface PendingFirstMessage {
   content: string;
@@ -142,7 +141,15 @@ export function ThreadShell({
   onTurnEnd,
   theme = "light",
   onToggleTheme = () => {},
-  hideSidebarToggleOnDesktop = false,
+  hideSidebarToggleForHostChrome = false,
+  hideHeader = false,
+  workspaceScope = null,
+  workspaceDefaultScope = null,
+  workspaceControls = null,
+  workspaceScopeDisabled = false,
+  workspaceError = null,
+  onWorkspaceScopeChange,
+  settingsSnapshot = null,
 }: ThreadShellProps) {
   const { t } = useTranslation();
   const chatId = session?.chatId ?? null;
@@ -159,8 +166,9 @@ export function ThreadShell({
   const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
   const [cliApps, setCliApps] = useState<CliAppInfo[]>([]);
   const [mcpPresets, setMcpPresets] = useState<McpPresetInfo[]>([]);
-  const [settings, setSettings] = useState<SettingsPayload | null>(null);
+  const [settings, setSettings] = useState<SettingsPayload | null>(settingsSnapshot);
   const [heroImageMode, setHeroImageMode] = useState(false);
+  const [heroGreetingKey, setHeroGreetingKey] = useState(randomHeroGreetingKey);
   const [scrollToBottomSignal, setScrollToBottomSignal] = useState(0);
   const pendingFirstRef = useRef<PendingFirstMessage | null>(null);
   const messageCacheRef = useRef<Map<string, UIMessage[]>>(new Map());
@@ -198,22 +206,46 @@ export function ThreadShell({
   const displayMessages = useMemo(() => projectWebuiThreadMessages(messages), [messages]);
 
   const showHeroComposer = messages.length === 0 && !loading;
+  const wasShowingHeroComposerRef = useRef(showHeroComposer);
   const modelBadge = useMemo(
     () => toModelBadgeInfo(modelName, settings),
     [modelName, settings],
   );
+  const imageGenerationEnabled = settings?.image_generation.enabled === true;
+
+  useEffect(() => {
+    if (showHeroComposer && !wasShowingHeroComposerRef.current) {
+      setHeroGreetingKey(randomHeroGreetingKey());
+    }
+    wasShowingHeroComposerRef.current = showHeroComposer;
+  }, [showHeroComposer]);
+
+  const withWorkspaceScope = useCallback(
+    (options?: SendOptions): SendOptions | undefined => {
+      if (!workspaceScope) return options;
+      return {
+        ...(options ?? {}),
+        workspaceScope,
+      };
+    },
+    [workspaceScope],
+  );
 
   const refreshModelSettings = useCallback(async () => {
     try {
       setSettings(await fetchSettings(token));
     } catch {
-      setSettings(null);
+      if (!settingsSnapshot) setSettings(null);
     }
-  }, [token]);
+  }, [settingsSnapshot, token]);
 
   useEffect(() => {
+    if (settingsSnapshot) {
+      setSettings(settingsSnapshot);
+      return;
+    }
     void refreshModelSettings();
-  }, [refreshModelSettings]);
+  }, [refreshModelSettings, settingsSnapshot]);
 
   useEffect(() => {
     return client.onRuntimeModelUpdate(() => {
@@ -433,64 +465,22 @@ export function ThreadShell({
     async (content: string, images?: SendImage[], options?: SendOptions) => {
       if (booting) return;
       setBooting(true);
-      pendingFirstRef.current = { content, images, options };
-      const newId = await onCreateChat?.();
+      pendingFirstRef.current = { content, images, options: withWorkspaceScope(options) };
+      const newId = await onCreateChat?.(workspaceScope);
       if (!newId) {
         pendingFirstRef.current = null;
         setBooting(false);
       }
     },
-    [booting, onCreateChat],
+    [booting, onCreateChat, withWorkspaceScope, workspaceScope],
   );
 
   const handleThreadSend = useCallback(
     (content: string, images?: SendImage[], options?: SendOptions) => {
       setScrollToBottomSignal((value) => value + 1);
-      send(content, images, options);
+      send(content, images, withWorkspaceScope(options));
     },
-    [send],
-  );
-
-  const handleQuickAction = useCallback(
-    (prompt: string) => {
-      const options: SendOptions | undefined = heroImageMode
-        ? { imageGeneration: { enabled: true, aspect_ratio: null } }
-        : undefined;
-      if (session) {
-        handleThreadSend(prompt, undefined, options);
-        return;
-      }
-      void handleWelcomeSend(prompt, undefined, options);
-    },
-    [handleThreadSend, handleWelcomeSend, heroImageMode, session],
-  );
-
-  const quickActionItems = heroImageMode ? IMAGE_QUICK_ACTION_KEYS : QUICK_ACTION_KEYS;
-  const quickActionPrefix = heroImageMode
-    ? "thread.empty.imageQuickActions"
-    : "thread.empty.quickActions";
-  const quickActions = (
-    <div className="mx-auto grid w-full max-w-[58rem] grid-cols-2 gap-3 pt-4 sm:grid-cols-3 lg:grid-cols-6 lg:gap-4">
-      {quickActionItems.map(({ key, icon: Icon, tone }) => {
-        const title = t(`${quickActionPrefix}.${key}.title`);
-        const prompt = t(`${quickActionPrefix}.${key}.prompt`);
-        return (
-          <button
-            key={key}
-            type="button"
-            onClick={() => handleQuickAction(prompt)}
-            disabled={booting || isStreaming}
-            className="group flex min-h-[136px] flex-col justify-between rounded-[20px] border border-black/[0.035] bg-card px-5 py-5 text-left shadow-[0_14px_34px_rgba(15,23,42,0.07)] transition-all hover:-translate-y-0.5 hover:shadow-[0_18px_42px_rgba(15,23,42,0.10)] disabled:pointer-events-none disabled:opacity-60 dark:border-white/[0.06] dark:shadow-[0_16px_34px_rgba(0,0,0,0.28)]"
-          >
-            <Icon className={`h-[18px] w-[18px] ${tone}`} strokeWidth={2} />
-            <span className="max-w-[7.5rem] text-[15px] font-medium leading-[1.28] tracking-[-0.01em] text-foreground/82">
-              {title}
-            </span>
-            <ChevronRight className="h-4 w-4 self-end text-muted-foreground/45 transition-colors group-hover:text-muted-foreground" />
-          </button>
-        );
-      })}
-    </div>
+    [send, withWorkspaceScope],
   );
 
   const composer = (
@@ -518,11 +508,18 @@ export function ThreadShell({
           slashCommands={slashCommands}
           cliApps={cliApps}
           mcpPresets={mcpPresets}
+          imageGenerationEnabled={imageGenerationEnabled}
           imageMode={showHeroComposer ? heroImageMode : undefined}
           onImageModeChange={showHeroComposer ? setHeroImageMode : undefined}
           onStop={stop}
           runStartedAt={runStartedAt}
           goalState={goalState}
+          workspaceScope={workspaceScope}
+          workspaceDefaultScope={workspaceDefaultScope}
+          workspaceControls={workspaceControls}
+          workspaceScopeDisabled={workspaceScopeDisabled}
+          workspaceError={workspaceError}
+          onWorkspaceScopeChange={onWorkspaceScopeChange}
         />
       ) : (
         <ThreadComposer
@@ -541,13 +538,19 @@ export function ThreadShell({
           slashCommands={slashCommands}
           cliApps={cliApps}
           mcpPresets={mcpPresets}
+          imageGenerationEnabled={imageGenerationEnabled}
           imageMode={heroImageMode}
           onImageModeChange={setHeroImageMode}
           runStartedAt={runStartedAt}
           goalState={goalState}
+          workspaceScope={workspaceScope}
+          workspaceDefaultScope={workspaceDefaultScope}
+          workspaceControls={workspaceControls}
+          workspaceScopeDisabled={workspaceScopeDisabled}
+          workspaceError={workspaceError}
+          onWorkspaceScopeChange={onWorkspaceScopeChange}
         />
       )}
-      {showHeroComposer ? quickActions : null}
     </>
   );
 
@@ -558,21 +561,23 @@ export function ThreadShell({
   ) : (
     <div className="flex w-full flex-col items-center text-center animate-in fade-in-0 slide-in-from-bottom-2 duration-500">
       <h1 className="text-balance text-[40px] font-normal leading-tight tracking-[-0.045em] text-foreground sm:text-[48px]">
-        {t("thread.empty.greeting")}
+        {t(heroGreetingKey)}
       </h1>
     </div>
   );
 
   return (
     <section className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
-      <ThreadHeader
-        title={title}
-        onToggleSidebar={onToggleSidebar}
-        theme={theme}
-        onToggleTheme={onToggleTheme}
-        hideSidebarToggleOnDesktop={hideSidebarToggleOnDesktop}
-        minimal={!session && !loading}
-      />
+      {!hideHeader ? (
+        <ThreadHeader
+          title={title}
+          onToggleSidebar={onToggleSidebar}
+          theme={theme}
+          onToggleTheme={onToggleTheme}
+          hideSidebarToggleForHostChrome={hideSidebarToggleForHostChrome}
+          minimal={!session && !loading}
+        />
+      ) : null}
       <ThreadViewport
         messages={displayMessages}
         isStreaming={isStreaming}

webui/src/components/thread/ThreadViewport.tsx

@@ -271,9 +271,11 @@ export function ThreadViewport({
           </div>
         ) : (
           <div ref={contentRef} className="mx-auto flex min-h-full w-full max-w-[72rem] flex-col px-4">
-            <div className="flex w-full flex-1 items-center justify-center pb-[7vh] pt-8">
-              <div className="flex w-full max-w-[58rem] flex-col gap-6">
-                {emptyState}
+            <div className="flex w-full flex-1 items-center justify-center py-10 sm:py-12">
+              <div className="relative w-full max-w-[58rem]">
+                <div className="absolute inset-x-0 bottom-[calc(100%+1.5rem)] flex justify-center">
+                  {emptyState}
+                </div>
                 <div className="w-full">{composer}</div>
               </div>
             </div>

webui/src/components/thread/WorkspaceControls.tsx

@@ -0,0 +1,326 @@
+import { useCallback, useEffect, useState, type ReactNode } from "react";
+import { AlertTriangle, Check, ChevronDown, Folder, Hand } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import type {
+  WorkspaceAccessMode,
+  WorkspaceScopePayload,
+  WorkspacesPayload,
+} from "@/lib/types";
+import { getHostApi } from "@/lib/runtime";
+import { cn } from "@/lib/utils";
+import {
+  isAbsoluteWorkspacePath,
+  projectNameFromPath,
+  scopeWithAccessMode,
+  selectedProjectScope,
+  shortWorkspacePath,
+} from "@/lib/workspace";
+
+export function WorkspaceProjectPicker({
+  isHero,
+  disabled,
+  scope,
+  defaultScope,
+  controls,
+  error,
+  onChange,
+}: {
+  isHero: boolean;
+  disabled?: boolean;
+  scope: WorkspaceScopePayload | null;
+  defaultScope: WorkspaceScopePayload | null;
+  controls: WorkspacesPayload["controls"] | null;
+  error?: string | null;
+  onChange?: (scope: WorkspaceScopePayload) => void;
+}) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [pathDraft, setPathDraft] = useState("");
+  const [pathError, setPathError] = useState<string | null>(null);
+  const [pickingFolder, setPickingFolder] = useState(false);
+  const currentProjectScope = selectedProjectScope(scope, defaultScope);
+  const projectLabel = currentProjectScope
+    ? currentProjectScope.project_name || projectNameFromPath(currentProjectScope.project_path)
+    : t("thread.composer.workspace.projectPlaceholder");
+  const visible = isHero
+    && !!defaultScope
+    && !!onChange
+    && controls?.can_change_project !== false;
+  const hostApi = getHostApi();
+  const nativeProjectPicker = !!hostApi;
+
+  useEffect(() => {
+    if (!open) return;
+    setPathDraft(currentProjectScope?.project_path ?? "");
+    setPathError(null);
+  }, [currentProjectScope?.project_path, open]);
+
+  useEffect(() => {
+    if (error && visible) setOpen(true);
+  }, [error, visible]);
+
+  const applyProjectPath = useCallback(
+    (projectPath: string, projectName?: string) => {
+      const base = scope ?? defaultScope;
+      const trimmed = projectPath.trim();
+      if (!base || !onChange) return;
+      if (!trimmed || !isAbsoluteWorkspacePath(trimmed)) {
+        setPathError(t("workspace.dialog.absolutePathRequired"));
+        return;
+      }
+      onChange({
+        ...base,
+        project_path: trimmed,
+        project_name: projectName || projectNameFromPath(trimmed),
+        restrict_to_workspace: base.access_mode === "restricted",
+      });
+      setPathError(null);
+      setOpen(false);
+    },
+    [defaultScope, onChange, scope, t],
+  );
+
+  const pickNativeFolder = useCallback(async () => {
+    if (!hostApi || disabled) return;
+    setPickingFolder(true);
+    try {
+      const picked = await hostApi.pickFolder();
+      if (picked) applyProjectPath(picked);
+    } catch (err) {
+      setPathError((err as Error).message);
+    } finally {
+      setPickingFolder(false);
+    }
+  }, [applyProjectPath, disabled, hostApi]);
+
+  if (!visible || !defaultScope || !onChange) return null;
+
+  if (nativeProjectPicker) {
+    return (
+      <div className="flex items-center border-t border-border/25 bg-muted/60 px-4 py-1.5 dark:bg-white/[0.055]">
+        <button
+          type="button"
+          disabled={disabled || pickingFolder}
+          aria-label={t("thread.composer.workspace.projectAria")}
+          title={currentProjectScope?.project_path}
+          onClick={() => void pickNativeFolder()}
+          className={cn(
+            "inline-flex h-7 max-w-[18rem] items-center gap-2 rounded-full px-2.5",
+            "text-[12px] font-medium text-muted-foreground/90 transition-colors",
+            "hover:bg-background/70 hover:text-foreground disabled:pointer-events-none disabled:opacity-55",
+            currentProjectScope && "text-foreground/82",
+          )}
+        >
+          <Folder className={cn("h-3.5 w-3.5 shrink-0", currentProjectScope && "text-primary")} />
+          <span className="truncate">{projectLabel}</span>
+        </button>
+        {pathError || error ? (
+          <span role="alert" className="ml-2 truncate text-[11.5px] font-medium text-destructive">
+            {pathError ?? error}
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center border-t border-border/25 bg-muted/60 px-4 py-1.5 dark:bg-white/[0.055]">
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            disabled={disabled}
+            aria-label={t("thread.composer.workspace.projectAria")}
+            className={cn(
+              "inline-flex h-7 max-w-[18rem] items-center gap-2 rounded-full px-2.5",
+              "text-[12px] font-medium text-muted-foreground/90 transition-colors",
+              "hover:bg-background/70 hover:text-foreground disabled:pointer-events-none disabled:opacity-55",
+              currentProjectScope && "text-foreground/82",
+            )}
+          >
+            <Folder className={cn("h-3.5 w-3.5 shrink-0", currentProjectScope && "text-primary")} />
+            <span className="truncate">{projectLabel}</span>
+            <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="start"
+          side="bottom"
+          sideOffset={8}
+          className="w-[min(25rem,calc(100vw-2rem))] rounded-[22px]"
+        >
+          <DropdownMenuItem
+            onSelect={() => applyProjectPath(defaultScope.project_path, defaultScope.project_name)}
+            className="flex min-h-[48px] cursor-default gap-3 rounded-[16px] px-3 py-2.5 focus:bg-muted/55"
+          >
+            <span className="grid h-8 w-8 shrink-0 place-items-center rounded-[12px] bg-muted text-foreground/80">
+              <Folder className="h-4 w-4" />
+            </span>
+            <span className="min-w-0 flex-1">
+              <span className="block truncate text-[13px] font-semibold text-foreground">
+                {t("workspace.dialog.defaultProject")}
+              </span>
+              <span className="block truncate text-[11.5px] text-muted-foreground">
+                {shortWorkspacePath(defaultScope.project_path)}
+              </span>
+            </span>
+            {!currentProjectScope ? <Check className="h-4 w-4 text-foreground/80" /> : null}
+          </DropdownMenuItem>
+          <div className="my-1 h-px bg-border/45" />
+          <div
+            className="space-y-1.5 px-1.5 py-1.5"
+            onKeyDown={(event) => {
+              if (event.key !== "Escape") event.stopPropagation();
+            }}
+          >
+            <form
+              className="flex items-center gap-2"
+              onSubmit={(event) => {
+                event.preventDefault();
+                applyProjectPath(pathDraft);
+              }}
+            >
+              <Input
+                value={pathDraft}
+                disabled={disabled}
+                onChange={(event) => {
+                  setPathDraft(event.target.value);
+                  setPathError(null);
+                }}
+                placeholder={t("workspace.dialog.manualPlaceholder")}
+                aria-label={t("workspace.dialog.manual")}
+                className={cn(
+                  "h-9 rounded-full border-border/55 bg-background/80 px-3 text-[12.5px]",
+                  "focus-visible:ring-1 focus-visible:ring-foreground/10 focus-visible:ring-offset-0",
+                )}
+              />
+              <Button
+                type="submit"
+                disabled={disabled || !pathDraft.trim()}
+                className="h-9 shrink-0 rounded-full px-3 text-[12px]"
+              >
+                {t("workspace.dialog.usePath")}
+              </Button>
+            </form>
+            {pathError || error ? (
+              <p role="alert" className="px-1 text-[11.5px] font-medium text-destructive">
+                {pathError ?? error}
+              </p>
+            ) : null}
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+export function WorkspaceAccessMenu({
+  scope,
+  disabled,
+  canUseFullAccess,
+  isHero,
+  onChange,
+}: {
+  scope: WorkspaceScopePayload;
+  disabled?: boolean;
+  canUseFullAccess: boolean;
+  isHero: boolean;
+  onChange?: (scope: WorkspaceScopePayload) => void;
+}) {
+  const { t } = useTranslation();
+  const mode = scope.access_mode;
+  const isFull = mode === "full";
+
+  const setMode = (value: WorkspaceAccessMode) => {
+    if (value === "full" && !canUseFullAccess) return;
+    if (value === mode) return;
+    onChange?.(scopeWithAccessMode(scope, value));
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild disabled={disabled || !onChange}>
+        <Button
+          type="button"
+          variant="ghost"
+          aria-label={t("thread.composer.workspace.accessAria")}
+          className={cn(
+            "max-w-[12.5rem] rounded-[10px] border border-transparent font-semibold shadow-none",
+            isHero ? "h-8 px-2.5 text-[12px]" : "h-9 px-3 text-[12.5px]",
+            isFull
+              ? "bg-transparent text-orange-600 hover:bg-orange-500/8 dark:text-orange-300 dark:hover:bg-orange-400/10"
+              : "bg-transparent text-muted-foreground hover:bg-foreground/[0.045] hover:text-foreground dark:hover:bg-white/[0.06]",
+          )}
+        >
+          {isFull ? (
+            <AlertTriangle className={cn("mr-1.5 shrink-0", isHero ? "h-3.5 w-3.5" : "h-3.5 w-3.5")} />
+          ) : (
+            <Hand className={cn("mr-1.5 shrink-0", isHero ? "h-3.5 w-3.5" : "h-3.5 w-3.5")} />
+          )}
+          <span className="truncate">
+            {t(isFull ? "thread.composer.workspace.full" : "thread.composer.workspace.default")}
+          </span>
+          <ChevronDown className={cn("ml-1.5 shrink-0", isHero ? "h-3 w-3" : "h-3 w-3")} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        <AccessMenuItem
+          icon={<Hand className="h-4 w-4" />}
+          label={t("thread.composer.workspace.default")}
+          selected={mode === "restricted"}
+          onSelect={() => setMode("restricted")}
+        />
+        <AccessMenuItem
+          icon={<AlertTriangle className="h-4 w-4" />}
+          label={t("thread.composer.workspace.full")}
+          selected={mode === "full"}
+          disabled={!canUseFullAccess}
+          warning
+          onSelect={() => setMode("full")}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function AccessMenuItem({
+  icon,
+  label,
+  selected,
+  disabled,
+  warning,
+  onSelect,
+}: {
+  icon: ReactNode;
+  label: string;
+  selected: boolean;
+  disabled?: boolean;
+  warning?: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <DropdownMenuItem
+      disabled={disabled}
+      onSelect={onSelect}
+      className={cn(
+        "flex h-10 items-center gap-3 rounded-xl px-3 text-[13.5px] font-semibold",
+        warning && "text-orange-600 focus:text-orange-600 dark:text-orange-300 dark:focus:text-orange-300",
+      )}
+    >
+      <span className="grid h-5 w-5 shrink-0 place-items-center text-current" aria-hidden>
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {selected ? <Check className="h-4 w-4 shrink-0" aria-hidden /> : null}
+    </DropdownMenuItem>
+  );
+}

webui/src/components/ui/alert-dialog.tsx

@@ -5,7 +5,6 @@ import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 
 const AlertDialog = AlertDialogPrimitive.Root;
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
@@ -128,8 +127,5 @@ export {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
   AlertDialogTitle,
-  AlertDialogTrigger,
 };

webui/src/components/ui/dialog.tsx

@@ -5,9 +5,7 @@ import { X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -114,12 +112,9 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogPortal,
   DialogTitle,
-  DialogTrigger,
 };

webui/src/components/ui/dropdown-menu.tsx

@@ -11,6 +11,12 @@ const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
+const menuContentClassName =
+  "z-50 max-h-[min(var(--radix-dropdown-menu-content-available-height),28rem)] min-w-[10rem] overflow-x-hidden overflow-y-auto overscroll-contain rounded-[18px] border border-border/65 bg-popover/96 p-1.5 text-popover-foreground shadow-[0_18px_55px_rgba(15,23,42,0.18)] backdrop-blur-xl dark:border-white/10 dark:shadow-[0_22px_55px_rgba(0,0,0,0.45)]";
+
+const menuItemClassName =
+  "relative flex min-h-8 cursor-default select-none items-center gap-2 rounded-[12px] px-2.5 py-2 text-[13px] outline-none transition-colors focus:bg-foreground/[0.055] focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-white/[0.08]";
+
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
@@ -20,14 +26,15 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      menuItemClassName,
+      "data-[state=open]:bg-foreground/[0.055] dark:data-[state=open]:bg-white/[0.08]",
       inset && "pl-8",
       className,
     )}
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto" />
+    <ChevronRight className="ml-auto h-3.5 w-3.5 text-muted-foreground" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
@@ -39,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
+      menuContentClassName,
       className,
     )}
     {...props}
@@ -61,7 +68,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        menuContentClassName,
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className,
       )}
       {...props}
@@ -79,7 +87,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      menuItemClassName,
       inset && "pl-8",
       className,
     )}
@@ -95,15 +103,16 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground",
+      menuItemClassName,
+      "pl-8 pr-2.5",
       className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2.5 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="h-3.5 w-3.5" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -119,12 +128,13 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground",
+      menuItemClassName,
+      "pl-8 pr-2.5",
       className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2.5 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -143,7 +153,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
+      "px-2.5 pb-1.5 pt-1 text-[12px] font-semibold text-muted-foreground",
       inset && "pl-8",
       className,
     )}
@@ -158,7 +168,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("-mx-1.5 my-1.5 h-px bg-border/50", className)}
     {...props}
   />
 ));

webui/src/components/ui/sheet.tsx

@@ -6,8 +6,6 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const Sheet = DialogPrimitive.Root;
-const SheetTrigger = DialogPrimitive.Trigger;
-const SheetClose = DialogPrimitive.Close;
 const SheetPortal = DialogPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
@@ -90,14 +88,6 @@ const SheetContent = React.forwardRef<
 ));
 SheetContent.displayName = DialogPrimitive.Content.displayName;
 
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-SheetHeader.displayName = "SheetHeader";
-
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
@@ -110,4 +100,4 @@ const SheetTitle = React.forwardRef<
 ));
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
 
-export { Sheet, SheetTrigger, SheetClose, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetTitle };
+export { Sheet, SheetContent, SheetTitle };