(MOT-4173) console: prompts page for the prompt store

console/web/src/App.tsx

@@ -24,6 +24,7 @@ import { Browser } from '@/pages/Browser'
 import { Configuration } from '@/pages/Configuration'
 import { Github } from '@/pages/Github'
 import { Memory } from '@/pages/Memory'
+import { Prompts } from '@/pages/Prompts'
 import { TracesV2 } from '@/pages/TracesV2'
 import { Workers } from '@/pages/Workers'
 import { Worktrees } from '@/pages/Worktrees'
@@ -101,6 +102,8 @@ export function App() {
               <Browser />
             ) : view === 'memory' ? (
               <Memory />
+            ) : view === 'prompts' ? (
+              <Prompts />
             ) : view === 'github' ? (
               <Github />
             ) : (
@@ -137,11 +140,13 @@ function Header({
     browserAvailable,
     memoryAvailable,
     githubAvailable,
+    promptsAvailable,
   } = useConversationsCtx()
   const viewOptions = buildViewOptions(
     worktreeAvailable,
     browserAvailable,
     memoryAvailable,
+    promptsAvailable,
     githubAvailable,
   )
   const onConsoleSettings = view === 'configuration'

console/web/src/components/chat/ChatView.tsx

@@ -74,6 +74,7 @@ import { Composer, type ComposerSubmitPayload } from './Composer'
 import { ContextUsage } from './ContextUsage'
 import { ExportSessionButton } from './ExportSessionButton'
 import { MessageList } from './MessageList'
+import type { SessionPrompt } from './PromptPicker'
 import { SessionTriggers } from './SessionTriggers'
 import { WorktreeBadge } from './WorktreeBadge'
 
@@ -157,6 +158,9 @@ export function ChatView({
   const [thinkingLevel, setThinkingLevel] = useState<ThinkingLevel>(
     DEFAULT_THINKING_LEVEL,
   )
+  // System prompt override for this conversation (prompt store, kind:
+  // system). Applied to every send until switched back to default.
+  const [sessionPrompt, setSessionPrompt] = useState<SessionPrompt | null>(null)
   const abortRef = useRef<AbortController | null>(null)
   const [copied, setCopied] = useState(false)
   const { functionEntries } = useFunctionsCatalog(backend.id)
@@ -1003,6 +1007,7 @@ export function ChatView({
               sessionId,
               messageId,
               thinkingLevel,
+              ...(sessionPrompt ? { systemPrompt: sessionPrompt.body } : {}),
               workingDir: conversation.workingDir,
               approvalGateAvailable: approvalEnabled,
               ...(attachedBlocks && attachedBlocks.length > 0
@@ -1048,6 +1053,7 @@ export function ChatView({
             sessionId,
             messageId,
             thinkingLevel,
+            ...(sessionPrompt ? { systemPrompt: sessionPrompt.body } : {}),
             workingDir: conversation.workingDir,
             approvalGateAvailable: approvalEnabled,
             approvalSessionMatcher,
@@ -1327,6 +1333,7 @@ export function ChatView({
       conversation.workingDir,
       effectiveModel,
       thinkingLevel,
+      sessionPrompt,
       sessionId,
       contextWindow,
       backend,
@@ -1788,6 +1795,12 @@ export function ChatView({
               backend.id === 'real' &&
               (conversationsCtx?.memoryAvailable ?? false)
             }
+            showPromptPicker={
+              backend.id === 'real' &&
+              (conversationsCtx?.promptsAvailable ?? false)
+            }
+            sessionPrompt={sessionPrompt}
+            onSessionPromptChange={setSessionPrompt}
             memoryBank={conversation.memoryBank ?? null}
             onMemoryBankChange={(next) =>
               conversationsCtx?.setMemoryBank(conversation.id, next)

console/web/src/components/chat/Composer.tsx

@@ -24,6 +24,7 @@ import { DirectoryPicker, type WorktreePickerOptions } from './DirectoryPicker'
 import { LexicalShell } from './LexicalShell'
 import { ModelPicker } from './ModelPicker'
 import { ModePicker } from './ModePicker'
+import { PromptPicker, type SessionPrompt } from './PromptPicker'
 import { nextHistoryTarget } from './queue-history'
 
 export interface ComposerSubmitPayload {
@@ -64,6 +65,11 @@ interface ComposerProps {
   workingDir?: string | null
   /** Show the memory bank picker (memory worker present, real backend). */
   showMemoryBank?: boolean
+  /** Show the system prompt picker (directory worker present, real backend). */
+  showPromptPicker?: boolean
+  /** This chat's system prompt override; null = the harness default chain. */
+  sessionPrompt?: SessionPrompt | null
+  onSessionPromptChange?: (next: SessionPrompt | null) => void
   /** This chat's memory bank; null = the worker's default bank. */
   memoryBank?: string | null
   onMemoryBankChange?: (next: string | null) => void
@@ -150,6 +156,9 @@ export function Composer({
   workingDir,
   showMemoryBank,
   memoryBank,
+  showPromptPicker,
+  sessionPrompt,
+  onSessionPromptChange,
   onMemoryBankChange,
   workingDirLocked,
   workingDirError,
@@ -358,6 +367,13 @@ export function Composer({
               disabled={optionsDisabled}
             />
           ) : null}
+          {showPromptPicker && onSessionPromptChange ? (
+            <PromptPicker
+              value={sessionPrompt ?? null}
+              onChange={onSessionPromptChange}
+              disabled={optionsDisabled}
+            />
+          ) : null}
           {showPermissionMode ? (
             <PermissionModePicker
               value={permissionMode}

console/web/src/components/chat/PromptPicker.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from 'react'
+import { Select } from '@/components/ui/Select'
+import { getPrompt, listPrompts, type PromptRow } from '@/lib/prompts'
+
+/**
+ * In-chat system prompt picker — "which system prompt is this chat
+ * running". `default` defers to the harness identity chain (router
+ * override, provider-declared, embedded fallback). Picking a `kind:
+ * system` entry from the prompt store overrides the system prompt for
+ * every following send in THIS conversation, so a five-line special-
+ * purpose prompt (blog writing, scraping) fully replaces the general
+ * agent prompt. Lives next to the composer as one compact dropdown;
+ * mid-conversation switches apply from the next turn.
+ */
+
+export interface SessionPrompt {
+  name: string
+  body: string
+}
+
+interface PromptPickerProps {
+  /** Prompt for THIS conversation; null = the harness default chain. */
+  value: SessionPrompt | null
+  onChange: (next: SessionPrompt | null) => void
+  disabled?: boolean
+}
+
+const DEFAULT = '(default)'
+
+export function PromptPicker({ value, onChange, disabled }: PromptPickerProps) {
+  const [prompts, setPrompts] = useState<PromptRow[]>([])
+  // Monotonic token so a slow getPrompt from an earlier selection can't
+  // land after a newer one and apply a stale prompt.
+  const selectionRef = useRef(0)
+
+  useEffect(() => {
+    let cancelled = false
+    void listPrompts()
+      .then((next) => {
+        if (!cancelled) {
+          setPrompts(next.filter((p) => p.kind === 'system'))
+        }
+      })
+      .catch(() => {})
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const known = prompts.some((p) => p.name === value?.name)
+  const options = [
+    {
+      value: DEFAULT,
+      label: 'prompt: default',
+      title:
+        'the harness identity chain (router override, provider prompt, fallback)',
+    },
+    ...prompts.map((p) => ({
+      value: p.name,
+      label: `prompt: ${p.name}`,
+      title: p.description,
+    })),
+    ...(value && !known
+      ? [
+          {
+            value: value.name,
+            label: `prompt: ${value.name}`,
+            title: 'no longer in the prompt store; still applied to this chat',
+          },
+        ]
+      : []),
+  ]
+
+  return (
+    <Select<string>
+      value={value?.name ?? DEFAULT}
+      onChange={(next) => {
+        // Every selection (including DEFAULT) supersedes any in-flight read.
+        const token = ++selectionRef.current
+        if (next === DEFAULT) {
+          onChange(null)
+          return
+        }
+        void getPrompt(next)
+          .then((detail) => {
+            if (token !== selectionRef.current) return
+            if (detail) onChange({ name: detail.name, body: detail.body })
+          })
+          .catch(() => {
+            // Failed read: leave the current selection untouched.
+          })
+      }}
+      disabled={disabled}
+      aria-label="system prompt"
+      className="min-w-[104px] max-w-[180px]"
+      options={options}
+    />
+  )
+}

console/web/src/components/chat/lexical/SlashCommandsPlugin.tsx

@@ -1,16 +1,25 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import {
   LexicalTypeaheadMenuPlugin,
   MenuOption,
 } from '@lexical/react/LexicalTypeaheadMenuPlugin'
 import {
   $createTextNode,
+  $getNodeByKey,
+  $isTextNode,
   COMMAND_PRIORITY_NORMAL,
   type LexicalEditor,
   type TextNode,
 } from 'lexical'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { fuzzyFilterSlash, type SlashCommand } from '@/lib/slash-commands'
+import { getPrompt } from '@/lib/prompts'
+import {
+  fuzzyFilterSlash,
+  loadPromptSlashCommands,
+  SLASH_COMMANDS,
+  type SlashCommand,
+} from '@/lib/slash-commands'
 import { FlipMenu } from './FlipMenu'
 
 class SlashCommandOption extends MenuOption {
@@ -27,7 +36,8 @@ interface SlashCommandsPluginProps {
 }
 
 // Anchored at column 0 so `/` mid-sentence ("either/or") doesn't fire.
-const SLASH_PATTERN = /^\/(\w*)$/
+// `-` is allowed because prompt names are kebab-case (`/blog-writer`).
+const SLASH_PATTERN = /^\/([\w-]*)$/
 
 function slashTriggerFn(text: string, _editor: LexicalEditor) {
   const match = text.match(SLASH_PATTERN)
@@ -42,14 +52,29 @@ function slashTriggerFn(text: string, _editor: LexicalEditor) {
 export function SlashCommandsPlugin({
   menuOpenRef,
 }: SlashCommandsPluginProps = {}) {
+  const [editor] = useLexicalComposerContext()
   const [query, setQuery] = useState<string | null>(null)
+  const [promptCommands, setPromptCommands] = useState<SlashCommand[]>([])
+
+  // The prompt store changes rarely; re-read each time the menu opens so a
+  // save in the prompts page shows up without a reload.
+  const [openCount, setOpenCount] = useState(0)
+  useEffect(() => {
+    let cancelled = false
+    loadPromptSlashCommands().then((commands) => {
+      if (!cancelled) setPromptCommands(commands)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [openCount])
 
   const options = useMemo(
     () =>
-      fuzzyFilterSlash(query ?? '').map(
+      fuzzyFilterSlash(query ?? '', [...SLASH_COMMANDS, ...promptCommands]).map(
         (entry) => new SlashCommandOption(entry),
       ),
-    [query],
+    [query, promptCommands],
   )
 
   const onSelectOption = useCallback(
@@ -58,14 +83,46 @@ export function SlashCommandsPlugin({
       textNodeContainingQuery: TextNode | null,
       closeMenu: () => void,
     ) => {
-      if (textNodeContainingQuery) {
-        const replacement = $createTextNode(`${option.entry.command} `)
+      const { entry } = option
+      if (!textNodeContainingQuery) {
+        closeMenu()
+        return
+      }
+      if (!entry.promptName) {
+        const replacement = $createTextNode(`${entry.command} `)
         textNodeContainingQuery.replace(replacement)
         replacement.selectEnd()
+        closeMenu()
+        return
       }
+      // Prompt entry: inject the prompt BODY into the message (claude-code
+      // style context injection). The body is fetched async, so drop a
+      // placeholder now and swap it once the read lands.
+      const placeholder = $createTextNode(`${entry.command} `)
+      textNodeContainingQuery.replace(placeholder)
+      placeholder.selectEnd()
+      const key = placeholder.getKey()
+      const name = entry.promptName
       closeMenu()
+      void getPrompt(name).then((detail) => {
+        editor.update(() => {
+          const node = $getNodeByKey(key)
+          if (!node || !detail) return
+          // Swap only while the node still holds the untouched placeholder.
+          // If the user kept typing into it while the read was pending, leave
+          // their text alone rather than clobbering it.
+          if (
+            !$isTextNode(node) ||
+            node.getTextContent() !== `${entry.command} `
+          )
+            return
+          const body = $createTextNode(`${detail.body.trim()}\n`)
+          node.replace(body)
+          body.selectEnd()
+        })
+      })
     },
-    [],
+    [editor],
   )
 
   return (
@@ -75,6 +132,7 @@ export function SlashCommandsPlugin({
       onSelectOption={onSelectOption}
       onOpen={() => {
         if (menuOpenRef) menuOpenRef.current = true
+        setOpenCount((n) => n + 1)
       }}
       onClose={() => {
         if (menuOpenRef) menuOpenRef.current = false

console/web/src/hooks/use-hash-route.ts

@@ -12,6 +12,7 @@ export type View =
   | 'worktrees'
   | 'browser'
   | 'memory'
+  | 'prompts'
   | 'github'
 
 export interface WorkersConfigurationRoute {
@@ -98,6 +99,9 @@ function routeFromHash(hash: string): View | null {
   if (hash === '#/memory') {
     return 'memory'
   }
+  if (hash === '#/prompts') {
+    return 'prompts'
+  }
   if (hash === '#/github') {
     return 'github'
   }
@@ -134,6 +138,8 @@ function hashFor(view: View): string {
       return '#/browser'
     case 'memory':
       return '#/memory'
+    case 'prompts':
+      return '#/prompts'
     case 'github':
       return '#/github'
     case 'configuration':