diff --git a/apps/web/src/components/CommandPalette.tsx b/apps/web/src/components/CommandPalette.tsx
index 605127f9737..b3e845f0007 100644
--- a/apps/web/src/components/CommandPalette.tsx
+++ b/apps/web/src/components/CommandPalette.tsx
@@ -1505,6 +1505,17 @@ function OpenCommandPaletteDialog(props: {
     },
   });
 
+  actionItems.push({
+    kind: "action",
+    value: "action:project-settings",
+    searchTerms: ["project", "settings", "scripts", "model", "grouping", "checkout"],
+    title: "Project settings",
+    icon: <FolderIcon className={ITEM_ICON_CLASS} />,
+    run: async () => {
+      await navigate({ to: "/settings/projects" });
+    },
+  });
+
   const rootGroups = buildRootGroups({ actionItems, recentThreadItems });
   const sourceSelectionViewValue =
     addProjectEnvironmentId === null ? null : `sources:${addProjectEnvironmentId}`;
diff --git a/apps/web/src/components/ProjectScriptsControl.tsx b/apps/web/src/components/ProjectScriptsControl.tsx
index 7f21177e7b1..304922909b0 100644
--- a/apps/web/src/components/ProjectScriptsControl.tsx
+++ b/apps/web/src/components/ProjectScriptsControl.tsx
@@ -1,61 +1,28 @@
 import type {
   ProjectScript,
-  ProjectScriptIcon,
   ResolvedKeybindingsConfig,
   T3ProjectFileScript,
 } from "@t3tools/contracts";
 import {
   isAtomCommandInterrupted,
   squashAtomCommandFailure,
-  type AtomCommandResult,
 } from "@t3tools/client-runtime/state/runtime";
-import {
-  BugIcon,
-  ChevronDownIcon,
-  DownloadIcon,
-  FlaskConicalIcon,
-  HammerIcon,
-  ListChecksIcon,
-  PlayIcon,
-  PlusIcon,
-  SettingsIcon,
-  WrenchIcon,
-} from "lucide-react";
-import React, { type FormEvent, type KeyboardEvent, useCallback, useMemo, useState } from "react";
+import { ChevronDownIcon, DownloadIcon, PlusIcon, SettingsIcon } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
 
-import {
-  keybindingValueForCommand,
-  decodeProjectScriptKeybindingRule,
-} from "~/lib/projectScriptKeybindings";
-import { keybindingFromKeyboardEvent } from "~/components/settings/KeybindingsSettings.logic";
-import {
-  commandForProjectScript,
-  nextProjectScriptId,
-  primaryProjectScript,
-} from "~/projectScripts";
+import { commandForProjectScript, primaryProjectScript } from "~/projectScripts";
 import { shortcutLabelForCommand } from "~/keybindings";
 import {
-  AlertDialog,
-  AlertDialogClose,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogPopup,
-  AlertDialogTitle,
-} from "./ui/alert-dialog";
+  EMPTY_PROJECT_SCRIPT_INPUT,
+  editorRequestForScript,
+  ProjectScriptEditorDialog,
+  ScriptIcon,
+  type NewProjectScriptInput,
+  type ProjectScriptActionResult,
+  type ProjectScriptEditorRequest,
+} from "./projectScriptEditor";
 import { Button } from "./ui/button";
-import {
-  Dialog,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogPanel,
-  DialogPopup,
-  DialogTitle,
-} from "./ui/dialog";
 import { Group, GroupSeparator } from "./ui/group";
-import { Input } from "./ui/input";
-import { Label } from "./ui/label";
 import {
   Menu,
   MenuGroup,
@@ -66,48 +33,9 @@ import {
   MenuShortcut,
   MenuTrigger,
 } from "./ui/menu";
-import { Popover, PopoverPopup, PopoverTrigger } from "./ui/popover";
-import { Switch } from "./ui/switch";
-import { Textarea } from "./ui/textarea";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 
-const SCRIPT_ICONS: Array<{ id: ProjectScriptIcon; label: string }> = [
-  { id: "play", label: "Play" },
-  { id: "test", label: "Test" },
-  { id: "lint", label: "Lint" },
-  { id: "configure", label: "Configure" },
-  { id: "build", label: "Build" },
-  { id: "debug", label: "Debug" },
-];
-
-function ScriptIcon({
-  icon,
-  className = "size-3.5",
-}: {
-  icon: ProjectScriptIcon;
-  className?: string;
-}) {
-  if (icon === "test") return <FlaskConicalIcon className={className} />;
-  if (icon === "lint") return <ListChecksIcon className={className} />;
-  if (icon === "configure") return <WrenchIcon className={className} />;
-  if (icon === "build") return <HammerIcon className={className} />;
-  if (icon === "debug") return <BugIcon className={className} />;
-  return <PlayIcon className={className} />;
-}
-
-export interface NewProjectScriptInput {
-  name: string;
-  command: string;
-  icon: ProjectScriptIcon;
-  runOnWorktreeCreate: boolean;
-  keybinding: string | null;
-  /** Optional URL to open in the in-app preview when this script runs. */
-  previewUrl: string | null;
-  /** When true, automatically open the preview panel pointed at `previewUrl`. */
-  autoOpenPreview: boolean;
-}
-
-export type ProjectScriptActionResult = AtomCommandResult<void, unknown>;
+export type { NewProjectScriptInput, ProjectScriptActionResult };
 
 const NO_FILE_SCRIPTS: ReadonlyArray<T3ProjectFileScript> = [];
 
@@ -136,23 +64,11 @@ export default function ProjectScriptsControl({
   onUpdateScript,
   onDeleteScript,
 }: ProjectScriptsControlProps) {
-  const addScriptFormId = React.useId();
-  const [editingScriptId, setEditingScriptId] = useState<string | null>(null);
   const [actionsMenuOpen, setActionsMenuOpen] = useState({
     scripts: false,
     imports: false,
   });
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [name, setName] = useState("");
-  const [command, setCommand] = useState("");
-  const [icon, setIcon] = useState<ProjectScriptIcon>("play");
-  const [iconPickerOpen, setIconPickerOpen] = useState(false);
-  const [runOnWorktreeCreate, setRunOnWorktreeCreate] = useState(false);
-  const [keybinding, setKeybinding] = useState("");
-  const [previewUrl, setPreviewUrl] = useState("");
-  const [autoOpenPreview, setAutoOpenPreview] = useState(false);
-  const [validationError, setValidationError] = useState<string | null>(null);
-  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [editorRequest, setEditorRequest] = useState<ProjectScriptEditorRequest | null>(null);
 
   const primaryScript = useMemo(() => {
     if (preferredScriptId) {
@@ -173,112 +89,23 @@ export default function ProjectScriptsControl({
       ),
     [fileScripts, scripts],
   );
-  const isEditing = editingScriptId !== null;
   const dropdownItemClassName =
     "data-highlighted:bg-transparent data-highlighted:text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-highlighted:hover:bg-accent data-highlighted:hover:text-accent-foreground data-highlighted:focus-visible:bg-accent data-highlighted:focus-visible:text-accent-foreground";
 
-  const captureKeybinding = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "Tab") return;
-    event.preventDefault();
-    if (event.key === "Backspace" || event.key === "Delete") {
-      setKeybinding("");
-      return;
-    }
-    const next = keybindingFromKeyboardEvent(event, navigator.platform);
-    if (!next) return;
-    setKeybinding(next);
-  };
-
-  const submitAddScript = async (event: FormEvent) => {
-    event.preventDefault();
-    const trimmedName = name.trim();
-    const trimmedCommand = command.trim();
-    if (trimmedName.length === 0) {
-      setValidationError("Name is required.");
-      return;
-    }
-    if (trimmedCommand.length === 0) {
-      setValidationError("Command is required.");
-      return;
-    }
-
-    setValidationError(null);
-    let payload: NewProjectScriptInput;
-    try {
-      const scriptIdForValidation =
-        editingScriptId ??
-        nextProjectScriptId(
-          trimmedName,
-          scripts.map((script) => script.id),
-        );
-      const keybindingRule = decodeProjectScriptKeybindingRule({
-        keybinding,
-        command: commandForProjectScript(scriptIdForValidation),
-      });
-      const trimmedPreviewUrl = previewUrl.trim();
-      payload = {
-        name: trimmedName,
-        command: trimmedCommand,
-        icon,
-        runOnWorktreeCreate,
-        keybinding: keybindingRule?.key ?? null,
-        previewUrl: trimmedPreviewUrl.length > 0 ? trimmedPreviewUrl : null,
-        autoOpenPreview: trimmedPreviewUrl.length > 0 ? autoOpenPreview : false,
-      } satisfies NewProjectScriptInput;
-    } catch (error) {
-      setValidationError(error instanceof Error ? error.message : "Failed to save action.");
-      return;
-    }
-
-    const result = editingScriptId
-      ? await onUpdateScript(editingScriptId, payload)
-      : await onAddScript(payload);
-    if (result._tag === "Failure") {
-      if (!isAtomCommandInterrupted(result)) {
-        const error = squashAtomCommandFailure(result);
-        setValidationError(error instanceof Error ? error.message : "Failed to save action.");
-      }
-      return;
-    }
-    setDialogOpen(false);
-    setIconPickerOpen(false);
-  };
-
   const openAddDialog = () => {
-    setEditingScriptId(null);
-    setName("");
-    setCommand("");
-    setIcon("play");
-    setIconPickerOpen(false);
-    setRunOnWorktreeCreate(false);
-    setKeybinding("");
-    setPreviewUrl("");
-    setAutoOpenPreview(false);
-    setValidationError(null);
-    setDialogOpen(true);
+    setEditorRequest({ scriptId: null, initial: EMPTY_PROJECT_SCRIPT_INPUT });
   };
 
   const openEditDialog = (script: ProjectScript) => {
     setActionsMenuOpen({ scripts: false, imports: false });
-    setEditingScriptId(script.id);
-    setName(script.name);
-    setCommand(script.command);
-    setIcon(script.icon);
-    setIconPickerOpen(false);
-    setRunOnWorktreeCreate(script.runOnWorktreeCreate);
-    setKeybinding(keybindingValueForCommand(keybindings, commandForProjectScript(script.id)) ?? "");
-    setPreviewUrl(script.previewUrl ?? "");
-    setAutoOpenPreview(script.autoOpenPreview ?? false);
-    setValidationError(null);
-    setDialogOpen(true);
+    setEditorRequest(editorRequestForScript(script, keybindings));
   };
 
-  const confirmDeleteScript = useCallback(() => {
-    if (!editingScriptId) return;
-    setDeleteConfirmOpen(false);
-    setDialogOpen(false);
-    void onDeleteScript(editingScriptId);
-  }, [editingScriptId, onDeleteScript]);
+  const submitScript = useCallback(
+    (scriptId: string | null, input: NewProjectScriptInput) =>
+      scriptId === null ? onAddScript(input) : onUpdateScript(scriptId, input),
+    [onAddScript, onUpdateScript],
+  );
 
   const importFileScript = async (fileScript: T3ProjectFileScript) => {
     const payload: NewProjectScriptInput = {
@@ -295,17 +122,11 @@ export default function ProjectScriptsControl({
       // Surface the failure through the regular add dialog, prefilled so the
       // user can adjust and retry.
       const error = squashAtomCommandFailure(result);
-      setEditingScriptId(null);
-      setName(payload.name);
-      setCommand(payload.command);
-      setIcon(payload.icon);
-      setIconPickerOpen(false);
-      setRunOnWorktreeCreate(payload.runOnWorktreeCreate);
-      setKeybinding("");
-      setPreviewUrl(payload.previewUrl ?? "");
-      setAutoOpenPreview(payload.autoOpenPreview);
-      setValidationError(error instanceof Error ? error.message : "Failed to import action.");
-      setDialogOpen(true);
+      setEditorRequest({
+        scriptId: null,
+        initial: payload,
+        error: error instanceof Error ? error.message : "Failed to import action.",
+      });
     }
   };
 
@@ -466,184 +287,13 @@ export default function ProjectScriptsControl({
         </Tooltip>
       )}
 
-      <Dialog
-        onOpenChange={(open) => {
-          setDialogOpen(open);
-          if (!open) {
-            setIconPickerOpen(false);
-          }
-        }}
-        onOpenChangeComplete={(open) => {
-          if (open) return;
-          setEditingScriptId(null);
-          setName("");
-          setCommand("");
-          setIcon("play");
-          setRunOnWorktreeCreate(false);
-          setKeybinding("");
-          setPreviewUrl("");
-          setAutoOpenPreview(false);
-          setValidationError(null);
-        }}
-        open={dialogOpen}
-      >
-        <DialogPopup>
-          <DialogHeader>
-            <DialogTitle>{isEditing ? "Edit Action" : "Add Action"}</DialogTitle>
-            <DialogDescription>
-              Actions are project-scoped commands you can run from the top bar or keybindings.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogPanel>
-            <form id={addScriptFormId} className="space-y-4" onSubmit={submitAddScript}>
-              <div className="space-y-1.5">
-                <Label htmlFor="script-name">Name</Label>
-                <div className="flex items-center gap-2">
-                  <Popover onOpenChange={setIconPickerOpen} open={iconPickerOpen}>
-                    <PopoverTrigger
-                      render={
-                        <Button
-                          type="button"
-                          variant="outline"
-                          className="size-9 shrink-0 hover:bg-popover active:bg-popover data-pressed:bg-popover data-pressed:shadow-xs/5 data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:border-transparent dark:bg-white/[0.035] dark:data-pressed:before:shadow-none"
-                          aria-label="Choose icon"
-                        />
-                      }
-                    >
-                      <ScriptIcon icon={icon} className="size-4.5" />
-                    </PopoverTrigger>
-                    <PopoverPopup align="start">
-                      <div className="grid grid-cols-3 gap-2">
-                        {SCRIPT_ICONS.map((entry) => {
-                          const isSelected = entry.id === icon;
-                          return (
-                            <button
-                              key={entry.id}
-                              type="button"
-                              className={`relative flex flex-col items-center gap-2 rounded-md border px-2 py-2 text-xs dark:border-transparent ${
-                                isSelected
-                                  ? "border-primary/70 bg-primary/10 dark:ring-1 dark:ring-primary/30"
-                                  : "border-border/70 hover:bg-accent/60 dark:bg-white/[0.035]"
-                              }`}
-                              onClick={() => {
-                                setIcon(entry.id);
-                                setIconPickerOpen(false);
-                              }}
-                            >
-                              <ScriptIcon icon={entry.id} className="size-4" />
-                              <span>{entry.label}</span>
-                            </button>
-                          );
-                        })}
-                      </div>
-                    </PopoverPopup>
-                  </Popover>
-                  <Input
-                    id="script-name"
-                    autoFocus
-                    placeholder="Test"
-                    value={name}
-                    onChange={(event) => setName(event.target.value)}
-                  />
-                </div>
-              </div>
-              <div className="space-y-1.5">
-                <Label htmlFor="script-keybinding">Keybinding</Label>
-                <Input
-                  id="script-keybinding"
-                  placeholder="Press shortcut"
-                  value={keybinding}
-                  readOnly
-                  onKeyDown={captureKeybinding}
-                />
-                <p className="text-xs text-muted-foreground">
-                  Press a shortcut. Use <code>Backspace</code> to clear.
-                </p>
-              </div>
-              <div className="space-y-1.5">
-                <Label htmlFor="script-command">Command</Label>
-                <Textarea
-                  id="script-command"
-                  placeholder="bun test"
-                  value={command}
-                  onChange={(event) => setCommand(event.target.value)}
-                />
-              </div>
-              <div className="space-y-1.5">
-                <Label htmlFor="script-preview-url">Preview URL (optional)</Label>
-                <Input
-                  id="script-preview-url"
-                  placeholder="http://localhost:5173"
-                  value={previewUrl}
-                  onChange={(event) => setPreviewUrl(event.target.value)}
-                />
-                <p className="text-xs text-muted-foreground">
-                  Open this URL in the in-app preview when this action runs.
-                </p>
-              </div>
-              <label className="flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm dark:border-transparent dark:bg-white/[0.035]">
-                <span>Run automatically on worktree creation</span>
-                <Switch
-                  checked={runOnWorktreeCreate}
-                  onCheckedChange={(checked) => setRunOnWorktreeCreate(Boolean(checked))}
-                />
-              </label>
-              <label
-                className={`flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm dark:border-transparent dark:bg-white/[0.035] ${
-                  previewUrl.trim().length === 0 ? "opacity-60" : ""
-                }`}
-              >
-                <span>Open preview automatically when this action runs</span>
-                <Switch
-                  checked={autoOpenPreview}
-                  disabled={previewUrl.trim().length === 0}
-                  onCheckedChange={(checked) => setAutoOpenPreview(Boolean(checked))}
-                />
-              </label>
-              {validationError && <p className="text-sm text-destructive">{validationError}</p>}
-            </form>
-          </DialogPanel>
-          <DialogFooter className="dark:border-transparent dark:bg-transparent">
-            {isEditing && (
-              <Button
-                type="button"
-                variant="destructive-outline"
-                className="mr-auto"
-                onClick={() => setDeleteConfirmOpen(true)}
-              >
-                Delete
-              </Button>
-            )}
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => {
-                setDialogOpen(false);
-              }}
-            >
-              Cancel
-            </Button>
-            <Button form={addScriptFormId} type="submit">
-              {isEditing ? "Save changes" : "Save action"}
-            </Button>
-          </DialogFooter>
-        </DialogPopup>
-      </Dialog>
-
-      <AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
-        <AlertDialogPopup>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete action "{name}"?</AlertDialogTitle>
-            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose>
-            <Button variant="destructive" onClick={confirmDeleteScript}>
-              Delete action
-            </Button>
-          </AlertDialogFooter>
-        </AlertDialogPopup>
-      </AlertDialog>
+      <ProjectScriptEditorDialog
+        request={editorRequest}
+        scripts={scripts}
+        onSubmit={submitScript}
+        onDelete={(scriptId) => void onDeleteScript(scriptId)}
+        onClose={() => setEditorRequest(null)}
+      />
     </>
   );
 }
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 75c580402b1..065fbae5b39 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -28,7 +28,7 @@ import {
   scopeThreadRef,
   scopedThreadKey,
 } from "@t3tools/client-runtime/environment";
-import type { ScopedThreadRef, SidebarProjectGroupingMode } from "@t3tools/contracts";
+import type { ScopedThreadRef } from "@t3tools/contracts";
 import type { TimestampFormat } from "@t3tools/contracts/settings";
 import {
   AlarmClockIcon,
@@ -39,7 +39,6 @@ import {
   CircleCheckIcon,
   CircleDashedIcon,
   ClockIcon,
-  CopyIcon,
   FolderIcon,
   FolderPlusIcon,
   GitBranchIcon,
@@ -51,7 +50,6 @@ import {
   ServerIcon,
   SquarePenIcon,
   TerminalIcon,
-  Trash2Icon,
   Undo2Icon,
   XIcon,
 } from "lucide-react";
@@ -89,14 +87,9 @@ import { selectThreadTerminalUiState, useTerminalUiStateStore } from "../termina
 import { isMacPlatform } from "~/lib/utils";
 import { useOpenPrLink } from "../lib/openPullRequestLink";
 import { readLocalApi } from "../localApi";
-import {
-  deriveProjectGroupingOverrideKey,
-  getProjectOrderKey,
-  selectProjectGroupingSettings,
-} from "../logicalProject";
+import { getProjectOrderKey, selectProjectGroupingSettings } from "../logicalProject";
 import {
   buildSidebarProjectSnapshots,
-  type SidebarProjectGroupMember,
   type SidebarProjectSnapshot,
 } from "../sidebarProjectGrouping";
 import { legacyProjectCwdPreferenceKey, useUiStateStore } from "../uiStateStore";
@@ -105,7 +98,7 @@ import { useThreadActions } from "../hooks/useThreadActions";
 import { useHandleNewThread } from "../hooks/useHandleNewThread";
 import { openCommandPalette } from "../commandPaletteBus";
 import { startNewThreadFromContext } from "../lib/chatThreadActions";
-import { useClientSettings, useUpdateClientSettings } from "../hooks/useSettings";
+import { useClientSettings } from "../hooks/useSettings";
 import { useCopyToClipboard } from "../hooks/useCopyToClipboard";
 import { useNowMinute } from "../hooks/useNowMinute";
 import { useEnvironments, usePrimaryEnvironmentId } from "../state/environments";
@@ -113,7 +106,6 @@ import { useProjects, useThreadShells } from "../state/entities";
 import { environmentServerConfigsAtom, primaryServerKeybindingsAtom } from "../state/server";
 import { vcsEnvironment } from "../state/vcs";
 import { threadEnvironment } from "../state/threads";
-import { projectEnvironment } from "../state/projects";
 import { useEnvironmentQuery } from "../state/query";
 import { useAtomCommand } from "../state/use-atom-command";
 import {
@@ -138,7 +130,6 @@ import {
   resolveSidebarThreadStatus,
   searchSidebarThreadsByTitle,
   resolveWorkingStartedAt,
-  shouldNavigateAfterProjectRemoval,
   sortLogicalProjectsForSidebar,
   sortPinnedThreadsForSidebar,
   sortSettledThreadsForSidebar,
@@ -166,18 +157,8 @@ import { primaryServerProvidersAtom } from "../state/server";
 import { useThreadRunningTerminalIds } from "../state/terminalSessions";
 import { stackedThreadToast, toastManager } from "./ui/toast";
 import { Button } from "./ui/button";
-import {
-  Dialog,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogPanel,
-  DialogPopup,
-  DialogTitle,
-} from "./ui/dialog";
 import { Input } from "./ui/input";
 import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "./ui/menu";
-import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "./ui/select";
 import { SidebarContent, SidebarGroup, SidebarMenuButton, useSidebar } from "./ui/sidebar";
 import { SidebarChromeFooter, SidebarChromeHeader } from "./sidebar/SidebarChrome";
 import { Popover, PopoverPopup, PopoverTrigger } from "./ui/popover";
@@ -188,11 +169,6 @@ import { useComposerDraftStore } from "../composerDraftStore";
 // stays behind an explicit Show more.
 const SETTLED_TAIL_INITIAL_COUNT = 10;
 const SETTLED_TAIL_PAGE_COUNT = 25;
-const PROJECT_GROUPING_MODE_LABELS: Record<SidebarProjectGroupingMode, string> = {
-  repository: "Group by repository",
-  repository_path: "Group by repository path",
-  separate: "Keep separate",
-};
 
 function compactSidebarTimeLabel(label: string): string {
   if (label === "just now") return "now";
@@ -1379,13 +1355,6 @@ export default function Sidebar() {
   const updateThreadMetadata = useAtomCommand(threadEnvironment.updateMetadata, {
     reportFailure: false,
   });
-  const deleteProject = useAtomCommand(projectEnvironment.delete, {
-    reportFailure: false,
-  });
-  const updateProject = useAtomCommand(projectEnvironment.update, {
-    reportFailure: false,
-  });
-  const updateSettings = useUpdateClientSettings();
   const { copyToClipboard: copyPathToClipboard } = useCopyToClipboard<{ path: string }>({
     onCopy: ({ path }) => {
       toastManager.add({
@@ -1423,9 +1392,6 @@ export default function Sidebar() {
       );
     },
   });
-  const [projectActionsTarget, setProjectActionsTarget] = useState<SidebarProjectSnapshot | null>(
-    null,
-  );
   const [projectScopeMenuOpen, setProjectScopeMenuOpen] = useState(false);
   const newThreadContext = useHandleNewThread();
   const openAddProjectCommandPalette = useCallback(
@@ -1602,156 +1568,20 @@ export default function Sidebar() {
     clearSelection();
   }, [clearSelection, projectScopeKey]);
 
-  const handleRemoveProjectMembers = useCallback(
-    async (projectGroup: SidebarProjectSnapshot, members: readonly SidebarProjectGroupMember[]) => {
-      const api = readLocalApi();
-      if (!api) return;
-
-      const memberKeys = new Set(members.map((member) => `${member.environmentId}:${member.id}`));
-      const projectThreads = threads.filter((thread) =>
-        memberKeys.has(`${thread.environmentId}:${thread.projectId}`),
-      );
-      const isWholeGroup = members.length === projectGroup.memberProjects.length;
-      const singleMember = members.length === 1 ? members[0]! : null;
-      const targetLabel = singleMember?.title ?? projectGroup.displayName;
-      const confirmed = await settlePromise(() =>
-        api.dialogs.confirm(
-          projectThreads.length > 0
-            ? [
-                `Remove project "${targetLabel}" and delete its ${projectThreads.length} thread${projectThreads.length === 1 ? "" : "s"}?`,
-                ...(singleMember
-                  ? [
-                      `Path: ${singleMember.workspaceRoot}`,
-                      ...(singleMember.environmentLabel
-                        ? [`Environment: ${singleMember.environmentLabel}`]
-                        : []),
-                    ]
-                  : [`This removes ${members.length} grouped project entries.`]),
-                "This permanently clears conversation history for those threads.",
-                isWholeGroup
-                  ? "This removes only the project entries, not the files on disk."
-                  : "Other entries in this grouped project are unaffected.",
-                "This action cannot be undone.",
-              ].join("\n")
-            : [
-                `Remove project "${targetLabel}"?`,
-                ...(singleMember
-                  ? [
-                      `Path: ${singleMember.workspaceRoot}`,
-                      ...(singleMember.environmentLabel
-                        ? [`Environment: ${singleMember.environmentLabel}`]
-                        : []),
-                    ]
-                  : [`This removes ${members.length} grouped project entries.`]),
-                isWholeGroup
-                  ? "This removes only the project entries, not the files on disk."
-                  : "Other entries in this grouped project are unaffected.",
-              ].join("\n"),
-        ),
-      );
-      if (confirmed._tag === "Failure" || !confirmed.value) return;
-
-      const draftStore = useComposerDraftStore.getState();
-      let shouldNavigate = false;
-      for (const project of members) {
-        const memberThreads = projectThreads.filter(
-          (thread) =>
-            thread.environmentId === project.environmentId && thread.projectId === project.id,
-        );
-        const projectRef = scopeProjectRef(project.environmentId, project.id);
-        const projectDraftThread = draftStore.getDraftThreadByProjectRef(projectRef);
-        const memberRemovalNeedsNavigation = shouldNavigateAfterProjectRemoval({
-          routeTarget: routeTargetRef.current,
-          projectThreads: memberThreads,
-          projectDraftId: projectDraftThread?.draftId ?? null,
-        });
-
-        const result = await deleteProject({
-          environmentId: project.environmentId,
-          input: {
-            projectId: project.id,
-            ...(memberThreads.length > 0 ? { force: true } : {}),
-          },
-        });
-        if (result._tag === "Failure") {
-          if (!isAtomCommandInterrupted(result)) {
-            const error = squashAtomCommandFailure(result);
-            toastManager.add(
-              stackedThreadToast({
-                type: "error",
-                title: `Failed to remove "${project.title}"`,
-                description: error instanceof Error ? error.message : "An error occurred.",
-              }),
-            );
-          }
-          if (shouldNavigate) {
-            void router.navigate({ to: "/" });
-          }
-          return;
-        }
-
-        shouldNavigate ||= memberRemovalNeedsNavigation;
-        if (projectDraftThread) {
-          draftStore.clearDraftThread(projectDraftThread.draftId);
-        }
-        draftStore.clearProjectDraftThreadId(projectRef);
-      }
-
-      if (shouldNavigate) {
-        void router.navigate({ to: "/" });
-      }
-    },
-    [deleteProject, router, threads],
-  );
-
-  const renameProjectMember = useCallback(
-    async (member: SidebarProjectGroupMember, nextTitle: string) => {
-      const title = nextTitle.trim();
-      if (!title) {
-        toastManager.add({ type: "warning", title: "Project title cannot be empty" });
-        return;
-      }
-      if (title === member.title) return;
-      const result = await updateProject({
-        environmentId: member.environmentId,
-        input: { projectId: member.id, title },
-      });
-      if (result._tag === "Failure" && !isAtomCommandInterrupted(result)) {
-        const error = squashAtomCommandFailure(result);
-        toastManager.add(
-          stackedThreadToast({
-            type: "error",
-            title: "Failed to rename project",
-            description: error instanceof Error ? error.message : "An error occurred.",
-          }),
-        );
-      }
-    },
-    [updateProject],
-  );
-
-  const updateProjectGroupingPreference = useCallback(
-    (member: SidebarProjectGroupMember, selection: SidebarProjectGroupingMode | "inherit") => {
-      const overrideKey = deriveProjectGroupingOverrideKey(member);
-      const nextOverrides = { ...projectGroupingSettings.sidebarProjectGroupingOverrides };
-      if (selection === "inherit") {
-        delete nextOverrides[overrideKey];
-      } else {
-        nextOverrides[overrideKey] = selection;
-      }
-      updateSettings({ sidebarProjectGroupingOverrides: nextOverrides });
-    },
-    [projectGroupingSettings.sidebarProjectGroupingOverrides, updateSettings],
-  );
-
   const handleProjectActions = useCallback(
     (event: ReactMouseEvent<HTMLButtonElement>, projectGroup: SidebarProjectSnapshot) => {
       event.preventDefault();
       event.stopPropagation();
       setProjectScopeMenuOpen(false);
-      window.requestAnimationFrame(() => setProjectActionsTarget(projectGroup));
+      if (isMobile) {
+        setOpenMobile(false);
+      }
+      void router.navigate({
+        to: "/settings/projects/$projectKey",
+        params: { projectKey: projectGroup.projectKey },
+      });
     },
-    [],
+    [isMobile, router, setOpenMobile],
   );
 
   // Settled threads stay in the live shell stream (settled ≠ archived), so
@@ -3521,190 +3351,6 @@ export default function Sidebar() {
           ) : null}
         </SidebarGroup>
       </SidebarContent>
-      <Dialog
-        open={projectActionsTarget !== null}
-        onOpenChange={(open) => {
-          if (!open) setProjectActionsTarget(null);
-        }}
-      >
-        <DialogPopup className="max-w-xl">
-          <DialogHeader className="gap-3 pb-1!">
-            <DialogTitle className="text-balance">Project settings</DialogTitle>
-            <DialogDescription className="sr-only">
-              Manage project names, grouping rules, and environments.
-            </DialogDescription>
-            <div className="grid gap-1.5 text-base text-muted-foreground">
-              {projectActionsTarget?.memberProjects.map((member) => (
-                <div key={member.physicalProjectKey} className="flex min-w-0 items-center gap-3">
-                  <span className="flex min-w-0 items-center gap-1">
-                    <FolderIcon className="size-3.5 shrink-0 opacity-60" />
-                    <span className="min-w-0 truncate font-mono">{member.workspaceRoot}</span>
-                    <Button
-                      size="icon-xs"
-                      variant="ghost"
-                      className="size-4 shrink-0 rounded-sm"
-                      aria-label="Copy project path"
-                      title="Copy project path"
-                      onClick={() =>
-                        copyPathToClipboard(member.workspaceRoot, { path: member.workspaceRoot })
-                      }
-                    >
-                      <CopyIcon className="size-3.5" />
-                    </Button>
-                  </span>
-                  <span className="flex min-w-0 shrink-0 items-center gap-1">
-                    <ServerIcon className="size-3.5 shrink-0 opacity-60" />
-                    <span className="min-w-0 truncate">
-                      {member.environmentLabel ?? "Current environment"}
-                    </span>
-                  </span>
-                </div>
-              ))}
-            </div>
-          </DialogHeader>
-          <DialogPanel className="p-0">
-            <div className="divide-y divide-border/60">
-              {projectActionsTarget?.memberProjects.map((member) => (
-                <section
-                  key={member.physicalProjectKey}
-                  className="grid min-w-0 gap-5 px-6 pb-5 pt-2 sm:gap-4 sm:pb-4 sm:pt-2"
-                >
-                  <div className="grid gap-4 sm:grid-cols-2 sm:gap-3">
-                    <label className="grid min-w-0 gap-1.5">
-                      <span className="font-medium text-foreground">Project name</span>
-                      <Input
-                        key={`${member.physicalProjectKey}:${member.title}`}
-                        aria-label={`Project name in ${member.environmentLabel ?? "current environment"}`}
-                        defaultValue={member.title}
-                        onBlur={(event) => {
-                          void renameProjectMember(member, event.currentTarget.value);
-                        }}
-                        onKeyDown={(event) => {
-                          if (event.key === "Enter") event.currentTarget.blur();
-                        }}
-                      />
-                    </label>
-                    <label className="grid min-w-0 gap-1.5">
-                      <span className="font-medium text-foreground">Grouping rule</span>
-                      <Select
-                        value={
-                          projectGroupingSettings.sidebarProjectGroupingOverrides?.[
-                            deriveProjectGroupingOverrideKey(member)
-                          ] ?? "inherit"
-                        }
-                        onValueChange={(value) => {
-                          if (
-                            value === "inherit" ||
-                            value === "repository" ||
-                            value === "repository_path" ||
-                            value === "separate"
-                          ) {
-                            updateProjectGroupingPreference(member, value);
-                          }
-                        }}
-                      >
-                        <SelectTrigger
-                          className="w-full sm:min-h-7.5"
-                          aria-label={`Grouping rule for ${member.environmentLabel ?? "current environment"}`}
-                        >
-                          <SelectValue>
-                            {(() => {
-                              const selection =
-                                projectGroupingSettings.sidebarProjectGroupingOverrides?.[
-                                  deriveProjectGroupingOverrideKey(member)
-                                ] ?? "inherit";
-                              return selection === "inherit"
-                                ? `Default (${PROJECT_GROUPING_MODE_LABELS[projectGroupingSettings.sidebarProjectGroupingMode]})`
-                                : PROJECT_GROUPING_MODE_LABELS[selection];
-                            })()}
-                          </SelectValue>
-                        </SelectTrigger>
-                        <SelectPopup align="start" alignItemWithTrigger={false}>
-                          <SelectItem hideIndicator value="inherit">
-                            Use global default
-                          </SelectItem>
-                          <SelectItem hideIndicator value="repository">
-                            {PROJECT_GROUPING_MODE_LABELS.repository}
-                          </SelectItem>
-                          <SelectItem hideIndicator value="repository_path">
-                            {PROJECT_GROUPING_MODE_LABELS.repository_path}
-                          </SelectItem>
-                          <SelectItem hideIndicator value="separate">
-                            {PROJECT_GROUPING_MODE_LABELS.separate}
-                          </SelectItem>
-                        </SelectPopup>
-                      </Select>
-                    </label>
-                  </div>
-                  {projectActionsTarget.memberProjects.length > 1 ? (
-                    <div className="flex justify-end">
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        className="text-destructive-foreground hover:bg-destructive/8 hover:text-destructive-foreground"
-                        onClick={() => {
-                          const projectGroup = projectActionsTarget;
-                          setProjectActionsTarget(null);
-                          void handleRemoveProjectMembers(projectGroup, [member]);
-                        }}
-                      >
-                        <Trash2Icon />
-                        Remove project
-                      </Button>
-                    </div>
-                  ) : null}
-                </section>
-              ))}
-            </div>
-            {projectActionsTarget && projectActionsTarget.memberProjects.length > 1 ? (
-              <div className="flex flex-col gap-3 border-t border-border/60 bg-muted/32 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
-                <div className="min-w-0">
-                  <p className="text-base font-medium text-foreground sm:text-sm">
-                    Remove this project everywhere
-                  </p>
-                  <p className="text-base text-pretty text-muted-foreground sm:text-sm">
-                    Deletes all grouped entries and their conversation history.
-                  </p>
-                </div>
-                <Button
-                  size="sm"
-                  variant="destructive-outline"
-                  className="shrink-0"
-                  onClick={() => {
-                    const projectGroup = projectActionsTarget;
-                    setProjectActionsTarget(null);
-                    void handleRemoveProjectMembers(projectGroup, projectGroup.memberProjects);
-                  }}
-                >
-                  <Trash2Icon />
-                  Remove all entries
-                </Button>
-              </div>
-            ) : null}
-          </DialogPanel>
-          <DialogFooter
-            variant="bare"
-            className={cn(
-              projectActionsTarget?.memberProjects.length === 1 && "sm:justify-between",
-            )}
-          >
-            {projectActionsTarget?.memberProjects.length === 1 ? (
-              <Button
-                variant="destructive-outline"
-                onClick={() => {
-                  const projectGroup = projectActionsTarget;
-                  setProjectActionsTarget(null);
-                  void handleRemoveProjectMembers(projectGroup, projectGroup.memberProjects);
-                }}
-              >
-                <Trash2Icon />
-                Remove project
-              </Button>
-            ) : null}
-            <Button onClick={() => setProjectActionsTarget(null)}>Close</Button>
-          </DialogFooter>
-        </DialogPopup>
-      </Dialog>
       <SidebarChromeFooter />
     </>
   );
diff --git a/apps/web/src/components/projectScriptEditor.tsx b/apps/web/src/components/projectScriptEditor.tsx
new file mode 100644
index 00000000000..4b728c2e07e
--- /dev/null
+++ b/apps/web/src/components/projectScriptEditor.tsx
@@ -0,0 +1,415 @@
+import type {
+  ProjectScript,
+  ProjectScriptIcon,
+  ResolvedKeybindingsConfig,
+} from "@t3tools/contracts";
+import {
+  isAtomCommandInterrupted,
+  squashAtomCommandFailure,
+  type AtomCommandResult,
+} from "@t3tools/client-runtime/state/runtime";
+import {
+  BugIcon,
+  FlaskConicalIcon,
+  HammerIcon,
+  ListChecksIcon,
+  PlayIcon,
+  WrenchIcon,
+} from "lucide-react";
+import React, { type FormEvent, type KeyboardEvent, useEffect, useState } from "react";
+
+import {
+  keybindingValueForCommand,
+  decodeProjectScriptKeybindingRule,
+} from "~/lib/projectScriptKeybindings";
+import { keybindingFromKeyboardEvent } from "~/components/settings/KeybindingsSettings.logic";
+import { commandForProjectScript, nextProjectScriptId } from "~/projectScripts";
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogPopup,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Popover, PopoverPopup, PopoverTrigger } from "./ui/popover";
+import { Switch } from "./ui/switch";
+import { Textarea } from "./ui/textarea";
+
+export const SCRIPT_ICONS: Array<{ id: ProjectScriptIcon; label: string }> = [
+  { id: "play", label: "Play" },
+  { id: "test", label: "Test" },
+  { id: "lint", label: "Lint" },
+  { id: "configure", label: "Configure" },
+  { id: "build", label: "Build" },
+  { id: "debug", label: "Debug" },
+];
+
+export function ScriptIcon({
+  icon,
+  className = "size-3.5",
+}: {
+  icon: ProjectScriptIcon;
+  className?: string;
+}) {
+  if (icon === "test") return <FlaskConicalIcon className={className} />;
+  if (icon === "lint") return <ListChecksIcon className={className} />;
+  if (icon === "configure") return <WrenchIcon className={className} />;
+  if (icon === "build") return <HammerIcon className={className} />;
+  if (icon === "debug") return <BugIcon className={className} />;
+  return <PlayIcon className={className} />;
+}
+
+export interface NewProjectScriptInput {
+  name: string;
+  command: string;
+  icon: ProjectScriptIcon;
+  runOnWorktreeCreate: boolean;
+  keybinding: string | null;
+  /** Optional URL to open in the in-app preview when this script runs. */
+  previewUrl: string | null;
+  /** When true, automatically open the preview panel pointed at `previewUrl`. */
+  autoOpenPreview: boolean;
+}
+
+export type ProjectScriptActionResult = AtomCommandResult<void, unknown>;
+
+export const EMPTY_PROJECT_SCRIPT_INPUT: NewProjectScriptInput = {
+  name: "",
+  command: "",
+  icon: "play",
+  runOnWorktreeCreate: false,
+  keybinding: null,
+  previewUrl: null,
+  autoOpenPreview: false,
+};
+
+/** What the editor dialog should open with. `scriptId: null` means "add". */
+export interface ProjectScriptEditorRequest {
+  scriptId: string | null;
+  initial: NewProjectScriptInput;
+  /** Validation error to show immediately (e.g. a failed t3.json import). */
+  error?: string;
+}
+
+export function editorRequestForScript(
+  script: ProjectScript,
+  keybindings: ResolvedKeybindingsConfig,
+): ProjectScriptEditorRequest {
+  return {
+    scriptId: script.id,
+    initial: {
+      name: script.name,
+      command: script.command,
+      icon: script.icon,
+      runOnWorktreeCreate: script.runOnWorktreeCreate,
+      keybinding: keybindingValueForCommand(keybindings, commandForProjectScript(script.id)),
+      previewUrl: script.previewUrl ?? null,
+      autoOpenPreview: script.autoOpenPreview ?? false,
+    },
+  };
+}
+
+/**
+ * Add/edit dialog for a project script, shared by the chat-header scripts menu
+ * and the project settings page. The parent owns which script (if any) is
+ * being edited via `request`; the dialog owns the form state and validation.
+ */
+export function ProjectScriptEditorDialog({
+  request,
+  scripts,
+  onSubmit,
+  onDelete,
+  onClose,
+}: {
+  request: ProjectScriptEditorRequest | null;
+  /** Existing scripts, used to derive a unique id for new scripts. */
+  scripts: ReadonlyArray<ProjectScript>;
+  onSubmit: (
+    scriptId: string | null,
+    input: NewProjectScriptInput,
+  ) => Promise<ProjectScriptActionResult>;
+  onDelete: (scriptId: string) => void;
+  onClose: () => void;
+}) {
+  const formId = React.useId();
+  const [name, setName] = useState("");
+  const [command, setCommand] = useState("");
+  const [icon, setIcon] = useState<ProjectScriptIcon>("play");
+  const [iconPickerOpen, setIconPickerOpen] = useState(false);
+  const [runOnWorktreeCreate, setRunOnWorktreeCreate] = useState(false);
+  const [keybinding, setKeybinding] = useState("");
+  const [previewUrl, setPreviewUrl] = useState("");
+  const [autoOpenPreview, setAutoOpenPreview] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+
+  const isOpen = request !== null;
+  const isEditing = request?.scriptId != null;
+
+  // Hydrate the form whenever a new request opens the dialog.
+  useEffect(() => {
+    if (!request) return;
+    setName(request.initial.name);
+    setCommand(request.initial.command);
+    setIcon(request.initial.icon);
+    setIconPickerOpen(false);
+    setRunOnWorktreeCreate(request.initial.runOnWorktreeCreate);
+    setKeybinding(request.initial.keybinding ?? "");
+    setPreviewUrl(request.initial.previewUrl ?? "");
+    setAutoOpenPreview(request.initial.autoOpenPreview);
+    setValidationError(request.error ?? null);
+  }, [request]);
+
+  const captureKeybinding = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Tab") return;
+    event.preventDefault();
+    if (event.key === "Backspace" || event.key === "Delete") {
+      setKeybinding("");
+      return;
+    }
+    const next = keybindingFromKeyboardEvent(event, navigator.platform);
+    if (!next) return;
+    setKeybinding(next);
+  };
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!request) return;
+    const trimmedName = name.trim();
+    const trimmedCommand = command.trim();
+    if (trimmedName.length === 0) {
+      setValidationError("Name is required.");
+      return;
+    }
+    if (trimmedCommand.length === 0) {
+      setValidationError("Command is required.");
+      return;
+    }
+
+    setValidationError(null);
+    let payload: NewProjectScriptInput;
+    try {
+      const scriptIdForValidation =
+        request.scriptId ??
+        nextProjectScriptId(
+          trimmedName,
+          scripts.map((script) => script.id),
+        );
+      const keybindingRule = decodeProjectScriptKeybindingRule({
+        keybinding,
+        command: commandForProjectScript(scriptIdForValidation),
+      });
+      const trimmedPreviewUrl = previewUrl.trim();
+      payload = {
+        name: trimmedName,
+        command: trimmedCommand,
+        icon,
+        runOnWorktreeCreate,
+        keybinding: keybindingRule?.key ?? null,
+        previewUrl: trimmedPreviewUrl.length > 0 ? trimmedPreviewUrl : null,
+        autoOpenPreview: trimmedPreviewUrl.length > 0 ? autoOpenPreview : false,
+      } satisfies NewProjectScriptInput;
+    } catch (error) {
+      setValidationError(error instanceof Error ? error.message : "Failed to save action.");
+      return;
+    }
+
+    const result = await onSubmit(request.scriptId, payload);
+    if (result._tag === "Failure") {
+      if (!isAtomCommandInterrupted(result)) {
+        const error = squashAtomCommandFailure(result);
+        setValidationError(error instanceof Error ? error.message : "Failed to save action.");
+      }
+      return;
+    }
+    setIconPickerOpen(false);
+    onClose();
+  };
+
+  return (
+    <>
+      <Dialog
+        open={isOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setIconPickerOpen(false);
+            onClose();
+          }
+        }}
+      >
+        <DialogPopup>
+          <DialogHeader>
+            <DialogTitle>{isEditing ? "Edit Action" : "Add Action"}</DialogTitle>
+            <DialogDescription>
+              Actions are project-scoped commands you can run from the top bar or keybindings.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogPanel>
+            <form id={formId} className="space-y-4" onSubmit={submit}>
+              <div className="space-y-1.5">
+                <Label htmlFor="script-name">Name</Label>
+                <div className="flex items-center gap-2">
+                  <Popover onOpenChange={setIconPickerOpen} open={iconPickerOpen}>
+                    <PopoverTrigger
+                      render={
+                        <Button
+                          type="button"
+                          variant="outline"
+                          className="size-9 shrink-0 hover:bg-popover active:bg-popover data-pressed:bg-popover data-pressed:shadow-xs/5 data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:border-transparent dark:bg-white/[0.035] dark:data-pressed:before:shadow-none"
+                          aria-label="Choose icon"
+                        />
+                      }
+                    >
+                      <ScriptIcon icon={icon} className="size-4.5" />
+                    </PopoverTrigger>
+                    <PopoverPopup align="start">
+                      <div className="grid grid-cols-3 gap-2">
+                        {SCRIPT_ICONS.map((entry) => {
+                          const isSelected = entry.id === icon;
+                          return (
+                            <button
+                              key={entry.id}
+                              type="button"
+                              className={`relative flex flex-col items-center gap-2 rounded-md border px-2 py-2 text-xs dark:border-transparent ${
+                                isSelected
+                                  ? "border-primary/70 bg-primary/10 dark:ring-1 dark:ring-primary/30"
+                                  : "border-border/70 hover:bg-accent/60 dark:bg-white/[0.035]"
+                              }`}
+                              onClick={() => {
+                                setIcon(entry.id);
+                                setIconPickerOpen(false);
+                              }}
+                            >
+                              <ScriptIcon icon={entry.id} className="size-4" />
+                              <span>{entry.label}</span>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </PopoverPopup>
+                  </Popover>
+                  <Input
+                    id="script-name"
+                    autoFocus
+                    placeholder="Test"
+                    value={name}
+                    onChange={(event) => setName(event.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="script-keybinding">Keybinding</Label>
+                <Input
+                  id="script-keybinding"
+                  placeholder="Press shortcut"
+                  value={keybinding}
+                  readOnly
+                  onKeyDown={captureKeybinding}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Press a shortcut. Use <code>Backspace</code> to clear.
+                </p>
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="script-command">Command</Label>
+                <Textarea
+                  id="script-command"
+                  placeholder="bun test"
+                  value={command}
+                  onChange={(event) => setCommand(event.target.value)}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="script-preview-url">Preview URL (optional)</Label>
+                <Input
+                  id="script-preview-url"
+                  placeholder="http://localhost:5173"
+                  value={previewUrl}
+                  onChange={(event) => setPreviewUrl(event.target.value)}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Open this URL in the in-app preview when this action runs.
+                </p>
+              </div>
+              <label className="flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm dark:border-transparent dark:bg-white/[0.035]">
+                <span>Run automatically on worktree creation</span>
+                <Switch
+                  checked={runOnWorktreeCreate}
+                  onCheckedChange={(checked) => setRunOnWorktreeCreate(Boolean(checked))}
+                />
+              </label>
+              <label
+                className={`flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm dark:border-transparent dark:bg-white/[0.035] ${
+                  previewUrl.trim().length === 0 ? "opacity-60" : ""
+                }`}
+              >
+                <span>Open preview automatically when this action runs</span>
+                <Switch
+                  checked={autoOpenPreview}
+                  disabled={previewUrl.trim().length === 0}
+                  onCheckedChange={(checked) => setAutoOpenPreview(Boolean(checked))}
+                />
+              </label>
+              {validationError && <p className="text-sm text-destructive">{validationError}</p>}
+            </form>
+          </DialogPanel>
+          <DialogFooter className="dark:border-transparent dark:bg-transparent">
+            {isEditing && (
+              <Button
+                type="button"
+                variant="destructive-outline"
+                className="mr-auto"
+                onClick={() => setDeleteConfirmOpen(true)}
+              >
+                Delete
+              </Button>
+            )}
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button form={formId} type="submit">
+              {isEditing ? "Save changes" : "Save action"}
+            </Button>
+          </DialogFooter>
+        </DialogPopup>
+      </Dialog>
+
+      <AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
+        <AlertDialogPopup>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete action "{name}"?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                if (!request?.scriptId) return;
+                setDeleteConfirmOpen(false);
+                onClose();
+                onDelete(request.scriptId);
+              }}
+            >
+              Delete action
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogPopup>
+      </AlertDialog>
+    </>
+  );
+}
diff --git a/apps/web/src/components/settings/ProjectSettingsPanel.tsx b/apps/web/src/components/settings/ProjectSettingsPanel.tsx
new file mode 100644
index 00000000000..48a99e421b0
--- /dev/null
+++ b/apps/web/src/components/settings/ProjectSettingsPanel.tsx
@@ -0,0 +1,1011 @@
+import { useAtomValue } from "@effect/atom-react";
+import {
+  isAtomCommandInterrupted,
+  mapAtomCommandResult,
+  settlePromise,
+  squashAtomCommandFailure,
+  type AtomCommandResult,
+} from "@t3tools/client-runtime/state/runtime";
+import { scopeProjectRef } from "@t3tools/client-runtime/environment";
+import { AsyncResult } from "effect/unstable/reactivity";
+import {
+  deriveProjectGroupingOverrideKey,
+  selectProjectGroupingSettings,
+} from "../../logicalProject";
+import type {
+  ModelSelection,
+  ProviderDriverKind,
+  SidebarProjectGroupingMode,
+  T3ProjectFileScript,
+} from "@t3tools/contracts";
+import { createModelSelection } from "@t3tools/shared/model";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+import * as Cause from "effect/Cause";
+import { CopyIcon, FolderIcon, PlusIcon, ServerIcon, SettingsIcon, Trash2Icon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { useComposerDraftStore } from "../../composerDraftStore";
+import { isElectron } from "../../env";
+import {
+  useClientSettings,
+  useUpdateClientSettings,
+  usePrimarySettings,
+} from "../../hooks/useSettings";
+import { useCopyToClipboard } from "../../hooks/useCopyToClipboard";
+import { useT3ProjectFileState } from "../../hooks/useT3ProjectFileScripts";
+import { shortcutLabelForCommand } from "../../keybindings";
+import { keybindingValueForCommand } from "../../lib/projectScriptKeybindings";
+import { readLocalApi } from "../../localApi";
+import {
+  buildProjectScript,
+  commandForProjectScript,
+  nextProjectScriptId,
+} from "../../projectScripts";
+import { decodeProjectScriptKeybindingRule } from "../../lib/projectScriptKeybindings";
+import {
+  applyProviderInstanceSettings,
+  deriveProviderInstanceEntries,
+  resolveDefaultProviderModelSelection,
+  sortProviderInstanceEntries,
+} from "../../providerInstances";
+import { getCustomModelOptionsByInstance } from "../../modelSelection";
+import {
+  buildSidebarProjectSnapshots,
+  type SidebarProjectGroupMember,
+  type SidebarProjectSnapshot,
+} from "../../sidebarProjectGrouping";
+import { useEnvironments, usePrimaryEnvironmentId } from "../../state/environments";
+import { useProjects, useThreadShells } from "../../state/entities";
+import { projectEnvironment } from "../../state/projects";
+import {
+  primaryServerKeybindingsAtom,
+  primaryServerProvidersAtom,
+  serverEnvironment,
+} from "../../state/server";
+import { useAtomCommand } from "../../state/use-atom-command";
+import { ProviderModelPicker } from "../chat/ProviderModelPicker";
+import { TraitsPicker } from "../chat/TraitsPicker";
+import { ProjectFavicon } from "../ProjectFavicon";
+import {
+  EMPTY_PROJECT_SCRIPT_INPUT,
+  editorRequestForScript,
+  ProjectScriptEditorDialog,
+  ScriptIcon,
+  type NewProjectScriptInput,
+  type ProjectScriptEditorRequest,
+} from "../projectScriptEditor";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
+import { stackedThreadToast, toastManager } from "../ui/toast";
+import {
+  SettingResetButton,
+  SettingsPageContainer,
+  SettingsRow,
+  SettingsSection,
+} from "./settingsLayout";
+
+export const PROJECT_GROUPING_MODE_LABELS: Record<SidebarProjectGroupingMode, string> = {
+  repository: "Group by repository",
+  repository_path: "Group by repository path",
+  separate: "Keep separate",
+};
+
+/** Logical project groups for the settings page, sorted by display name. */
+export function useSettingsProjectGroups(): SidebarProjectSnapshot[] {
+  const projects = useProjects();
+  const projectGroupingSettings = useClientSettings(selectProjectGroupingSettings);
+  const primaryEnvironmentId = usePrimaryEnvironmentId();
+  const { environments } = useEnvironments();
+  const environmentLabelById = useMemo(
+    () =>
+      new Map(
+        environments.map((environment) => [environment.environmentId, environment.label] as const),
+      ),
+    [environments],
+  );
+  return useMemo(
+    () =>
+      buildSidebarProjectSnapshots({
+        projects,
+        settings: projectGroupingSettings,
+        primaryEnvironmentId,
+        resolveEnvironmentLabel: (environmentId) => environmentLabelById.get(environmentId) ?? null,
+      }).sort((a, b) => a.displayName.localeCompare(b.displayName)),
+    [environmentLabelById, primaryEnvironmentId, projectGroupingSettings, projects],
+  );
+}
+
+function memberKey(member: { environmentId: string; id: string }): string {
+  return `${member.environmentId}:${member.id}`;
+}
+
+export function ProjectSettingsPanel({
+  selectedProjectKey,
+}: {
+  selectedProjectKey: string | null;
+}) {
+  const groups = useSettingsProjectGroups();
+  const navigate = useNavigate();
+  const currentHash = useLocation({ select: (location) => location.hash });
+
+  // The index route auto-selects the first project so /settings/projects is
+  // never a dead end. Hash is preserved for settings-search jumps.
+  useEffect(() => {
+    if (selectedProjectKey !== null) return;
+    const first = groups[0];
+    if (!first) return;
+    void navigate({
+      to: "/settings/projects/$projectKey",
+      params: { projectKey: first.projectKey },
+      ...(currentHash ? { hash: currentHash } : {}),
+      replace: true,
+      hashScrollIntoView: false,
+    });
+  }, [currentHash, groups, navigate, selectedProjectKey]);
+
+  const selected =
+    selectedProjectKey === null
+      ? null
+      : (groups.find((group) => group.projectKey === selectedProjectKey) ?? null);
+
+  // Remember the members of the last rendered group so a grouping-rule change
+  // (which changes the group key) can follow the project to its new group.
+  const lastSelectionRef = useRef<{ key: string; memberKeys: string[] } | null>(null);
+  useEffect(() => {
+    if (!selected) return;
+    lastSelectionRef.current = {
+      key: selected.projectKey,
+      memberKeys: selected.memberProjects.map((member) => member.physicalProjectKey),
+    };
+  }, [selected]);
+
+  // Recover when the selected key stops matching (regroup, removal, or a
+  // stale deep link) instead of parking on a dead-end message.
+  useEffect(() => {
+    if (selectedProjectKey === null || selected !== null || groups.length === 0) return;
+    const last = lastSelectionRef.current;
+    const successor =
+      last?.key === selectedProjectKey
+        ? (groups.find((group) =>
+            group.memberProjects.some((member) =>
+              last.memberKeys.includes(member.physicalProjectKey),
+            ),
+          ) ?? null)
+        : null;
+    if (successor) {
+      void navigate({
+        to: "/settings/projects/$projectKey",
+        params: { projectKey: successor.projectKey },
+        replace: true,
+        hashScrollIntoView: false,
+      });
+    } else {
+      void navigate({ to: "/settings/projects", replace: true, hashScrollIntoView: false });
+    }
+  }, [groups, navigate, selected, selectedProjectKey]);
+
+  const selectProject = useCallback(
+    (projectKey: string) => {
+      void navigate({
+        to: "/settings/projects/$projectKey",
+        params: { projectKey },
+        replace: true,
+        hashScrollIntoView: false,
+      });
+    },
+    [navigate],
+  );
+
+  return (
+    <div className="flex min-h-0 flex-1">
+      <nav
+        aria-label="Projects"
+        className="w-60 shrink-0 space-y-0.5 overflow-y-auto border-e border-border/40 p-3 pt-10 max-sm:hidden sm:pt-12"
+      >
+        {groups.map((group) => {
+          const isActive = group.projectKey === selected?.projectKey;
+          return (
+            <button
+              key={group.projectKey}
+              type="button"
+              onClick={() => selectProject(group.projectKey)}
+              className={`flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+                isActive
+                  ? "bg-accent text-foreground"
+                  : "text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+              }`}
+            >
+              <ProjectFavicon
+                environmentId={group.environmentId}
+                cwd={group.workspaceRoot}
+                className="size-4 shrink-0"
+              />
+              <span className="min-w-0 flex-1 truncate">{group.displayName}</span>
+              {group.groupedProjectCount > 1 ? (
+                <span className="shrink-0 text-xs text-muted-foreground/70">
+                  {group.groupedProjectCount}
+                </span>
+              ) : null}
+            </button>
+          );
+        })}
+        {groups.length === 0 ? (
+          <p className="px-2 py-4 text-sm text-muted-foreground">No projects yet.</p>
+        ) : null}
+      </nav>
+      {selected ? (
+        <ProjectDetail
+          key={selected.projectKey}
+          group={selected}
+          groups={groups}
+          onSelectProject={selectProject}
+        />
+      ) : (
+        <div className="flex flex-1 items-center justify-center p-8 text-sm text-muted-foreground">
+          {groups.length === 0 ? "Add a project from the sidebar to configure it here." : null}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ProjectDetail({
+  group,
+  groups,
+  onSelectProject,
+}: {
+  group: SidebarProjectSnapshot;
+  groups: ReadonlyArray<SidebarProjectSnapshot>;
+  onSelectProject: (projectKey: string) => void;
+}) {
+  const navigate = useNavigate();
+  const settings = usePrimarySettings();
+  const updateClientSettings = useUpdateClientSettings();
+  const projectGroupingSettings = useClientSettings(selectProjectGroupingSettings);
+  const serverProviders = useAtomValue(primaryServerProvidersAtom);
+  const keybindings = useAtomValue(primaryServerKeybindingsAtom);
+  const threads = useThreadShells();
+  const updateProject = useAtomCommand(projectEnvironment.update, { reportFailure: false });
+  const deleteProject = useAtomCommand(projectEnvironment.delete, { reportFailure: false });
+  const upsertKeybinding = useAtomCommand(serverEnvironment.upsertKeybinding, {
+    reportFailure: false,
+  });
+  const removeKeybinding = useAtomCommand(serverEnvironment.removeKeybinding, {
+    reportFailure: false,
+  });
+  const { copyToClipboard: copyPathToClipboard } = useCopyToClipboard<{ path: string }>({
+    onCopy: ({ path }) => {
+      toastManager.add({ type: "success", title: "Path copied", description: path });
+    },
+    onError: (error) => {
+      toastManager.add(
+        stackedThreadToast({
+          type: "error",
+          title: "Failed to copy path",
+          description: error instanceof Error ? error.message : "An error occurred.",
+        }),
+      );
+    },
+  });
+
+  const representative =
+    group.memberProjects.find(
+      (member) => member.environmentId === group.environmentId && member.id === group.id,
+    ) ?? group.memberProjects[0]!;
+
+  const threadCountByMember = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const thread of threads) {
+      const key = `${thread.environmentId}:${thread.projectId}`;
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+    return counts;
+  }, [threads]);
+  const groupThreadCount = group.memberProjects.reduce(
+    (total, member) => total + (threadCountByMember.get(memberKey(member)) ?? 0),
+    0,
+  );
+
+  const reportFailure = useCallback((title: string, result: AtomCommandResult<void, unknown>) => {
+    if (result._tag !== "Failure" || isAtomCommandInterrupted(result)) return;
+    const error = squashAtomCommandFailure(result);
+    toastManager.add(
+      stackedThreadToast({
+        type: "error",
+        title,
+        description: error instanceof Error ? error.message : "An error occurred.",
+      }),
+    );
+  }, []);
+
+  // Group-shared fields (default model, scripts) live on each physical
+  // project record, so a group-level edit fans out to every member.
+  const updateAllMembers = useCallback(
+    async (
+      input: Partial<{
+        defaultModelSelection: ModelSelection | null;
+        scripts: ReadonlyArray<ReturnType<typeof buildProjectScript>>;
+      }>,
+      failureTitle: string,
+    ): Promise<AtomCommandResult<void, unknown>> => {
+      for (const member of group.memberProjects) {
+        const result = mapAtomCommandResult(
+          await updateProject({
+            environmentId: member.environmentId,
+            input: { projectId: member.id, ...input },
+          }),
+          () => undefined,
+        );
+        if (result._tag === "Failure") {
+          // A partial fan-out is possible: earlier members already took the
+          // write. Name the environment so the user knows where it stopped.
+          reportFailure(
+            group.memberProjects.length > 1
+              ? `${failureTitle} on ${member.environmentLabel ?? "the current environment"}`
+              : failureTitle,
+            result,
+          );
+          return result;
+        }
+      }
+      return AsyncResult.success(undefined);
+    },
+    [group.memberProjects, reportFailure, updateProject],
+  );
+
+  // ----- default model -----
+  const storedSelection = representative.defaultModelSelection;
+  const resolvedSelection = resolveDefaultProviderModelSelection(serverProviders, storedSelection);
+  const instanceEntries = useMemo(
+    () =>
+      sortProviderInstanceEntries(
+        applyProviderInstanceSettings(deriveProviderInstanceEntries(serverProviders), settings),
+      ),
+    [serverProviders, settings],
+  );
+  const modelOptionsByInstance = useMemo(
+    () => getCustomModelOptionsByInstance(settings, serverProviders),
+    [serverProviders, settings],
+  );
+  const activeEntry = instanceEntries.find(
+    (entry) => entry.instanceId === resolvedSelection?.instanceId,
+  );
+  const setDefaultModel = useCallback(
+    (selection: ModelSelection | null) =>
+      void updateAllMembers({ defaultModelSelection: selection }, "Failed to update default model"),
+    [updateAllMembers],
+  );
+
+  // ----- scripts -----
+  const scripts = representative.scripts;
+  const [editorRequest, setEditorRequest] = useState<ProjectScriptEditorRequest | null>(null);
+  // Script writes replace the whole array, so two overlapping writes computed
+  // from the same snapshot would drop each other's changes. One at a time.
+  const [isSavingScripts, setIsSavingScripts] = useState(false);
+  const savingScriptsRef = useRef(false);
+  const t3File = useT3ProjectFileState(representative.environmentId, representative.workspaceRoot);
+  const importableScripts = useMemo(
+    () =>
+      t3File.scripts.filter(
+        (fileScript) =>
+          !scripts.some(
+            (script) =>
+              script.command === fileScript.command ||
+              script.name.toLowerCase() === fileScript.name.toLowerCase(),
+          ),
+      ),
+    [scripts, t3File.scripts],
+  );
+
+  const persistScripts = useCallback(
+    async (
+      nextScripts: ReadonlyArray<ReturnType<typeof buildProjectScript>>,
+      keybinding: string | null | undefined,
+      keybindingCommand: ReturnType<typeof commandForProjectScript>,
+    ): Promise<AtomCommandResult<void, unknown>> => {
+      if (savingScriptsRef.current) {
+        return AsyncResult.failure(
+          Cause.fail(new Error("Another script change is still saving. Try again.")),
+        );
+      }
+      savingScriptsRef.current = true;
+      setIsSavingScripts(true);
+      try {
+        // Captured before the write so a cleared or deleted binding can be
+        // removed from the keybindings config afterwards.
+        const previousKeybinding = keybindingValueForCommand(keybindings, keybindingCommand);
+        const updateResult = await updateAllMembers(
+          { scripts: nextScripts },
+          "Failed to save scripts",
+        );
+        if (updateResult._tag === "Failure") return updateResult;
+
+        const keybindingRule = decodeProjectScriptKeybindingRule({
+          keybinding,
+          command: keybindingCommand,
+        });
+        if (!isElectron) return updateResult;
+        const environmentIds = [
+          ...new Set(group.memberProjects.map((member) => member.environmentId)),
+        ];
+        const previousTarget = previousKeybinding
+          ? decodeProjectScriptKeybindingRule({
+              keybinding: previousKeybinding,
+              command: keybindingCommand,
+            })
+          : null;
+        if (keybindingRule) {
+          // `replace` swaps the command's previous rule instead of appending a
+          // second one that would keep the old shortcut alive.
+          const input =
+            previousTarget && previousTarget.key !== keybindingRule.key
+              ? { ...keybindingRule, replace: previousTarget }
+              : keybindingRule;
+          for (const environmentId of environmentIds) {
+            const result = mapAtomCommandResult(
+              await upsertKeybinding({ environmentId, input }),
+              () => undefined,
+            );
+            if (result._tag === "Failure") {
+              reportFailure("Failed to save keybinding", result);
+              return result;
+            }
+          }
+        } else if (previousTarget) {
+          for (const environmentId of environmentIds) {
+            const result = mapAtomCommandResult(
+              await removeKeybinding({ environmentId, input: previousTarget }),
+              () => undefined,
+            );
+            if (result._tag === "Failure") {
+              reportFailure("Failed to remove keybinding", result);
+              return result;
+            }
+          }
+        }
+        return updateResult;
+      } finally {
+        savingScriptsRef.current = false;
+        setIsSavingScripts(false);
+      }
+    },
+    [
+      group.memberProjects,
+      keybindings,
+      removeKeybinding,
+      reportFailure,
+      updateAllMembers,
+      upsertKeybinding,
+    ],
+  );
+
+  const submitScript = useCallback(
+    async (
+      scriptId: string | null,
+      input: NewProjectScriptInput,
+    ): Promise<AtomCommandResult<void, unknown>> => {
+      if (scriptId === null) {
+        const nextId = nextProjectScriptId(
+          input.name,
+          scripts.map((script) => script.id),
+        );
+        const nextScript = buildProjectScript(nextId, input);
+        const nextScripts = input.runOnWorktreeCreate
+          ? [
+              ...scripts.map((script) =>
+                script.runOnWorktreeCreate ? { ...script, runOnWorktreeCreate: false } : script,
+              ),
+              nextScript,
+            ]
+          : [...scripts, nextScript];
+        return persistScripts(nextScripts, input.keybinding, commandForProjectScript(nextId));
+      }
+
+      const updatedScript = buildProjectScript(scriptId, input);
+      const nextScripts = scripts.map((script) =>
+        script.id === scriptId
+          ? updatedScript
+          : input.runOnWorktreeCreate
+            ? { ...script, runOnWorktreeCreate: false }
+            : script,
+      );
+      return persistScripts(nextScripts, input.keybinding, commandForProjectScript(scriptId));
+    },
+    [persistScripts, scripts],
+  );
+
+  const deleteScript = useCallback(
+    (scriptId: string) => {
+      const nextScripts = scripts.filter((script) => script.id !== scriptId);
+      void persistScripts(nextScripts, null, commandForProjectScript(scriptId));
+    },
+    [persistScripts, scripts],
+  );
+
+  const importFileScript = useCallback(
+    async (fileScript: T3ProjectFileScript) => {
+      const payload: NewProjectScriptInput = {
+        name: fileScript.name,
+        command: fileScript.command,
+        icon: fileScript.icon ?? "play",
+        runOnWorktreeCreate: fileScript.runOnWorktreeCreate ?? false,
+        keybinding: null,
+        previewUrl: fileScript.previewUrl ?? null,
+        autoOpenPreview: fileScript.previewUrl ? (fileScript.autoOpenPreview ?? false) : false,
+      };
+      const result = await submitScript(null, payload);
+      if (result._tag === "Failure" && !isAtomCommandInterrupted(result)) {
+        const error = squashAtomCommandFailure(result);
+        setEditorRequest({
+          scriptId: null,
+          initial: payload,
+          error: error instanceof Error ? error.message : "Failed to import action.",
+        });
+      }
+    },
+    [submitScript],
+  );
+
+  // ----- checkouts -----
+  const renameMember = useCallback(
+    async (member: SidebarProjectGroupMember, nextTitle: string) => {
+      const title = nextTitle.trim();
+      if (!title) {
+        toastManager.add({ type: "warning", title: "Project title cannot be empty" });
+        return;
+      }
+      if (title === member.title) return;
+      const result = mapAtomCommandResult(
+        await updateProject({
+          environmentId: member.environmentId,
+          input: { projectId: member.id, title },
+        }),
+        () => undefined,
+      );
+      reportFailure("Failed to rename project", result);
+    },
+    [reportFailure, updateProject],
+  );
+
+  const updateGroupingPreference = useCallback(
+    (member: SidebarProjectGroupMember, selection: SidebarProjectGroupingMode | "inherit") => {
+      const overrideKey = deriveProjectGroupingOverrideKey(member);
+      const nextOverrides = { ...projectGroupingSettings.sidebarProjectGroupingOverrides };
+      if (selection === "inherit") {
+        delete nextOverrides[overrideKey];
+      } else {
+        nextOverrides[overrideKey] = selection;
+      }
+      updateClientSettings({ sidebarProjectGroupingOverrides: nextOverrides });
+    },
+    [projectGroupingSettings.sidebarProjectGroupingOverrides, updateClientSettings],
+  );
+
+  const removeMembers = useCallback(
+    async (members: ReadonlyArray<SidebarProjectGroupMember>) => {
+      const api = readLocalApi();
+      if (!api) return;
+
+      const memberKeys = new Set(members.map(memberKey));
+      const projectThreads = threads.filter((thread) =>
+        memberKeys.has(`${thread.environmentId}:${thread.projectId}`),
+      );
+      const isWholeGroup = members.length === group.memberProjects.length;
+      const singleMember = members.length === 1 ? members[0]! : null;
+      const targetLabel = singleMember?.title ?? group.displayName;
+      const confirmed = await settlePromise(() =>
+        api.dialogs.confirm(
+          [
+            projectThreads.length > 0
+              ? `Remove project "${targetLabel}" and delete its ${projectThreads.length} thread${projectThreads.length === 1 ? "" : "s"}?`
+              : `Remove project "${targetLabel}"?`,
+            ...(singleMember
+              ? [
+                  `Path: ${singleMember.workspaceRoot}`,
+                  ...(singleMember.environmentLabel
+                    ? [`Environment: ${singleMember.environmentLabel}`]
+                    : []),
+                ]
+              : [`This removes ${members.length} grouped project entries.`]),
+            ...(projectThreads.length > 0
+              ? ["This permanently clears conversation history for those threads."]
+              : []),
+            isWholeGroup
+              ? "This removes only the project entries, not the files on disk."
+              : "Other entries in this grouped project are unaffected.",
+            "This action cannot be undone.",
+          ].join("\n"),
+        ),
+      );
+      if (confirmed._tag === "Failure" || !confirmed.value) return;
+
+      const draftStore = useComposerDraftStore.getState();
+      for (const member of members) {
+        const memberThreads = projectThreads.filter(
+          (thread) =>
+            thread.environmentId === member.environmentId && thread.projectId === member.id,
+        );
+        const result = mapAtomCommandResult(
+          await deleteProject({
+            environmentId: member.environmentId,
+            input: {
+              projectId: member.id,
+              ...(memberThreads.length > 0 ? { force: true } : {}),
+            },
+          }),
+          () => undefined,
+        );
+        if (result._tag === "Failure") {
+          reportFailure(`Failed to remove "${member.title}"`, result);
+          return;
+        }
+        const projectRef = scopeProjectRef(member.environmentId, member.id);
+        const projectDraftThread = draftStore.getDraftThreadByProjectRef(projectRef);
+        if (projectDraftThread) {
+          draftStore.clearDraftThread(projectDraftThread.draftId);
+        }
+        draftStore.clearProjectDraftThreadId(projectRef);
+      }
+
+      if (isWholeGroup) {
+        void navigate({ to: "/settings/projects", replace: true });
+      }
+    },
+    [
+      deleteProject,
+      group.displayName,
+      group.memberProjects.length,
+      navigate,
+      reportFailure,
+      threads,
+    ],
+  );
+
+  const repositoryLine =
+    representative.repositoryIdentity?.displayName ??
+    representative.repositoryIdentity?.canonicalKey ??
+    "No git remote detected";
+  const environmentCount = new Set(group.memberProjects.map((member) => member.environmentId)).size;
+
+  return (
+    <SettingsPageContainer className="gap-10">
+      <div className="flex items-center gap-3 px-3 sm:px-4">
+        <ProjectFavicon
+          environmentId={group.environmentId}
+          cwd={group.workspaceRoot}
+          className="size-8 shrink-0"
+        />
+        <div className="min-w-0 flex-1">
+          <h1 className="truncate text-xl font-semibold tracking-[-0.02em] text-foreground">
+            {group.displayName}
+          </h1>
+          <p className="truncate text-[13px] text-muted-foreground">
+            {repositoryLine}
+            {" · "}
+            {group.memberProjects.length === 1
+              ? "1 checkout"
+              : `${group.memberProjects.length} checkouts`}
+            {environmentCount > 1 ? ` across ${environmentCount} environments` : ""}
+            {" · "}
+            {groupThreadCount === 1 ? "1 thread" : `${groupThreadCount} threads`}
+          </p>
+        </div>
+        <Select value={group.projectKey} onValueChange={(value) => onSelectProject(String(value))}>
+          <SelectTrigger className="sm:hidden" aria-label="Switch project">
+            <SelectValue>{group.displayName}</SelectValue>
+          </SelectTrigger>
+          <SelectPopup align="end" alignItemWithTrigger={false}>
+            {groups.map((candidate) => (
+              <SelectItem key={candidate.projectKey} hideIndicator value={candidate.projectKey}>
+                {candidate.displayName}
+              </SelectItem>
+            ))}
+          </SelectPopup>
+        </Select>
+      </div>
+
+      <SettingsSection title="Model">
+        <SettingsRow
+          id="project-default-model"
+          title="Default model"
+          description="New threads in this project start with this model. Applies to every checkout in this group."
+          resetAction={
+            storedSelection !== null ? (
+              <SettingResetButton
+                label="project default model"
+                onClick={() => setDefaultModel(null)}
+              />
+            ) : null
+          }
+          control={
+            resolvedSelection && activeEntry ? (
+              <div className="flex flex-wrap items-center justify-end gap-1.5">
+                <ProviderModelPicker
+                  activeInstanceId={resolvedSelection.instanceId}
+                  model={resolvedSelection.model}
+                  lockedProvider={null}
+                  instanceEntries={instanceEntries}
+                  modelOptionsByInstance={modelOptionsByInstance}
+                  triggerVariant="outline"
+                  triggerClassName="min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground"
+                  onInstanceModelChange={(instanceId, model) => {
+                    setDefaultModel(createModelSelection(instanceId, model));
+                  }}
+                />
+                <TraitsPicker
+                  provider={activeEntry.driverKind as ProviderDriverKind}
+                  models={activeEntry.models}
+                  model={resolvedSelection.model}
+                  prompt=""
+                  onPromptChange={() => {}}
+                  modelOptions={resolvedSelection.options ?? []}
+                  allowPromptInjectedEffort={false}
+                  triggerVariant="outline"
+                  triggerClassName="min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground"
+                  onModelOptionsChange={(nextOptions) => {
+                    setDefaultModel(
+                      createModelSelection(
+                        resolvedSelection.instanceId,
+                        resolvedSelection.model,
+                        nextOptions,
+                      ),
+                    );
+                  }}
+                />
+              </div>
+            ) : (
+              <span className="text-sm text-muted-foreground">No providers available</span>
+            )
+          }
+        />
+      </SettingsSection>
+
+      <SettingsSection
+        id="project-scripts"
+        title="Scripts"
+        headerAction={
+          <Button
+            size="xs"
+            variant="outline"
+            disabled={isSavingScripts}
+            onClick={() =>
+              setEditorRequest({ scriptId: null, initial: EMPTY_PROJECT_SCRIPT_INPUT })
+            }
+          >
+            <PlusIcon className="size-3.5" />
+            Add action
+          </Button>
+        }
+      >
+        {scripts.length === 0 ? (
+          <p className="px-3 py-2 text-sm text-muted-foreground sm:px-4">
+            No scripts yet. Scripts run in a project terminal from the thread top bar; one script
+            can run automatically when a worktree is created.
+          </p>
+        ) : (
+          <div className="space-y-0.5">
+            {scripts.map((script) => {
+              const shortcutLabel = shortcutLabelForCommand(
+                keybindings,
+                commandForProjectScript(script.id),
+              );
+              return (
+                <div
+                  key={script.id}
+                  className="group flex min-w-0 items-center gap-3 rounded-lg px-3 py-2 hover:bg-accent/50 sm:px-4"
+                >
+                  <ScriptIcon
+                    icon={script.icon}
+                    className="size-4 shrink-0 text-muted-foreground"
+                  />
+                  <span className="shrink-0 text-sm font-medium text-foreground">
+                    {script.name}
+                  </span>
+                  {script.runOnWorktreeCreate ? (
+                    <span className="shrink-0 rounded-sm border border-border/60 px-1.5 py-px text-[11px] text-muted-foreground">
+                      setup
+                    </span>
+                  ) : null}
+                  {script.previewUrl ? (
+                    <span className="shrink-0 rounded-sm border border-border/60 px-1.5 py-px text-[11px] text-muted-foreground max-sm:hidden">
+                      preview · desktop only
+                    </span>
+                  ) : null}
+                  <span className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground/80">
+                    {script.command}
+                  </span>
+                  {shortcutLabel ? (
+                    <span className="shrink-0 text-xs text-muted-foreground">{shortcutLabel}</span>
+                  ) : null}
+                  <Button
+                    size="icon-xs"
+                    variant="ghost"
+                    className="shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"
+                    aria-label={`Edit ${script.name}`}
+                    disabled={isSavingScripts}
+                    onClick={() => setEditorRequest(editorRequestForScript(script, keybindings))}
+                  >
+                    <SettingsIcon className="size-3.5" />
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {t3File.status === "invalid" ? (
+          <SettingsRow
+            title="t3.json is invalid"
+            description="A t3.json exists at the workspace root but fails to parse, so every script and icon it declares is ignored. Check the JSON syntax and icon values."
+            className="text-warning"
+          />
+        ) : null}
+        {importableScripts.length > 0 ? (
+          <SettingsRow
+            title="Import from t3.json"
+            description={`${importableScripts.length} script${importableScripts.length === 1 ? "" : "s"} declared in this repo's t3.json ${importableScripts.length === 1 ? "is" : "are"} not set up yet.`}
+            control={
+              <div className="flex flex-wrap justify-end gap-1.5">
+                {importableScripts.map((fileScript) => (
+                  <Button
+                    key={`${fileScript.name} ${fileScript.command}`}
+                    size="xs"
+                    variant="outline"
+                    disabled={isSavingScripts}
+                    onClick={() => void importFileScript(fileScript)}
+                  >
+                    <ScriptIcon icon={fileScript.icon ?? "play"} className="size-3.5" />
+                    {fileScript.name}
+                  </Button>
+                ))}
+              </div>
+            }
+          />
+        ) : null}
+      </SettingsSection>
+
+      <SettingsSection id="project-checkouts" title="Checkouts">
+        <div className="space-y-2 px-3 sm:px-4">
+          {group.memberProjects.map((member) => {
+            const threadCount = threadCountByMember.get(memberKey(member)) ?? 0;
+            const groupingOverride =
+              projectGroupingSettings.sidebarProjectGroupingOverrides?.[
+                deriveProjectGroupingOverrideKey(member)
+              ] ?? "inherit";
+            return (
+              <div
+                key={member.physicalProjectKey}
+                className="space-y-3 rounded-lg border border-border/50 p-3"
+              >
+                <div className="flex min-w-0 items-center gap-2">
+                  <ServerIcon className="size-3.5 shrink-0 text-muted-foreground" />
+                  <span className="min-w-0 truncate text-sm font-medium text-foreground">
+                    {member.environmentLabel ?? "Current environment"}
+                  </span>
+                  <span className="ms-auto shrink-0 text-xs text-muted-foreground">
+                    {threadCount === 1 ? "1 thread" : `${threadCount} threads`}
+                  </span>
+                  {group.memberProjects.length > 1 ? (
+                    <Button
+                      size="icon-xs"
+                      variant="ghost"
+                      className="shrink-0 text-muted-foreground hover:text-destructive-foreground"
+                      aria-label={`Remove checkout ${member.workspaceRoot}`}
+                      onClick={() => void removeMembers([member])}
+                    >
+                      <Trash2Icon className="size-3.5" />
+                    </Button>
+                  ) : null}
+                </div>
+                <div className="flex min-w-0 items-center gap-1.5">
+                  <FolderIcon className="size-3.5 shrink-0 text-muted-foreground/70" />
+                  <span className="min-w-0 truncate font-mono text-xs text-muted-foreground">
+                    {member.workspaceRoot}
+                  </span>
+                  <Button
+                    size="icon-xs"
+                    variant="ghost"
+                    className="size-4 shrink-0 rounded-sm"
+                    aria-label="Copy project path"
+                    onClick={() =>
+                      copyPathToClipboard(member.workspaceRoot, { path: member.workspaceRoot })
+                    }
+                  >
+                    <CopyIcon className="size-3" />
+                  </Button>
+                </div>
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <label className="grid min-w-0 gap-1.5">
+                    <span className="text-xs font-medium text-muted-foreground">Name</span>
+                    <Input
+                      key={`${member.physicalProjectKey}:${member.title}`}
+                      aria-label={`Project name in ${member.environmentLabel ?? "current environment"}`}
+                      defaultValue={member.title}
+                      onBlur={(event) => {
+                        void renameMember(member, event.currentTarget.value);
+                      }}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter") event.currentTarget.blur();
+                      }}
+                    />
+                  </label>
+                  <label className="grid min-w-0 gap-1.5">
+                    <span className="text-xs font-medium text-muted-foreground">Grouping rule</span>
+                    <Select
+                      value={groupingOverride}
+                      onValueChange={(value) => {
+                        if (
+                          value === "inherit" ||
+                          value === "repository" ||
+                          value === "repository_path" ||
+                          value === "separate"
+                        ) {
+                          updateGroupingPreference(member, value);
+                        }
+                      }}
+                    >
+                      <SelectTrigger
+                        className="w-full"
+                        aria-label={`Grouping rule for ${member.environmentLabel ?? "current environment"}`}
+                      >
+                        <SelectValue>
+                          {groupingOverride === "inherit"
+                            ? `Default (${PROJECT_GROUPING_MODE_LABELS[projectGroupingSettings.sidebarProjectGroupingMode]})`
+                            : PROJECT_GROUPING_MODE_LABELS[groupingOverride]}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectPopup align="start" alignItemWithTrigger={false}>
+                        <SelectItem hideIndicator value="inherit">
+                          Use global default
+                        </SelectItem>
+                        <SelectItem hideIndicator value="repository">
+                          {PROJECT_GROUPING_MODE_LABELS.repository}
+                        </SelectItem>
+                        <SelectItem hideIndicator value="repository_path">
+                          {PROJECT_GROUPING_MODE_LABELS.repository_path}
+                        </SelectItem>
+                        <SelectItem hideIndicator value="separate">
+                          {PROJECT_GROUPING_MODE_LABELS.separate}
+                        </SelectItem>
+                      </SelectPopup>
+                    </Select>
+                  </label>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </SettingsSection>
+
+      <SettingsSection title="Danger">
+        <SettingsRow
+          title={
+            group.memberProjects.length > 1 ? "Remove this project everywhere" : "Remove project"
+          }
+          description={
+            group.memberProjects.length > 1
+              ? `Deletes all ${group.memberProjects.length} checkout entries and their threads on every machine. Files on disk are not touched.`
+              : "Deletes the project entry and its threads. Files on disk are not touched."
+          }
+          control={
+            <Button
+              variant="destructive-outline"
+              onClick={() => void removeMembers(group.memberProjects)}
+            >
+              <Trash2Icon />
+              {group.memberProjects.length > 1 ? "Remove all entries" : "Remove project"}
+            </Button>
+          }
+        />
+      </SettingsSection>
+
+      <ProjectScriptEditorDialog
+        request={editorRequest}
+        scripts={scripts}
+        onSubmit={submitScript}
+        onDelete={deleteScript}
+        onClose={() => setEditorRequest(null)}
+      />
+    </SettingsPageContainer>
+  );
+}
diff --git a/apps/web/src/components/settings/SettingsSidebarNav.tsx b/apps/web/src/components/settings/SettingsSidebarNav.tsx
index 7efe6101596..0f40e388916 100644
--- a/apps/web/src/components/settings/SettingsSidebarNav.tsx
+++ b/apps/web/src/components/settings/SettingsSidebarNav.tsx
@@ -11,6 +11,7 @@ import {
   ArchiveIcon,
   ArrowLeftIcon,
   BotIcon,
+  FolderIcon,
   GitBranchIcon,
   KeyboardIcon,
   Link2Icon,
@@ -48,6 +49,7 @@ const SETTINGS_SECTION_ICONS: Readonly<
   "/settings/general": Settings2Icon,
   "/settings/appearance": PaletteIcon,
   "/settings/keybindings": KeyboardIcon,
+  "/settings/projects": FolderIcon,
   "/settings/providers": BotIcon,
   "/settings/source-control": GitBranchIcon,
   "/settings/connections": Link2Icon,
@@ -279,7 +281,9 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
                 ))
               : SETTINGS_NAV_ITEMS.map((item) => {
                   const Icon = item.icon;
-                  const isActive = pathname === item.to;
+                  // Prefix match keeps the section active on nested routes
+                  // like /settings/projects/$projectKey.
+                  const isActive = pathname === item.to || pathname.startsWith(`${item.to}/`);
                   return (
                     <SidebarMenuItem key={item.to}>
                       <SidebarMenuButton
diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts
index 34fd4602f78..fb40d9e5641 100644
--- a/apps/web/src/components/settings/settingsSearch.ts
+++ b/apps/web/src/components/settings/settingsSearch.ts
@@ -2,6 +2,7 @@ export type SettingsPath =
   | "/settings/general"
   | "/settings/appearance"
   | "/settings/keybindings"
+  | "/settings/projects"
   | "/settings/providers"
   | "/settings/source-control"
   | "/settings/connections"
@@ -22,6 +23,7 @@ export const SETTINGS_SECTION_LABELS: Readonly<Record<SettingsPath, string>> = {
   "/settings/general": "General",
   "/settings/appearance": "Appearance",
   "/settings/keybindings": "Keybindings",
+  "/settings/projects": "Projects",
   "/settings/providers": "Providers",
   "/settings/source-control": "Source Control",
   "/settings/connections": "Connections",
@@ -174,6 +176,26 @@ export const SETTINGS_SEARCH_ITEMS = [
     title: "Keybindings",
     to: "/settings/keybindings",
   },
+  {
+    id: "projects",
+    title: "Projects",
+    to: "/settings/projects",
+  },
+  {
+    id: "project-default-model",
+    title: "Project default model",
+    to: "/settings/projects",
+  },
+  {
+    id: "project-scripts",
+    title: "Project scripts",
+    to: "/settings/projects",
+  },
+  {
+    id: "project-checkouts",
+    title: "Project checkouts",
+    to: "/settings/projects",
+  },
   {
     id: "providers",
     title: "Providers",
diff --git a/apps/web/src/hooks/useT3ProjectFileScripts.ts b/apps/web/src/hooks/useT3ProjectFileScripts.ts
index c6ac6316fde..25d015b9468 100644
--- a/apps/web/src/hooks/useT3ProjectFileScripts.ts
+++ b/apps/web/src/hooks/useT3ProjectFileScripts.ts
@@ -14,6 +14,41 @@ const decodeT3ProjectFile = Schema.decodeExit(T3ProjectFileFromJson);
 
 const NO_SCRIPTS: ReadonlyArray<T3ProjectFileScript> = [];
 
+export interface T3ProjectFileState {
+  /**
+   * - `valid`: t3.json exists and decoded.
+   * - `invalid`: t3.json exists but fails to decode (the server then ignores
+   *   the whole file, including `iconPath` and every script).
+   * - `missing`: no readable t3.json at the workspace root.
+   * - `loading`: the file query has not settled yet.
+   */
+  status: "loading" | "missing" | "invalid" | "valid";
+  scripts: ReadonlyArray<T3ProjectFileScript>;
+}
+
+/**
+ * Decoded state of the project's checked-in `t3.json`, including whether the
+ * file exists but is broken — which the runtime otherwise swallows silently.
+ */
+export function useT3ProjectFileState(
+  environmentId: EnvironmentId,
+  cwd: string | null,
+): T3ProjectFileState {
+  const query = useProjectFileQuery(environmentId, cwd ?? "", T3_PROJECT_FILE_NAME, cwd !== null);
+  const contents = query.data && !query.data.truncated ? query.data.contents : null;
+  const isPending = query.isPending;
+  return useMemo(() => {
+    if (contents === null) {
+      return { status: isPending ? "loading" : "missing", scripts: NO_SCRIPTS } as const;
+    }
+    const decoded = decodeT3ProjectFile(contents);
+    if (Exit.isFailure(decoded)) {
+      return { status: "invalid", scripts: NO_SCRIPTS } as const;
+    }
+    return { status: "valid", scripts: decoded.value.scripts ?? NO_SCRIPTS } as const;
+  }, [contents, isPending]);
+}
+
 /**
  * Scripts declared in the project's checked-in `t3.json`, offered in the
  * scripts menu for import. Missing, truncated, or invalid files resolve to
@@ -23,12 +58,5 @@ export function useT3ProjectFileScripts(
   environmentId: EnvironmentId,
   cwd: string | null,
 ): ReadonlyArray<T3ProjectFileScript> {
-  const query = useProjectFileQuery(environmentId, cwd ?? "", T3_PROJECT_FILE_NAME, cwd !== null);
-  const contents = query.data && !query.data.truncated ? query.data.contents : null;
-  return useMemo(() => {
-    if (contents === null) return NO_SCRIPTS;
-    const decoded = decodeT3ProjectFile(contents);
-    if (Exit.isFailure(decoded)) return NO_SCRIPTS;
-    return decoded.value.scripts ?? NO_SCRIPTS;
-  }, [contents]);
+  return useT3ProjectFileState(environmentId, cwd).scripts;
 }
diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
index eb31a8de91c..ac7f4111157 100644
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -17,6 +17,7 @@ import { Route as ChatRouteImport } from './routes/_chat'
 import { Route as ChatIndexRouteImport } from './routes/_chat.index'
 import { Route as SettingsSourceControlRouteImport } from './routes/settings.source-control'
 import { Route as SettingsProvidersRouteImport } from './routes/settings.providers'
+import { Route as SettingsProjectsRouteImport } from './routes/settings.projects'
 import { Route as SettingsKeybindingsRouteImport } from './routes/settings.keybindings'
 import { Route as SettingsGeneralRouteImport } from './routes/settings.general'
 import { Route as SettingsDiagnosticsRouteImport } from './routes/settings.diagnostics'
@@ -24,6 +25,7 @@ import { Route as SettingsConnectionsRouteImport } from './routes/settings.conne
 import { Route as SettingsArchivedRouteImport } from './routes/settings.archived'
 import { Route as SettingsAppearanceRouteImport } from './routes/settings.appearance'
 import { Route as ConnectCallbackRouteImport } from './routes/connect_.callback'
+import { Route as SettingsProjectsProjectKeyRouteImport } from './routes/settings.projects_.$projectKey'
 import { Route as ChatDraftDraftIdRouteImport } from './routes/_chat.draft.$draftId'
 import { Route as ChatEnvironmentIdThreadIdRouteImport } from './routes/_chat.$environmentId.$threadId'
 
@@ -66,6 +68,11 @@ const SettingsProvidersRoute = SettingsProvidersRouteImport.update({
   path: '/providers',
   getParentRoute: () => SettingsRoute,
 } as any)
+const SettingsProjectsRoute = SettingsProjectsRouteImport.update({
+  id: '/projects',
+  path: '/projects',
+  getParentRoute: () => SettingsRoute,
+} as any)
 const SettingsKeybindingsRoute = SettingsKeybindingsRouteImport.update({
   id: '/keybindings',
   path: '/keybindings',
@@ -101,6 +108,12 @@ const ConnectCallbackRoute = ConnectCallbackRouteImport.update({
   path: '/connect/callback',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SettingsProjectsProjectKeyRoute =
+  SettingsProjectsProjectKeyRouteImport.update({
+    id: '/projects_/$projectKey',
+    path: '/projects/$projectKey',
+    getParentRoute: () => SettingsRoute,
+  } as any)
 const ChatDraftDraftIdRoute = ChatDraftDraftIdRouteImport.update({
   id: '/draft/$draftId',
   path: '/draft/$draftId',
@@ -126,10 +139,12 @@ export interface FileRoutesByFullPath {
   '/settings/diagnostics': typeof SettingsDiagnosticsRoute
   '/settings/general': typeof SettingsGeneralRoute
   '/settings/keybindings': typeof SettingsKeybindingsRoute
+  '/settings/projects': typeof SettingsProjectsRoute
   '/settings/providers': typeof SettingsProvidersRoute
   '/settings/source-control': typeof SettingsSourceControlRoute
   '/$environmentId/$threadId': typeof ChatEnvironmentIdThreadIdRoute
   '/draft/$draftId': typeof ChatDraftDraftIdRoute
+  '/settings/projects/$projectKey': typeof SettingsProjectsProjectKeyRoute
 }
 export interface FileRoutesByTo {
   '/connect': typeof ConnectRoute
@@ -143,11 +158,13 @@ export interface FileRoutesByTo {
   '/settings/diagnostics': typeof SettingsDiagnosticsRoute
   '/settings/general': typeof SettingsGeneralRoute
   '/settings/keybindings': typeof SettingsKeybindingsRoute
+  '/settings/projects': typeof SettingsProjectsRoute
   '/settings/providers': typeof SettingsProvidersRoute
   '/settings/source-control': typeof SettingsSourceControlRoute
   '/': typeof ChatIndexRoute
   '/$environmentId/$threadId': typeof ChatEnvironmentIdThreadIdRoute
   '/draft/$draftId': typeof ChatDraftDraftIdRoute
+  '/settings/projects/$projectKey': typeof SettingsProjectsProjectKeyRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -163,11 +180,13 @@ export interface FileRoutesById {
   '/settings/diagnostics': typeof SettingsDiagnosticsRoute
   '/settings/general': typeof SettingsGeneralRoute
   '/settings/keybindings': typeof SettingsKeybindingsRoute
+  '/settings/projects': typeof SettingsProjectsRoute
   '/settings/providers': typeof SettingsProvidersRoute
   '/settings/source-control': typeof SettingsSourceControlRoute
   '/_chat/': typeof ChatIndexRoute
   '/_chat/$environmentId/$threadId': typeof ChatEnvironmentIdThreadIdRoute
   '/_chat/draft/$draftId': typeof ChatDraftDraftIdRoute
+  '/settings/projects_/$projectKey': typeof SettingsProjectsProjectKeyRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -184,10 +203,12 @@ export interface FileRouteTypes {
     | '/settings/diagnostics'
     | '/settings/general'
     | '/settings/keybindings'
+    | '/settings/projects'
     | '/settings/providers'
     | '/settings/source-control'
     | '/$environmentId/$threadId'
     | '/draft/$draftId'
+    | '/settings/projects/$projectKey'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/connect'
@@ -201,11 +222,13 @@ export interface FileRouteTypes {
     | '/settings/diagnostics'
     | '/settings/general'
     | '/settings/keybindings'
+    | '/settings/projects'
     | '/settings/providers'
     | '/settings/source-control'
     | '/'
     | '/$environmentId/$threadId'
     | '/draft/$draftId'
+    | '/settings/projects/$projectKey'
   id:
     | '__root__'
     | '/_chat'
@@ -220,11 +243,13 @@ export interface FileRouteTypes {
     | '/settings/diagnostics'
     | '/settings/general'
     | '/settings/keybindings'
+    | '/settings/projects'
     | '/settings/providers'
     | '/settings/source-control'
     | '/_chat/'
     | '/_chat/$environmentId/$threadId'
     | '/_chat/draft/$draftId'
+    | '/settings/projects_/$projectKey'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -294,6 +319,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsProvidersRouteImport
       parentRoute: typeof SettingsRoute
     }
+    '/settings/projects': {
+      id: '/settings/projects'
+      path: '/projects'
+      fullPath: '/settings/projects'
+      preLoaderRoute: typeof SettingsProjectsRouteImport
+      parentRoute: typeof SettingsRoute
+    }
     '/settings/keybindings': {
       id: '/settings/keybindings'
       path: '/keybindings'
@@ -343,6 +375,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ConnectCallbackRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/settings/projects_/$projectKey': {
+      id: '/settings/projects_/$projectKey'
+      path: '/projects/$projectKey'
+      fullPath: '/settings/projects/$projectKey'
+      preLoaderRoute: typeof SettingsProjectsProjectKeyRouteImport
+      parentRoute: typeof SettingsRoute
+    }
     '/_chat/draft/$draftId': {
       id: '/_chat/draft/$draftId'
       path: '/draft/$draftId'
@@ -381,8 +420,10 @@ interface SettingsRouteChildren {
   SettingsDiagnosticsRoute: typeof SettingsDiagnosticsRoute
   SettingsGeneralRoute: typeof SettingsGeneralRoute
   SettingsKeybindingsRoute: typeof SettingsKeybindingsRoute
+  SettingsProjectsRoute: typeof SettingsProjectsRoute
   SettingsProvidersRoute: typeof SettingsProvidersRoute
   SettingsSourceControlRoute: typeof SettingsSourceControlRoute
+  SettingsProjectsProjectKeyRoute: typeof SettingsProjectsProjectKeyRoute
 }
 
 const SettingsRouteChildren: SettingsRouteChildren = {
@@ -392,8 +433,10 @@ const SettingsRouteChildren: SettingsRouteChildren = {
   SettingsDiagnosticsRoute: SettingsDiagnosticsRoute,
   SettingsGeneralRoute: SettingsGeneralRoute,
   SettingsKeybindingsRoute: SettingsKeybindingsRoute,
+  SettingsProjectsRoute: SettingsProjectsRoute,
   SettingsProvidersRoute: SettingsProvidersRoute,
   SettingsSourceControlRoute: SettingsSourceControlRoute,
+  SettingsProjectsProjectKeyRoute: SettingsProjectsProjectKeyRoute,
 }
 
 const SettingsRouteWithChildren = SettingsRoute._addFileChildren(
diff --git a/apps/web/src/routes/settings.projects.tsx b/apps/web/src/routes/settings.projects.tsx
new file mode 100644
index 00000000000..c8dab231145
--- /dev/null
+++ b/apps/web/src/routes/settings.projects.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { ProjectSettingsPanel } from "../components/settings/ProjectSettingsPanel";
+
+function SettingsProjectsRoute() {
+  return <ProjectSettingsPanel selectedProjectKey={null} />;
+}
+
+export const Route = createFileRoute("/settings/projects")({
+  component: SettingsProjectsRoute,
+});
diff --git a/apps/web/src/routes/settings.projects_.$projectKey.tsx b/apps/web/src/routes/settings.projects_.$projectKey.tsx
new file mode 100644
index 00000000000..477ab0c5ebd
--- /dev/null
+++ b/apps/web/src/routes/settings.projects_.$projectKey.tsx
@@ -0,0 +1,12 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { ProjectSettingsPanel } from "../components/settings/ProjectSettingsPanel";
+
+function SettingsProjectDetailRoute() {
+  const { projectKey } = Route.useParams();
+  return <ProjectSettingsPanel selectedProjectKey={projectKey} />;
+}
+
+export const Route = createFileRoute("/settings/projects_/$projectKey")({
+  component: SettingsProjectDetailRoute,
+});