feat(core): add /goal with a client-side done check (#59437)

Co-authored-by: opencode-agent[bot] <219766164+opencode-agent[bot]@users.noreply.github.com>

Author: neriousy

packages/app/component-tests/plugin-host.spec.ts

@@ -1511,3 +1511,51 @@ story("composer pills show per session, open their rows, and fail only their own
   await rows.nth(0).click()
   await expect(page.locator("body")).toHaveAttribute("data-picked", "12")
 })
+
+story("a composer pill with a menu opens the plugin's content under the host's heading", async ({ page }) => {
+  await page.evaluate(async (fixture) => {
+    const { mountComposerPills, until, ComposerPill } = await import(fixture)
+
+    const host = mountComposerPills({
+      definitions: [
+        {
+          id: "acme",
+          windowEntry: async () => ({
+            default: (ctx: Context) =>
+              void ctx.add(ComposerPill, {
+                id: "goal",
+                // `menu` wins over the view's rows.
+                show: () => ({ label: "Goal", title: "Ship the release", rows: [{ id: "unused", label: "Unused" }] }),
+                menu: (input: { readonly session: { readonly directory: string }; close(): void }) => {
+                  const button = document.createElement("button")
+                  button.dataset.testid = "goal-pause"
+                  button.textContent = `Pause ${input.session.directory}`
+                  button.onclick = () => input.close()
+
+                  return button
+                },
+              }),
+          }),
+        },
+      ],
+    })
+
+    await until(() => host.status("acme") === "active")
+  }, fixture)
+
+  const pill = page.getByTestId("composer-pills").locator('[data-slot="session-plugin-pill"]')
+  await expect(pill).toHaveText("Goal")
+
+  await pill.click()
+  const popover = page.locator('[data-slot="session-plugin-pill-popover"]')
+  await expect(popover.getByText("Ship the release")).toBeVisible()
+  await expect(popover.locator('[data-slot="session-plugin-pill-row"]')).toHaveCount(0)
+  await expect(popover.getByTestId("goal-pause")).toHaveText("Pause /repo")
+
+  await popover.getByTestId("goal-pause").click()
+  await expect(popover).toHaveCount(0)
+
+  // The content renders again on the next open.
+  await pill.click()
+  await expect(page.getByTestId("goal-pause")).toBeVisible()
+})

packages/app/e2e/utils/mock-api.ts

@@ -300,6 +300,14 @@ const Group = HttpApiGroup.make("mock")
   )
   .add(HttpApiEndpoint.post("sessionCreate", "/api/session", { payload: JsonPayload, success: Json }))
   .add(HttpApiEndpoint.get("sessionActive", "/api/session/active", { success: Json }))
+  .add(
+    HttpApiEndpoint.post("rpcCall", "/api/rpc/:rpcID/:method", {
+      params: { rpcID: Schema.String, method: Schema.String },
+      payload: JsonPayload,
+      success: Json,
+      error: Unsupported,
+    }),
+  )
   .add(
     HttpApiEndpoint.get("sessionGet", "/api/session/:sessionID", {
       params: SessionParams,

packages/app/e2e/utils/mock-server.ts

@@ -1274,6 +1274,15 @@ function mockHandlers(
             cursor: { next: offset + limit < ordered.length ? String(offset + limit) : undefined },
           })
         },
+        // The goal plugin's pill reads each routed session's goal; no scenario sets one.
+        rpcCall: (ctx) =>
+          ctx.params.rpcID === "opencode.goal" && ctx.params.method === "get"
+            ? Effect.succeed({ output: null })
+            : Effect.fail(
+                new MockUnsupported({
+                  message: `The mock server has no ${ctx.params.rpcID}.${ctx.params.method} RPC`,
+                }),
+              ),
         sessionActive: () => {
           const status = resolve(config.sessionStatus ?? {})
 

packages/app/src/session/composer/plugin-pills.tsx

@@ -1,6 +1,8 @@
 import { Icon } from "@opencode/ui/icon"
 import { Menu } from "@opencode/ui/menu"
-import { createMemo, For, Show, type Accessor, type JSX } from "solid-js"
+import { Popover } from "@kobalte/core/popover"
+import { createMemo, For, Match, Show, Switch, untrack, type Accessor, type JSX } from "solid-js"
+import { createStore } from "solid-js/store"
 import {
   ComposerPill,
   type ComposerPillProps,
@@ -25,7 +27,8 @@ const tones: Record<ComposerPillTone, string> = {
   danger: "text-v2-state-fg-danger",
 }
 
-// Plugin pills in the composer lane, after the app's own: on the side away from the lane's aligned edge.
+// Plugin pills in the composer lane, after the app's own: on the side away from the lane's aligned edge. A pill with
+// nothing to show renders no element, so the row hides while it is empty and takes no gap in the lane.
 export function SessionPluginPills(props: {
   session: MountedSession
   screen: SessionScreen
@@ -52,7 +55,7 @@ export function SessionPluginPills(props: {
     <Show when={items().length > 0}>
       <div
         data-component="session-plugin-pills"
-        class="flex min-w-0 shrink items-center gap-2"
+        class="flex min-w-0 shrink items-center gap-2 [&:not(:has(*))]:hidden"
         classList={{ "-order-2": alignment() === "end", "order-2": alignment() !== "end" }}
       >
         <For each={items()}>
@@ -71,12 +74,12 @@ function PluginPill(props: { pill: ComposerPill; input: ComposerPillProps; align
   const alignment = props.alignment
   const view = createMemo(() => props.pill.show(props.input))
   const placement = () => (({ center: "top", start: "top-start", end: "top-end" }) as const)[alignment()]
+  const [state, setState] = createStore({ open: false })
 
   return (
     <Show when={view()}>
       {(current) => (
-        <Show
-          when={current().rows}
+        <Switch
           fallback={
             <button
               type="button"
@@ -89,42 +92,93 @@ function PluginPill(props: { pill: ComposerPill; input: ComposerPillProps; align
             </button>
           }
         >
-          {(rows) => (
-            <Menu gutter={8} placement={placement()}>
-              <Menu.Trigger
-                as="button"
-                type="button"
-                data-slot="session-plugin-pill"
-                aria-label={current().title}
-                class={capsule}
+          <Match when={props.pill.menu}>
+            {(menu) => (
+              <Popover
+                open={state.open}
+                onOpenChange={(open) => setState("open", open)}
+                placement={placement()}
+                gutter={8}
               >
-                <Content view={current()} />
-              </Menu.Trigger>
-              <Menu.Portal>
-                <Menu.Content data-slot="session-plugin-pill-menu" aria-label={current().title ?? current().label}>
-                  <Menu.Group>
-                    <Menu.GroupLabel>{current().title ?? current().label}</Menu.GroupLabel>
-                    <For each={rows()}>
-                      {(row) => (
-                        <Menu.Item
-                          data-slot="session-plugin-pill-row"
-                          disabled={!row.run}
-                          onSelect={() => row.run?.()}
-                          badge={row.detail}
-                        >
-                          <PillIcon name={row.icon} tone={row.tone} />
-                          <span dir="auto" class="min-w-0 flex-1 truncate">
-                            {row.label}
-                          </span>
-                        </Menu.Item>
-                      )}
-                    </For>
-                  </Menu.Group>
-                </Menu.Content>
-              </Menu.Portal>
-            </Menu>
-          )}
-        </Show>
+                <Popover.Trigger
+                  as="button"
+                  type="button"
+                  data-slot="session-plugin-pill"
+                  aria-label={current().title}
+                  class={capsule}
+                >
+                  <Content view={current()} />
+                </Popover.Trigger>
+                <Popover.Portal>
+                  <Popover.Content
+                    data-slot="session-plugin-pill-popover"
+                    aria-label={current().title ?? current().label}
+                    class="w-80 max-w-[calc(100vw-56px)] rounded-[10px] border-[0.5px] border-v2-border-border-muted bg-v2-background-bg-layer-01 p-1 shadow-[var(--v2-elevation-floating)] outline-none"
+                  >
+                    <div class="px-2 pt-1 pb-1.5 text-[11px] font-[530] tracking-[0.05px] leading-[var(--line-height-tight)] text-v2-text-text-faint">
+                      <span dir="auto" class="line-clamp-3 break-words">
+                        {current().title ?? current().label}
+                      </span>
+                    </div>
+                    {/* Untracked: the content renders once per open; its own reactivity updates it in place. */}
+                    {untrack(() =>
+                      menu()({
+                        get session() {
+                          return props.input.session
+                        },
+                        get screen() {
+                          return props.input.screen
+                        },
+                        close: () => setState("open", false),
+                      }),
+                    )}
+                  </Popover.Content>
+                </Popover.Portal>
+              </Popover>
+            )}
+          </Match>
+          <Match when={current().rows}>
+            {(rows) => (
+              <Menu gutter={8} placement={placement()}>
+                <Menu.Trigger
+                  as="button"
+                  type="button"
+                  data-slot="session-plugin-pill"
+                  aria-label={current().title}
+                  class={capsule}
+                >
+                  <Content view={current()} />
+                </Menu.Trigger>
+                <Menu.Portal>
+                  <Menu.Content data-slot="session-plugin-pill-menu" aria-label={current().title ?? current().label}>
+                    <Menu.Group>
+                      <Menu.GroupLabel class="!h-auto max-w-80 !py-1.5">
+                        <span dir="auto" class="line-clamp-3 break-words">
+                          {current().title ?? current().label}
+                        </span>
+                      </Menu.GroupLabel>
+                      <For each={rows()}>
+                        {(row) => (
+                          <Menu.Item
+                            data-slot="session-plugin-pill-row"
+                            disabled={!row.run}
+                            onSelect={() => row.run?.()}
+                            badge={row.detail}
+                          >
+                            <PillIcon name={row.icon} tone={row.tone} />
+                            <span dir="auto" class="min-w-0 flex-1 truncate">
+                              {row.label}
+                            </span>
+                          </Menu.Item>
+                        )}
+                      </For>
+                    </Menu.Group>
+                  </Menu.Content>
+                </Menu.Portal>
+              </Menu>
+            )}
+          </Match>
+        </Switch>
       )}
     </Show>
   )

packages/app/src/shell/notifications/notification.tsx

@@ -25,6 +25,19 @@ export function openNotificationSession(tabs: NotificationTabs, server: ServerCo
   tabs.select(tab)
 }
 
+// Only direct children: a grandchild reports to its own parent, so waiting on it could mean no sound at all. Running
+// shells don't count, or a session with a dev server running would never play one.
+function hasRunningChild(data: Data, sessionID: string) {
+  return data.session
+    .family(sessionID)
+    .some(
+      (child) =>
+        child !== sessionID &&
+        data.session.get(child)?.parentID === sessionID &&
+        data.session.status(child) === "running",
+    )
+}
+
 /** A session is unread when its latest terminal execution is newer than the last one any client viewed. */
 function isSessionUnread(session?: Pick<SessionInfo, "time">) {
   const time = session?.time
@@ -217,6 +230,9 @@ export function createServerNotificationState(input: {
   }
 
   const handleSessionIdle = (sessionID: string, eventID: string) => {
+    // A running subagent's report wakes the session again, so it isn't done yet.
+    if (hasRunningChild(input.data, sessionID)) return
+
     void lookup(sessionID).then((session) => {
       if (disposed.value) return
 

packages/app/test-browser/server-notification-state.test.ts

@@ -82,7 +82,7 @@ test.each([
           },
         },
       },
-      data: { session: { get: () => session } },
+      data: { session: { get: () => session, family: () => [session.id], status: () => "idle" } },
       coordinator: { system: async (_id: string, fn: () => Promise<void>) => fn() },
     })
 

packages/client/src/solid/data.ts

@@ -780,6 +780,11 @@ export function createData(config: CreateDataInput) {
         if (store.session.info[event.data.sessionID])
           setStore("session", "info", event.data.sessionID, "permissions", event.data.permissions)
         return
+      case "session.metadata.updated":
+        // The event carries the whole record, so keys it drops must go too.
+        if (store.session.info[event.data.sessionID])
+          setStore("session", "info", event.data.sessionID, "metadata", reconcile(event.data.metadata))
+        return
       case "session.archived":
         if (store.session.info[event.data.sessionID])
           setStore("session", "info", event.data.sessionID, "time", "archived", event.created)