Project-first dashboard: New-project creation + Projects menu + chrome cleanup (amicode#203)

packages/app/src/components/amicode-defaults-capsule.tsx

@@ -1,6 +1,7 @@
-import { Show, createEffect, createMemo, createSignal, onCleanup, type Accessor } from "solid-js"
+import { Show, batch, createEffect, createMemo, createSignal, onCleanup, type Accessor } from "solid-js"
 import { useModels } from "@/context/models"
 import { AmicodeDefaultModel } from "./amicode-default-model"
+import { announceChromeDropdown, chromeDropdownOpenId, clearChromeDropdown } from "@/utils/chrome-dropdown"
 import {
   hpAfterConnect,
   hpClickAction,
@@ -123,7 +124,15 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
   const close = () => {
     setOpen(false)
     setComputeOpen(false)
+    clearChromeDropdown("defaults")
   }
+  // amicode#203: one chrome dropdown at a time (see chrome-dropdown.ts).
+  createEffect(() => {
+    if (chromeDropdownOpenId() !== "defaults" && open()) {
+      setOpen(false)
+      setComputeOpen(false)
+    }
+  })
   const onDocPointer = (e: PointerEvent) => {
     if (root && !root.contains(e.target as Node)) {
       close()
@@ -138,7 +147,11 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
   }
   const openPopover = () => {
     if (open()) return
-    setOpen(true)
+    // batch: announce + open flag must land atomically (press-twice bug).
+    batch(() => {
+      announceChromeDropdown("defaults")
+      setOpen(true)
+    })
     document.addEventListener("pointerdown", onDocPointer, true)
     document.addEventListener("keydown", onDocKey, true)
   }
@@ -189,7 +202,7 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
       <button
         type="button"
         data-slot="amicode-defaults-face"
-        title="Session defaults — model & solver"
+        title="Defaults — model & solver, apply everywhere"
         aria-expanded={open()}
         onClick={toggle}
         style={{
@@ -222,7 +235,7 @@ export function AmicodeDefaultsCapsule(props: { compute?: AmicodeComputeControl
         <div
           data-slot="amicode-defaults-pop"
           role="dialog"
-          aria-label="Session defaults"
+          aria-label="Defaults"
           style={{
             position: "absolute",
             right: "0",

packages/app/src/components/dialog-new-project.tsx

@@ -0,0 +1,102 @@
+// amicode#203: New-project creation dialog. Name → slug preview; the server
+// owns the location default (~/AmicodeProjects) and the mkdir + best-effort
+// git init (POST /amicode/project). Inline, recoverable errors for collision /
+// unwritable; a non-blocking git notice is surfaced by the caller (onCreated).
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { useMutation } from "@tanstack/solid-query"
+import { createMemo, createSignal, Show } from "solid-js"
+import { ServerConnection } from "@/context/server"
+import { amicodePost } from "@/utils/amicode-fetch"
+import { projectNameToSlug } from "@/pages/home-projects"
+
+type CreateResult =
+  | { ok: true; path: string; slug: string; gitInitialized: boolean }
+  | { ok: false; error: string; message: string }
+
+export function DialogNewProject(props: {
+  server: ServerConnection.Any
+  onCreated: (result: { path: string; gitInitialized: boolean }) => void
+  onOpenExisting: () => void
+}) {
+  const dialog = useDialog()
+  const [name, setName] = createSignal("")
+  const [error, setError] = createSignal<string | undefined>()
+  const slug = createMemo(() => projectNameToSlug(name()))
+
+  const createMutation = useMutation(() => ({
+    mutationFn: async (): Promise<void> => {
+      setError(undefined)
+      const result = (await amicodePost(props.server, "/amicode/project", { name: name() }).catch(
+        () => undefined,
+      )) as CreateResult | undefined
+      if (!result) {
+        setError("Couldn't reach the server — try again.")
+        return
+      }
+      if (!result.ok) {
+        setError(result.message)
+        return
+      }
+      dialog.close()
+      props.onCreated({ path: result.path, gitInitialized: result.gitInitialized })
+    },
+  }))
+
+  function submit(e: SubmitEvent) {
+    e.preventDefault()
+    if (createMutation.isPending || !slug()) return
+    createMutation.mutate()
+  }
+
+  return (
+    <Dialog title="New project" class="w-full max-w-[460px] mx-auto">
+      <form onSubmit={submit} class="flex flex-col gap-5 p-6 pt-0">
+        <div class="flex flex-col gap-2">
+          <TextField
+            autofocus
+            type="text"
+            label="Project name"
+            placeholder="Rydberg MIS"
+            value={name()}
+            onChange={setName}
+          />
+          <Show
+            when={slug()}
+            fallback={<span class="text-12-regular text-text-weak">Creates a new folder in ~/AmicodeProjects.</span>}
+          >
+            <span class="text-12-regular text-text-weak">
+              Creates <span class="font-mono text-text-base">{slug()}</span> in ~/AmicodeProjects, with git for change
+              tracking.
+            </span>
+          </Show>
+        </div>
+
+        <Show when={error()}>
+          <div class="flex items-center gap-2" role="alert" aria-live="polite" data-slot="new-project-error">
+            <div class="size-1.5 rounded-full shrink-0 bg-icon-critical-base" />
+            <span class="text-12-regular text-text-weak">{error()}</span>
+          </div>
+        </Show>
+
+        <div class="flex items-center justify-between gap-3">
+          <button
+            type="button"
+            class="text-12-regular text-text-weak underline underline-offset-2 hover:text-text-base"
+            onClick={() => {
+              dialog.close()
+              props.onOpenExisting()
+            }}
+          >
+            Open existing folder instead…
+          </button>
+          <Button type="submit" disabled={!slug() || createMutation.isPending}>
+            {createMutation.isPending ? "Creating…" : "Create project"}
+          </Button>
+        </div>
+      </form>
+    </Dialog>
+  )
+}

packages/app/src/components/prompt-input.tsx

@@ -78,6 +78,7 @@ import { PromptDragOverlay } from "./prompt-input/drag-overlay"
 import { promptPlaceholder } from "./prompt-input/placeholder"
 import { useDirectoryPicker } from "./directory-picker"
 import { showToast } from "@/utils/toast"
+import { hiddenProjectWorktree } from "@/utils/amicode-hidden-project"
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
 import { useQueries } from "@tanstack/solid-query"
 import { useQueryOptions } from "@/context/server-sync"
@@ -1370,7 +1371,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   }))
 
   const newSession = () => props.variant === "new-session"
-  const projects = createMemo(() => layout.projects.list())
+  // amicode#203: hide the extension's scaffold project from the composer picker
+  // too (same filter as the dashboard). Only set in the amicode webview.
+  const projects = createMemo(() => {
+    const list = layout.projects.list()
+    const hidden = hiddenProjectWorktree()
+    return hidden ? list.filter((p) => p.worktree !== hidden) : list
+  })
   const projectForDirectory = (directory: string | undefined) => {
     if (!directory) return
     const key = pathKey(directory)
@@ -1428,7 +1435,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     trigger: {
       action: "prompt-project",
       icon: "folder",
-      label: selectedProject() ? displayName(selectedProject()!) : language.t("session.new.project.new"),
+      // amicode#203 (Kate): don't show the project name in the chat — the folder
+      // icon + chevron keep the switcher reachable without naming the project.
+      label: "",
       class: "max-w-[203px]",
       style: control(),
       onPress: () => setPicker("projectOpen", true),
@@ -2081,7 +2090,9 @@ function ComposerPickerTrigger(props: ComponentProps<"button"> & { state: Compos
       <Show when={local.state.icon}>
         {(icon) => <Icon name={icon()} size="small" class="shrink-0 text-v2-icon-icon-muted" />}
       </Show>
-      <span class="min-w-0 truncate leading-5">{local.state.label}</span>
+      <Show when={local.state.label}>
+        <span class="min-w-0 truncate leading-5">{local.state.label}</span>
+      </Show>
       <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
     </button>
   )

packages/app/src/components/status-popover-body.tsx

@@ -742,14 +742,19 @@ const amicodeHeaders = (conn: ServerConnection.Any) => {
 
 // The two shared tab triggers/contents — rendered inside each mount's own
 // <Tabs> so Kobalte's tabs context resolves normally.
-function AmicodeStatusTabTriggers(props: { state: AmicodeStatusTabsState }) {
+function AmicodeStatusTabTriggers(props: { state: AmicodeStatusTabsState; includeVaults?: boolean }) {
   const language = useLanguage()
   return (
     <>
-      <Tabs.Trigger value="vaults" data-slot="tab" class="text-12-regular">
-        {props.state.vaultsCount() > 0 ? `${props.state.vaultsCount()} ` : ""}
-        {language.t("status.popover.tab.vaults")}
-      </Tabs.Trigger>
+      {/* amicode#202: vaults moved to the native Armonia sidebar; the global
+          home-chrome mount passes includeVaults={false}. The session-view mount
+          keeps its vaults tab (default true). */}
+      <Show when={props.includeVaults ?? true}>
+        <Tabs.Trigger value="vaults" data-slot="tab" class="text-12-regular">
+          {props.state.vaultsCount() > 0 ? `${props.state.vaultsCount()} ` : ""}
+          {language.t("status.popover.tab.vaults")}
+        </Tabs.Trigger>
+      </Show>
       <Tabs.Trigger value="connections" data-slot="tab" class="text-12-regular">
         {props.state.connectionsCount() > 0 ? `${props.state.connectionsCount()} ` : ""}
         {language.t("status.popover.tab.connections")}
@@ -758,29 +763,40 @@ function AmicodeStatusTabTriggers(props: { state: AmicodeStatusTabsState }) {
   )
 }
 
-function AmicodeStatusTabContents(props: { state: AmicodeStatusTabsState }) {
+function AmicodeStatusTabContents(props: { state: AmicodeStatusTabsState; includeVaults?: boolean }) {
   const language = useLanguage()
   return (
     <>
-      <Tabs.Content value="vaults">
-        <div class="flex flex-col px-2 pb-2">
-          <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
-            <AmicodeVaultsTab
-              view={props.state.vaultsView()}
-              emptyLabel={language.t("dialog.vaults.empty")}
-              retryLabel={language.t("dialog.vaults.retry")}
-              onRetry={props.state.refetchVaults}
-            />
-            <Button variant="secondary" class="mt-3 self-start h-8 px-3 py-1.5" onClick={props.state.onManageVaults}>
-              {language.t("status.popover.action.manageVaults")}
-            </Button>
+      <Show when={props.includeVaults ?? true}>
+        <Tabs.Content value="vaults">
+          <div class="flex flex-col px-2 pb-2">
+            <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
+              <AmicodeVaultsTab
+                view={props.state.vaultsView()}
+                emptyLabel={language.t("dialog.vaults.empty")}
+                retryLabel={language.t("dialog.vaults.retry")}
+                onRetry={props.state.refetchVaults}
+              />
+              <Button variant="secondary" class="mt-3 self-start h-8 px-3 py-1.5" onClick={props.state.onManageVaults}>
+                {language.t("status.popover.action.manageVaults")}
+              </Button>
+            </div>
           </div>
-        </div>
-      </Tabs.Content>
+        </Tabs.Content>
+      </Show>
 
       <Tabs.Content value="connections">
-        <div class="flex flex-col px-2 pb-2">
-          <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
+        {/* amicode#203 (Kate): the header-less global mount uses a single flat
+            14px padding (matching the other chrome dropdowns) instead of the
+            tabbed mount's inset card (px-2 pb-2 + p-3 raised box). */}
+        <div
+          class={
+            (props.includeVaults ?? true)
+              ? "flex flex-col px-2 pb-2"
+              : "flex flex-col p-3.5"
+          }
+        >
+          <div class={(props.includeVaults ?? true) ? "flex flex-col p-3 bg-background-base rounded-sm min-h-14" : "flex flex-col min-h-14"}>
             <AmicodeConnectionsTab
               view={props.state.connectionsView()}
               labels={props.state.connectionsLabels()}
@@ -829,10 +845,9 @@ export function StatusPopoverGlobalBody(props: {
         defaultValue={GLOBAL_STATUS_DEFAULT_TAB}
         variant="alt"
       >
-        <Tabs.List data-slot="tablist" class="bg-transparent border-b-0 px-4 pt-2 pb-0 gap-4 h-10">
-          <AmicodeStatusTabTriggers state={amicodeTabs} />
-        </Tabs.List>
-        <AmicodeStatusTabContents state={amicodeTabs} />
+        {/* amicode#203 (Kate): no tab-header — Connections is the only surface
+            here now (vaults moved to the sidebar), so the label is redundant. */}
+        <AmicodeStatusTabContents state={amicodeTabs} includeVaults={false} />
       </Tabs>
     </div>
   )

packages/app/src/components/status-popover-model.test.ts

@@ -24,12 +24,13 @@ describe("statusTriggerVisibility", () => {
 })
 
 describe("global status surface (home chrome entry)", () => {
-  // amicode#174 AC1: the home-chrome entry opens the same Vaults + Connections
-  // surface the session popover hosts, with Connections pre-selected. The
-  // per-directory tabs (mcp/lsp/plugins) are NOT part of the global surface —
-  // home has no directory-scoped sync context.
-  test("global surface hosts exactly vaults + connections", () => {
-    expect([...GLOBAL_STATUS_TABS]).toEqual(["vaults", "connections"])
+  // amicode#202: vaults moved to the native Armonia sidebar panel, so the
+  // home-chrome entry hosts Connections only (was vaults + connections in
+  // #174). The per-directory tabs (mcp/lsp/plugins) are NOT part of the global
+  // surface — home has no directory-scoped sync context.
+  test("global surface hosts connections only (vaults moved to the sidebar)", () => {
+    expect([...GLOBAL_STATUS_TABS]).toEqual(["connections"])
+    expect([...GLOBAL_STATUS_TABS]).not.toContain("vaults")
   })
 
   test("connections is the pre-selected tab", () => {

packages/app/src/components/status-popover-model.ts

@@ -31,7 +31,9 @@ export function statusTriggerVisibility(input: { desktopV2: boolean; showStatus:
  * per-directory (they read the directory-scoped sync context, which the home
  * route does not mount) and are meaningless before a session exists.
  */
-export const GLOBAL_STATUS_TABS = ["vaults", "connections"] as const
+// amicode#202: vaults moved to the native Armonia sidebar panel, so the
+// global home-chrome surface hosts Connections only.
+export const GLOBAL_STATUS_TABS = ["connections"] as const
 export type GlobalStatusTab = (typeof GLOBAL_STATUS_TABS)[number]
 
 /** The home entry is labeled "Connections", so that tab opens pre-selected. */

packages/app/src/components/status-popover.tsx

@@ -3,7 +3,8 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { Popover } from "@opencode-ai/ui/popover"
-import { Suspense, createMemo, createSignal, lazy, Show, type ComponentProps, type JSX } from "solid-js"
+import { Suspense, batch, createEffect, createMemo, createSignal, lazy, Show, type ComponentProps, type JSX } from "solid-js"
+import { announceChromeDropdown, chromeDropdownOpenId, clearChromeDropdown } from "@/utils/chrome-dropdown"
 import { useLanguage } from "@/context/language"
 import { useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
@@ -225,7 +226,19 @@ function StatusPopoverView(props: { state: StatusPopoverState }) {
 // same module the session-header popover lazy-loads.
 export function GlobalConnectionsPopover(props: { onManageVaults: () => void }) {
   const language = useLanguage()
-  const [shown, setShown] = createSignal(false)
+  const [shown, setShownRaw] = createSignal(false)
+  // amicode#203: one chrome dropdown at a time (see chrome-dropdown.ts).
+  const setShown = (next: boolean) => {
+    // batch: announce + open flag must land atomically (press-twice bug).
+    batch(() => {
+      if (next) announceChromeDropdown("connections")
+      else clearChromeDropdown("connections")
+      setShownRaw(next)
+    })
+  }
+  createEffect(() => {
+    if (chromeDropdownOpenId() !== "connections" && shown()) setShownRaw(false)
+  })
 
   return (
     <Popover

packages/app/src/entry.tsx

@@ -3,6 +3,7 @@
 import * as Sentry from "@sentry/solid"
 import { render } from "solid-js/web"
 import { AppBaseProviders, AppInterface } from "@/app"
+import { adoptHiddenProject } from "@/utils/amicode-hidden-project"
 import { type Platform, PlatformProvider } from "@/context/platform"
 import { dict as en } from "@/i18n/en"
 import { dict as zh } from "@/i18n/zh"
@@ -152,8 +153,9 @@ const getDefaultUrl = () => {
 
 const clearAuthToken = () => {
   const params = new URLSearchParams(location.search)
-  if (!params.has("auth_token")) return
+  if (!params.has("auth_token") && !params.has("amicode_hide_project")) return
   params.delete("auth_token")
+  params.delete("amicode_hide_project")
   history.replaceState(null, "", location.pathname + (params.size ? `?${params}` : "") + location.hash)
 }
 
@@ -197,6 +199,7 @@ if (root instanceof HTMLElement) {
   // Amicode webview: route ⌘V/⌘C/⌘X for every editable through the
   // extension-host bridge (framed contexts only — self-gates unframed).
   installGlobalClipboardFallback(window)
+  adoptHiddenProject(location.search) // amicode#203: hide the extension's scaffold project
   const auth = authFromToken(new URLSearchParams(location.search).get("auth_token"))
   clearAuthToken()
   const server: ServerConnection.Http = {