feat(renderer): polish thread, home, and welcome chrome

- add rounded/transparent tabs and a header-style Browser MCP indicator
- move Browser MCP toggles into the draft composer and make the active-thread chip read-only
- refresh project switching, home, and welcome presentation styling
- update thread view tests for the new header behavior

Author: SDSLeon

src/renderer/components/common/LightballTabs.tsx

@@ -29,6 +29,11 @@ export function LightballTabs<K extends string>(props: {
   equalWidth?: boolean;
   /** Delay text-color flip to match ball arrival (~80ms). */
   delayActiveText?: boolean;
+  /** Container/tab corner shape. Defaults to a full pill. */
+  shape?: "pill" | "rounded";
+  /** Drop the container background and border; useful when embedding into
+   *  a parent surface that already provides chrome. */
+  transparent?: boolean;
 }) {
   const {
     tabs,
@@ -38,7 +43,14 @@ export function LightballTabs<K extends string>(props: {
     className,
     equalWidth = false,
     delayActiveText = false,
+    shape = "pill",
+    transparent = false,
   } = props;
+  const containerRadiusClass = shape === "rounded" ? "rounded-xl" : "rounded-full";
+  const tabRadiusClass = shape === "rounded" ? "rounded-lg" : "rounded-full";
+  const containerChromeClass = transparent
+    ? ""
+    : "border border-border/15 bg-surface-tertiary/40 backdrop-blur-md";
 
   const listRef = useRef<HTMLDivElement>(null);
   const buttonRefs = useRef<Partial<Record<K, HTMLButtonElement | null>>>({});
@@ -103,7 +115,7 @@ export function LightballTabs<K extends string>(props: {
       role="tablist"
       aria-label={ariaLabel}
       onKeyDown={handleKey}
-      className={`relative inline-flex h-7 items-center rounded-full border border-border/15 bg-surface-tertiary/40 p-0.5 backdrop-blur-md ${className ?? ""}`}
+      className={`relative inline-flex h-7 items-center ${containerRadiusClass} ${containerChromeClass} p-0.5 ${className ?? ""}`}
     >
       <FlyingLightball
         containerRef={listRef}
@@ -128,7 +140,7 @@ export function LightballTabs<K extends string>(props: {
               tabIndex={isActive ? 0 : -1}
               disabled={tab.disabled}
               onClick={() => selectTab(tab.id)}
-              className={`relative ${equalWidth ? "flex-1" : ""} flex h-full items-center justify-center gap-1.5 rounded-full px-3 text-[11px] font-semibold tracking-tight outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-focus/50 ${
+              className={`relative ${equalWidth ? "flex-1" : ""} flex h-full items-center justify-center gap-1.5 ${tabRadiusClass} px-3 text-[11px] font-semibold tracking-tight outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-focus/50 ${
                 litText ? "text-foreground" : "text-muted/60"
               }`}
             >

src/renderer/components/composer/AttachmentBar.tsx

@@ -1,11 +1,38 @@
 import type { ReactNode } from "react";
+import { Tooltip } from "@heroui/react";
 import { Globe, X } from "lucide-react";
 import { getEntryIconUrl } from "@/renderer/components/common/fileIcons";
 import { toLocalFileUrl } from "@/shared/promptContent";
 import type { Attachment } from "./useAttachments";
 
-export function BrowserChip(props: { onRemove?: (() => void) | undefined; title?: string }) {
-  const { onRemove, title = "Browser MCP enabled for this thread" } = props;
+export function BrowserChip(props: {
+  onRemove?: (() => void) | undefined;
+  title?: string;
+  variant?: "chip" | "header";
+}) {
+  const { onRemove, title = "Browser MCP enabled for this thread", variant = "chip" } = props;
+  if (variant === "header") {
+    // Same structure as the other header buttons (CircleCheck / ArrowRightLeft
+    // / Bug / X) so the indicator slots into the row without alignment drift.
+    // Non-interactive — mid-thread browserMcp changes can't reconfigure the
+    // running session — but rendering as <button> keeps it consistent with the
+    // sibling status icon, which is also a no-op button.
+    return (
+      <Tooltip delay={0}>
+        <Tooltip.Trigger>
+          <button
+            type="button"
+            className="lightcode-overlay-header__controls shrink-0 rounded p-1 text-muted/60 transition-colors hover:bg-white/[0.06] hover:text-foreground"
+            aria-label={title}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Globe className="size-3.5" aria-hidden="true" />
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Content>{title}</Tooltip.Content>
+      </Tooltip>
+    );
+  }
   return (
     <div
       className="lightcode-attachment-chip lightcode-browser-chip"

src/renderer/components/thread/PresentationModeTabs.tsx

@@ -40,6 +40,8 @@ export function PresentationModeTabs(props: PresentationModeTabsProps) {
         className="w-[140px]"
         equalWidth
         delayActiveText
+        shape="rounded"
+        transparent
       />
     </div>
   );

src/renderer/components/thread/ProjectSwitchMenu.tsx

@@ -1,20 +1,22 @@
 import { startTransition } from "react";
-import { ChevronDown, FolderOpen, Monitor } from "lucide-react";
+import { ChevronDown, FolderOpen, House, Monitor } from "lucide-react";
 import { Dropdown, Label } from "@heroui/react";
 import { useShallow } from "zustand/shallow";
 import type { Project } from "@/shared/contracts";
+import { HOME_PROJECT_NAME, isHomeProject, isHomeProjectId } from "@/shared/homeScope";
 import { makeDraftPaneId } from "@/shared/paneId";
 import { useAppStore } from "@/renderer/state/appStore";
 import { TuxIcon } from "@/renderer/components/common/TuxIcon";
 
-function LocationIcon(props: { kind: Project["location"]["kind"] }) {
+function LocationIcon(props: { kind: Project["location"]["kind"]; className?: string }) {
+  const className = `${props.className ?? "size-4"} shrink-0 text-muted`;
   if (props.kind === "wsl") {
-    return <TuxIcon className="size-4 shrink-0 text-muted" />;
+    return <TuxIcon className={className} />;
   }
   if (props.kind === "windows") {
-    return <Monitor className="size-4 shrink-0 text-muted" />;
+    return <Monitor className={className} />;
   }
-  return <FolderOpen className="size-4 shrink-0 text-muted" />;
+  return <FolderOpen className={className} />;
 }
 
 export function ProjectSwitchMenu(props: {
@@ -24,12 +26,24 @@ export function ProjectSwitchMenu(props: {
   paneId?: string;
 }) {
   const { currentProjectId, variant, paneId } = props;
-  const projects = useAppStore(useShallow((state) => state.projects.filter((p) => !p.disabled)));
+  // Show every selectable project. Home is intentionally stored with
+  // `disabled: true` as an internal marker (it's not a user-disabled
+  // project), so we let it through the filter and only exclude
+  // user-disabled regular projects.
+  const projects = useAppStore(
+    useShallow((state) => state.projects.filter((p) => isHomeProject(p) || !p.disabled)),
+  );
   const openDraft = useAppStore((state) => state.openDraft);
   const replacePaneId = useAppStore((state) => state.replacePaneId);
 
   const current = projects.find((p) => p.id === currentProjectId);
-  const label = current?.name ?? "Select project";
+  const isHomeCurrent = isHomeProjectId(currentProjectId);
+  const label = isHomeCurrent ? HOME_PROJECT_NAME : (current?.name ?? "Select project");
+  const triggerIcon = isHomeCurrent ? (
+    <House className="size-3.5 shrink-0 text-muted" />
+  ) : current ? (
+    <LocationIcon kind={current.location.kind} className="size-3.5" />
+  ) : null;
   const isDisabled = projects.length <= 1;
 
   function handleSelect(nextProjectId: string) {
@@ -51,12 +65,20 @@ export function ProjectSwitchMenu(props: {
       onAction={(key) => handleSelect(String(key))}
       className="lightcode-menu min-w-56"
     >
-      {projects.map((project) => (
-        <Dropdown.Item key={project.id} id={project.id} textValue={project.name}>
-          <LocationIcon kind={project.location.kind} />
-          <Label>{project.name}</Label>
-        </Dropdown.Item>
-      ))}
+      {projects.map((project) => {
+        const isHome = isHomeProject(project);
+        const itemLabel = isHome ? HOME_PROJECT_NAME : project.name;
+        return (
+          <Dropdown.Item key={project.id} id={project.id} textValue={itemLabel}>
+            {isHome ? (
+              <House className="size-4 shrink-0 text-muted" />
+            ) : (
+              <LocationIcon kind={project.location.kind} />
+            )}
+            <Label>{itemLabel}</Label>
+          </Dropdown.Item>
+        );
+      })}
     </Dropdown.Menu>
   );
 
@@ -87,6 +109,7 @@ export function ProjectSwitchMenu(props: {
         isDisabled={isDisabled}
         className="group inline-flex min-w-0 max-w-full items-center gap-1 rounded px-1 py-0.5 text-sm leading-tight text-muted/60 outline-none transition-colors hover:bg-white/[0.04] hover:text-foreground focus-visible:bg-white/[0.04] disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-muted/60"
       >
+        {triggerIcon}
         <span className="min-w-0 truncate">{label}</span>
         {!isDisabled ? (
           <ChevronDown className="size-3 shrink-0 opacity-60 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100" />

src/renderer/components/thread/ThreadComposerSection.tsx

@@ -18,7 +18,6 @@ import {
   MentionInput,
   useAttachments,
 } from "../composer";
-import { getBrowserMcpScope } from "../composer/browserMcpScope";
 import type { MentionInputHandle } from "../composer";
 import { flattenSegments } from "../composer/serializeMentions";
 import { getComposerControls } from "../providers";
@@ -332,8 +331,11 @@ function ThreadComposerSectionInner(props: ThreadComposerSectionProps & { thread
   const presentationMode =
     thread.presentationMode ?? agentStatus?.capabilities.presentationMode ?? "terminal";
   const usesTerminalPresentation = presentationMode === "terminal";
-  const browserMcpScope = getBrowserMcpScope(thread.agentKind, presentationMode);
-  const browserMcpToggleableHere = browserMcpScope === "always";
+  // Browser MCP is bound at session-create time for every provider, so a
+  // mid-thread toggle would not actually attach (or detach) the MCP server in
+  // the running agent process. The toggle is hidden in the active-thread
+  // composer; users set it in the draft composer before launch.
+  const browserMcpToggleableHere = false;
   const availableCommands = resolveAvailableSlashCommands(
     thread.slashCommands,
     agentStatus?.capabilities.slashCommands,

src/renderer/components/thread/ThreadDraftChrome.tsx

@@ -99,12 +99,7 @@ export function ThreadDraftDropIndicators(props: {
   );
 }
 
-export function ThreadDraftHero(props: {
-  compact?: boolean | undefined;
-  projectId: string;
-  scopeLabel?: string | undefined;
-  paneId?: string | undefined;
-}) {
+export function ThreadDraftHero(props: { compact?: boolean | undefined }) {
   return (
     <div className="flex flex-1 flex-col items-center justify-center">
       <div className="w-full max-w-[920px] overflow-visible pb-3 text-center">
@@ -115,21 +110,6 @@ export function ThreadDraftHero(props: {
             Lightcode
           </span>
         </h1>
-        <div
-          className={`mt-1.5 flex justify-center ${props.compact ? "text-[clamp(0.6875rem,1.05vw,0.8125rem)]" : "text-[clamp(0.75rem,1.35vw,0.9375rem)]"}`}
-        >
-          {props.scopeLabel ? (
-            <span className="min-w-0 truncate pb-[0.08em] leading-snug font-medium tracking-normal text-transparent [background-image:linear-gradient(135deg,var(--muted)_0%,color-mix(in_oklab,var(--accent)_30%,var(--muted))_100%)] [background-size:100%_100%] bg-clip-text font-mono">
-              {props.scopeLabel}
-            </span>
-          ) : (
-            <ProjectSwitchMenu
-              currentProjectId={props.projectId}
-              variant="hero"
-              {...(props.paneId ? { paneId: props.paneId } : {})}
-            />
-          )}
-        </div>
       </div>
     </div>
   );

src/renderer/components/thread/ThreadDraftView.tsx

@@ -35,6 +35,7 @@ import {
 } from "./threadDraftViewHelpers";
 import { friendlyError } from "@/shared/messages";
 import { PresentationModeTabs } from "./PresentationModeTabs";
+import { ProjectSwitchMenu } from "./ProjectSwitchMenu";
 import { ThreadDraftComposerArea, type DraftStartInput } from "./ThreadDraftComposerArea";
 import type { ComposerControl } from "./ThreadComposer";
 import { AgentDiscoveryScreen } from "./AgentDiscoveryScreen";
@@ -803,6 +804,42 @@ export function ThreadDraftView(props: {
     props.paneAlign === "right" ? "ml-auto" : props.paneAlign === "left" ? "mr-auto" : "mx-auto";
   const paddingClass = "px-2";
 
+  const handlePresentationChange = (next: ThreadPresentationMode) => {
+    // If the active provider can't serve this surface, swap to another
+    // installed provider that can — the provider-switch effect will then
+    // reload the per-provider config snapshot.
+    if (!supportedPresentationModes.includes(next)) {
+      const fallback = installedAgents.find((agent) => {
+        const modes = agent.capabilities.presentationModes ?? [agent.capabilities.presentationMode];
+        return modes.includes(next);
+      });
+      if (!fallback) return;
+      setPresentationMode(next);
+      setAgentKind(fallback.kind);
+      return;
+    }
+    setPresentationMode(next);
+    // Drop config values that the new presentation surface doesn't
+    // support (e.g. Codex plan mode is ACP-only).
+    const normalizer = effectiveAgentKind ? getConfigNormalizer(effectiveAgentKind) : undefined;
+    if (!normalizer) return;
+    const patch = normalizer({
+      capabilities: capabilitiesForPresentation(selectedAgent.capabilities, next),
+      config: {
+        model,
+        effort,
+        ...(contextSize ? { contextSize } : {}),
+        ...(fast ? { fast } : {}),
+        ...(thinking ? { thinking } : {}),
+        mode,
+        approvalPolicy,
+        sandboxMode,
+      },
+      presentationMode: next,
+    });
+    if (Object.keys(patch).length > 0) onConfigPatch(patch);
+  };
+
   return (
     <div
       ref={props.droppableRef}
@@ -821,64 +858,26 @@ export function ThreadDraftView(props: {
         />
       )}
       <div
-        className={`${props.compact ? alignClass : "mx-auto"} relative flex h-full min-h-0 w-full max-w-[1040px] flex-col ${paddingClass} px-3 pb-2 ${props.compact ? "" : "pt-2"}`}
+        className={`${props.compact ? alignClass : "mx-auto justify-center"} relative flex h-full min-h-0 w-full max-w-[1040px] flex-col ${paddingClass} px-3 pb-2 ${props.compact ? "" : "pt-2"}`}
       >
         <ThreadDraftDropIndicators dropIndicator={props.dropIndicator} />
-        <ThreadDraftHero
-          compact={props.compact}
-          projectId={project.id}
-          {...(scopeLabel ? { scopeLabel } : {})}
-          {...(props.paneId ? { paneId: props.paneId } : {})}
-        />
-
-        <PresentationModeTabs
-          presentationMode={presentationMode}
-          supportsTerminal={supportsTerminalMode}
-          supportsGui={supportsGuiMode}
-          className={`${props.compact ? alignClass : "mx-auto"} mb-1 w-full max-w-[920px]`}
-          onChange={(next) => {
-            // If the active provider can't serve this surface, swap to
-            // another installed provider that can — the provider-switch
-            // effect will then reload the per-provider config snapshot.
-            if (!supportedPresentationModes.includes(next)) {
-              const fallback = installedAgents.find((agent) => {
-                const modes = agent.capabilities.presentationModes ?? [
-                  agent.capabilities.presentationMode,
-                ];
-                return modes.includes(next);
-              });
-              if (!fallback) return;
-              setPresentationMode(next);
-              setAgentKind(fallback.kind);
-              return;
-            }
-            setPresentationMode(next);
-            // Drop config values that the new presentation surface
-            // doesn't support (e.g. Codex plan mode is ACP-only).
-            const normalizer = effectiveAgentKind
-              ? getConfigNormalizer(effectiveAgentKind)
-              : undefined;
-            if (!normalizer) return;
-            const patch = normalizer({
-              capabilities: capabilitiesForPresentation(selectedAgent.capabilities, next),
-              config: {
-                model,
-                effort,
-                ...(contextSize ? { contextSize } : {}),
-                ...(fast ? { fast } : {}),
-                ...(thinking ? { thinking } : {}),
-                mode,
-                approvalPolicy,
-                sandboxMode,
-              },
-              presentationMode: next,
-            });
-            if (Object.keys(patch).length > 0) onConfigPatch(patch);
-          }}
-        />
+        {props.compact ? <ThreadDraftHero compact={props.compact} /> : null}
 
         {/* Composer at bottom */}
-        <div className={`${props.compact ? alignClass : "mx-auto"} w-full max-w-[920px]`}>
+        <div className={`${props.compact ? alignClass : "mx-auto"} w-full max-w-[720px]`}>
+          <div className="mb-1 flex items-center justify-between gap-2">
+            <ProjectSwitchMenu
+              currentProjectId={project.id}
+              variant="compact"
+              {...(props.paneId ? { paneId: props.paneId } : {})}
+            />
+            <PresentationModeTabs
+              presentationMode={presentationMode}
+              supportsTerminal={supportsTerminalMode}
+              supportsGui={supportsGuiMode}
+              onChange={handlePresentationChange}
+            />
+          </div>
           <ThreadDraftComposerArea
             project={project}
             {...(props.paneId ? { paneId: props.paneId } : {})}