feat(web): projection-fed permission chip replaces the Access placeholder

PermissionSelect returns as the Access seat's wired occupant: options and
the current value read from the 'permissions' projection through the
standard-kit useProjection (no fetch, no mount timing — the resident
composer's mount-once fetch bug dies with the fetch), key absence renders
nothing (permission-less host, or a Draft with no session), and a pick
submits the '/permission <preset>' command line through the new
ComposerBarInjected.command callback (Session.command = command.execute
admission; the pushed projection frame lands the confirmed value). The
READONLY_OPTIONS placeholder and its local state leave InputBar.

The connection fixture mirrors the host: a permissions unit fold (three
knob events over the fixture preset table), the projections block +
baseline/push frames carry the key, and /permission joins the command
catalog with the same switch-through-knob-events handler shape.

packages/client/ui-conversation/package.json

@@ -49,13 +49,14 @@
   },
   "devDependencies": {
     "@deepseek-ai/dsh-client-runtime": "workspace:^",
-    "@deepseek-ai/dsh-session-projection": "workspace:^",
-    "@deepseek-ai/dsh-tool-todo": "workspace:^",
     "@deepseek-ai/dsh-client-ui-layout": "workspace:^",
     "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
     "@deepseek-ai/dsh-client-ui-slash": "workspace:^",
     "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
     "@deepseek-ai/dsh-invariants": "workspace:^",
+    "@deepseek-ai/dsh-permission": "workspace:^",
+    "@deepseek-ai/dsh-session-projection": "workspace:^",
+    "@deepseek-ai/dsh-tool-todo": "workspace:^",
     "@types/react": "~18.3.1",
     "cordis": "^4.0.0-rc.7",
     "react": "^18.2.0"

packages/client/ui-conversation/src/client/apply.ts

@@ -150,6 +150,12 @@ export function apply(ctx: Context): void {
             // Stop failure surfaces via snapshot.promptError; nothing to restore.
           })
         },
+        command: async (line) => {
+          const session = sessions.binding(sessionId)?.session
+          if (session === undefined) return false
+          const result = await session.command(line)
+          return result.ok && result.value.matched
+        },
         hooks: { notices: shell.notices, lexicon: shell.lexicon },
       }
     },

packages/client/ui-conversation/src/client/contract/slots.ts

@@ -250,6 +250,12 @@ export interface ComposerBarInjected {
   keyboard: ComposerKeyboard
   /** Cancel the in-flight turn. */
   stop: () => void
+  /**
+   * Submit one slash-command line against this session's agent (the chrome
+   * controls' write path — the permission chip submits `/permission <preset>`).
+   * Resolves admission: false = rejected/unmatched/transport failure.
+   */
+  command: (line: string) => Promise<boolean>
   /** Registrant hooks compartment: the renderer binds these to useNotices/useLexicon. */
   hooks: {
     /** Latest surfaced notice (null after none; seq keys re-render of repeats). */

packages/client/ui-conversation/src/client/skeleton/InputBar.tsx

@@ -6,12 +6,13 @@
  * region-slot content) ride the owner props. Session facts
  * (running/removed/promptError) are self-selected via useSession. */
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef } from 'react'
 import type { ChangeEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
 import clsx from 'clsx'
 import { IconPlusOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ComposerBarProps } from '../contract/slots.ts'
 import { deriveDecorations } from '../input/decorations.ts'
+import { PermissionSelect } from './PermissionSelect.tsx'
 import css from './InputBar.module.css'
 
 /** Prompt failure surface (derived from promptError). */
@@ -22,13 +23,8 @@ export interface InputBarError {
 
 export type InputBarProps = ComposerBarProps
 
-const READONLY_OPTIONS: readonly { id: string; label: string }[] = [
-  { id: 'readonly', label: 'Read-only' },
-  { id: 'readwrite', label: 'Read-write' },
-]
-
 export function InputBar({
-  useSession, useInput, inputActions, keyboard, stop, renderSlot, useNotices, useLexicon,
+  useSession, useInput, inputActions, keyboard, stop, command, renderSlot, useNotices, useLexicon, useProjection,
   variant, placeholder, accessory, overlay, leftItems, rightItems, onAdd, addLabel = 'Add attachment',
 }: InputBarProps) {
   const input = useInput(s => s)
@@ -58,9 +54,9 @@ export function InputBar({
     }, 10)
   }
 
-  // Placeholder chrome: Access selection stays local until its seam lands
-  // (plan/model are real seats now — the named single slots below).
-  const [readonlyId, setReadonlyId] = useState('readonly')
+  // The Access seat's data: the host-computed permissions projection
+  // (undefined = capability absent → the chip renders nothing).
+  const permissions = useProjection('permissions')
 
   // Queue cut 1: running input stays free; locked = session disabled only.
   // The transient machine locks (adjudicating pending / submitting) render
@@ -223,19 +219,10 @@ export function InputBar({
     if (!empty && !disabled && !machineBusy) inputActions.submit('queue')
   }
 
-  // Access placeholder select (the one remaining local-chrome control).
+  // The Access seat: the projection-fed permission chip (renders nothing
+  // while the permissions key is absent — permission-less host or Draft).
   const accessSelect: ReactNode = (
-    <select
-      className={css.select}
-      aria-label="Access mode"
-      value={readonlyId}
-      disabled={locked}
-      onChange={(e: ChangeEvent<HTMLSelectElement>) => { setReadonlyId(e.target.value) }}
-    >
-      {READONLY_OPTIONS.map(opt => (
-        <option key={opt.id} value={opt.id}>{opt.label}</option>
-      ))}
-    </select>
+    <PermissionSelect value={permissions} locked={locked} command={command} />
   )
 
   // Mirror-layer decorations: a visible backdrop with transparent text. The

packages/client/ui-conversation/src/client/skeleton/PermissionSelect.module.css

@@ -0,0 +1,49 @@
+/* Composer bottom-row permission chip (draft start.jpeg `Read-only ∨`): a
+   quiet text chip with a chevron; hover paints the standard interactive pill.
+   The native select is stretched invisibly over the chip so the platform
+   dropdown does the menu work — keyboard/AT semantics come free. */
+
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 14px;
+  line-height: 20px;
+  pointer-events: none; /* the overlaid select owns the interaction */
+}
+
+.root:hover .chip {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.chevron {
+  color: var(--dsw-alias-label-caption);
+}
+
+/* Invisible native select stretched over the chip: real menu, zero drawing. */
+.select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  border: none;
+  cursor: pointer;
+}
+
+.select:disabled {
+  cursor: default;
+}
+
+.root:has(.select:disabled) .chip {
+  opacity: 0.5;
+}

packages/client/ui-conversation/src/client/skeleton/PermissionSelect.tsx

@@ -0,0 +1,80 @@
+// PermissionSelect: the composer bottom-row permission chip (draft
+// start.jpeg's `Read-only ∨` control), the Access seat's wired occupant.
+// Options and the current value read from the host-computed `permissions`
+// projection (baseline block + push frames — no fetch, no mount timing);
+// key absence (a permission-less composition, or a Draft with no host
+// session yet) renders nothing. The visible chip is presentation only — an
+// invisible native select stretched over it owns the menu and interaction.
+// A switch submits the `/permission <preset>` command line (the one write
+// path); the control shows the picked value optimistically and disables
+// until the admission result, then re-follows the projection — the pushed
+// frame confirms the switch, and a failed/unmatched submit falls back to
+// the still-authoritative projection value (`custom` is shown as the
+// current value but never offered as a target — the host omits it from
+// switchable options).
+
+import { useState } from 'react'
+import type { PermissionSelect as PermissionSelectValue } from '@deepseek-ai/dsh-permission/client'
+import css from './PermissionSelect.module.css'
+
+/**
+ * Display transform: kebab-case machine names render as title-case labels
+ * (`workspace-write` → `Workspace Write`). Presentation-only — the wire
+ * vocabulary and the host's advertised names are untouched; a host-configured
+ * name that is not kebab-case (contains spaces or uppercase) passes through.
+ */
+function displayName(name: string): string {
+  if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(name)) return name
+  return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
+}
+
+export interface PermissionSelectProps {
+  /** The host-computed select, or undefined while the capability is absent. */
+  value: PermissionSelectValue | undefined
+  /** Session-removed lock (the bar's chrome disable state). */
+  locked: boolean
+  /** Submit one slash-command line; resolves admission (false = rejected/unmatched). */
+  command: (line: string) => Promise<boolean>
+}
+
+export function PermissionSelect({ value, locked, command }: PermissionSelectProps) {
+  // Optimistic pick, shown while the admission round-trip runs; null follows
+  // the projection (the pushed frame lands the confirmed value there).
+  const [pick, setPick] = useState<string | null>(null)
+  if (value === undefined) return null
+
+  const currentValue = pick ?? value.currentValue
+  const current = value.options.find(option => option.value === currentValue)
+
+  const onChange = (next: string): void => {
+    if (next === value.currentValue) return
+    setPick(next)
+    void command(`/permission ${next}`)
+      .catch(() => false)
+      .then(() => { setPick(null) })
+  }
+
+  return (
+    <label className={css.root} title={current?.description}>
+      <span className={css.chip}>
+        {displayName(current?.name ?? currentValue)}
+        <svg className={css.chevron} viewBox="0 0 12 12" width="12" height="12" aria-hidden>
+          <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+        </svg>
+      </span>
+      <select
+        className={css.select}
+        aria-label="Access mode"
+        value={currentValue}
+        disabled={locked || pick !== null}
+        onChange={(e) => { onChange(e.target.value) }}
+      >
+        {value.options.map(option => (
+          <option key={option.value} value={option.value} disabled={option.value === 'custom'}>
+            {displayName(option.name)}
+          </option>
+        ))}
+      </select>
+    </label>
+  )
+}

packages/client/ui-conversation/tests/input-bar.spec.tsx

@@ -33,6 +33,7 @@ interface BenchOptions {
   modelEntry?: React.ReactNode
   /** Hot text-ref lexicon (injects a minimal slash stub exposing only lexicon()). */
   lexicon?: ReadonlyMap<'/' | '@', readonly string[]>
+  permissions?: { options: { value: string; name: string; description?: string }[]; currentValue: string }
   draft?: string
   running?: boolean
   disabled?: boolean
@@ -88,13 +89,14 @@ function bench(over?: BenchOptions) {
       items: [], state: 'idle', phase: 'ready', error: null,
       baselinesReady: true, recentWorkspaceId: undefined,
     })),
-    useProjection: (() => undefined),
+    useProjection: ((key: string) => (key === 'permissions' ? over?.permissions : undefined)) as InputBarProps['useProjection'],
     useInput: bindSnapshotSelector(shell.state),
     inputActions: shell.actions,
     keyboard: shell,
     useNotices: bindSnapshotSelector(shell.notices),
     useLexicon: bindSnapshotSelector(shell.lexicon),
     stop,
+    command: () => Promise.resolve(true),
     renderSlot,
     variant: over?.variant ?? 'composer',
     ...(over?.placeholder !== undefined ? { placeholder: over.placeholder } : {}),
@@ -352,16 +354,37 @@ describe('strips and variants', () => {
 })
 
 describe('placeholder chrome and control seats', () => {
-  it('renders attach + Access placeholder; plan/model seats render EMPTY without entries (B ruling)', () => {
+  it('renders attach; the Access chip is absent without the permissions projection; plan/model seats render EMPTY without entries (B ruling)', () => {
     const { view, slotCalls } = bench()
     expect(view.getByLabelText('Add attachment')).toBeTruthy()
-    expect((view.getByLabelText('Access mode') as HTMLSelectElement).value).toBe('readonly')
+    // Capability absent (no projection value): the chip renders nothing.
+    expect(view.queryByLabelText('Access mode')).toBeNull()
     // Both seats dispatched, nothing rendered.
     expect(slotCalls.map(c => c.key)).toEqual(['conversation.input.plan', 'conversation.input.model'])
     expect(view.queryByLabelText('Plan mode')).toBeNull()
     expect(view.queryByLabelText('Model')).toBeNull()
   })
 
+  it('the Access chip renders the projection value and submits /permission on pick', async () => {
+    const permissions = {
+      options: [
+        { value: 'workspace-write', name: 'workspace-write' },
+        { value: 'danger-full-access', name: 'danger-full-access' },
+      ],
+      currentValue: 'workspace-write',
+    }
+    const { view } = bench({ permissions })
+    const select = view.getByLabelText('Access mode') as HTMLSelectElement
+    expect(select.value).toBe('workspace-write')
+    // Title-case display is presentation only; the option values stay machine names.
+    expect([...select.options].map(o => o.textContent)).toEqual(['Workspace Write', 'Danger Full Access'])
+    fireEvent.change(select, { target: { value: 'danger-full-access' } })
+    // Optimistic pick + disable until admission resolves (command stub resolves true).
+    expect(select.disabled).toBe(true)
+    await act(async () => {})
+    expect(select.disabled).toBe(false)
+  })
+
   it('a registered entry fills its seat and receives the locked owner prop', () => {
     const { view, slotCalls } = bench({
       disabled: true,
@@ -377,12 +400,13 @@ describe('placeholder chrome and control seats', () => {
     expect(live.slotCalls.every(c => !(c.owner as { locked: boolean }).locked)).toBe(true)
   })
 
-  it('disabled locks the Access placeholder and attach control (running does not)', () => {
-    const { view } = bench({ disabled: true })
+  it('disabled locks the Access chip and attach control (running does not)', () => {
+    const permissions = { options: [{ value: 'workspace-write', name: 'workspace-write' }], currentValue: 'workspace-write' }
+    const { view } = bench({ disabled: true, permissions })
     expect((view.getByLabelText('Add attachment') as HTMLButtonElement).disabled).toBe(true)
     expect((view.getByLabelText('Access mode') as HTMLSelectElement).disabled).toBe(true)
     cleanup()
-    const live = bench({ running: true })
+    const live = bench({ running: true, permissions })
     expect((live.view.getByLabelText('Access mode') as HTMLSelectElement).disabled).toBe(false)
   })
 })

packages/client/ui-conversation/tests/input-matrix.spec.tsx

@@ -47,6 +47,7 @@ function mountBar(shell: SessionInputShell, over?: { running?: boolean; disabled
     useLexicon: bindSnapshotSelector(shell.lexicon),
     renderSlot: (() => null) as InputBarProps['renderSlot'],
     stop: vi.fn(),
+    command: () => Promise.resolve(true),
     variant: 'composer',
   }
   return render(<InputBar {...props} />)

packages/client/ui-conversation/tests/input-scenarios.spec.tsx

@@ -133,6 +133,7 @@ async function scopedBench(register?: (slash: SlashService) => void) {
     useLexicon: bindSnapshotSelector(shell.lexicon),
     renderSlot: (() => null) as InputBarProps['renderSlot'],
     stop: vi.fn(),
+    command: () => Promise.resolve(true),
     variant: 'composer',
   }
   const view = render(<InputBar {...barProps} />)

packages/client/ui-conversation/tests/skeleton.spec.tsx

@@ -123,6 +123,7 @@ function mount(
           useNotices={bindSnapshotSelector(wiring.notices)}
           useLexicon={bindSnapshotSelector(wiring.lexicon)}
           stop={stop}
+          command={() => Promise.resolve(true)}
           renderSlot={(() => null) as InputBarProps['renderSlot']}
           {...bar}
         />

packages/client/ui-conversation/tsconfig.json

@@ -40,6 +40,9 @@
     },
     {
       "path": "../../support/invariants"
+    },
+    {
+      "path": "../../ui/permission"
     }
   ],
   "exclude": [