@neurocode-ai/session-ui 1.18.8

package/src/v2/components/prompt-input/machine.ts

@@ -0,0 +1,261 @@
+import type { PromptInputV2HistoryEntry, PromptInputV2PersistedState, PromptInputV2Suggestion } from "./types"
+
+export type PromptInputV2InteractionState = {
+  mode: "normal" | "shell"
+  popover:
+    | { type: "closed" }
+    | { type: "context"; query: string; activeID?: string }
+    | { type: "command-inline"; query: string; activeID?: string }
+    | { type: "command-menu"; query: string; activeID?: string }
+  drag: "idle" | "active"
+  focus: "editor" | "command-search" | "external"
+  activeContextID?: string
+  historyIndex: number
+  savedHistory?: PromptInputV2HistoryEntry
+}
+
+export type PromptInputV2InteractionEvent =
+  | { type: "input.changed"; value: string; persist?: boolean }
+  | { type: "commands.open" }
+  | { type: "context.open" }
+  | { type: "popover.query"; value: string }
+  | { type: "popover.results"; ids: string[] }
+  | { type: "popover.active"; id: string }
+  | { type: "popover.close" }
+  | { type: "popover.select"; item: PromptInputV2Suggestion }
+  | { type: "key.down"; key: string; ctrl: boolean; composing: boolean; ids: string[]; empty?: boolean }
+  | { type: "mode.shell" }
+  | { type: "mode.normal" }
+  | { type: "drag.enter" }
+  | { type: "drag.leave" }
+  | { type: "focus.editor" }
+  | { type: "focus.external" }
+  | { type: "context.active"; id: string }
+
+export type PromptInputV2InteractionCommand =
+  | { type: "draft.setText"; value: string }
+  | { type: "mention.add"; item: PromptInputV2Suggestion }
+  | { type: "popover.filter"; popover: "command" | "context"; query: string }
+  | { type: "suggestion.select"; id: string }
+  | { type: "focus.editor" }
+  | { type: "focus.command-search" }
+
+export type PromptInputV2Transition = {
+  state: PromptInputV2InteractionState
+  commands: PromptInputV2InteractionCommand[]
+  handled: boolean
+}
+
+export function createPromptInputV2InteractionState(): PromptInputV2InteractionState {
+  return {
+    mode: "normal",
+    popover: { type: "closed" },
+    drag: "idle",
+    focus: "external",
+    historyIndex: -1,
+  }
+}
+
+export function transitionPromptInputV2(
+  state: PromptInputV2InteractionState,
+  event: PromptInputV2InteractionEvent,
+  persisted: PromptInputV2PersistedState,
+): PromptInputV2Transition {
+  if (event.type === "input.changed") return inputChanged(state, event.value, event.persist !== false, persisted.cursor)
+  if (event.type === "commands.open") return openCommands(state, persisted)
+  if (event.type === "context.open") return openContext(state, persisted)
+  if (event.type === "popover.query") return queryChanged(state, event.value)
+  if (event.type === "popover.results") return resultsChanged(state, event.ids)
+  if (event.type === "popover.active") return activeChanged(state, event.id)
+  if (event.type === "popover.close") return changed({ ...state, popover: { type: "closed" } })
+  if (event.type === "popover.select") return suggestionSelected(state, event.item, persisted)
+  if (event.type === "key.down") return keyDown(state, event)
+  if (event.type === "mode.shell") return changed({ ...state, mode: "shell", popover: { type: "closed" } })
+  if (event.type === "mode.normal") return changed({ ...state, mode: "normal" })
+  if (event.type === "drag.enter") return changed({ ...state, drag: "active" })
+  if (event.type === "drag.leave") return changed({ ...state, drag: "idle" })
+  if (event.type === "focus.editor") return changed({ ...state, focus: "editor" })
+  if (event.type === "context.active") {
+    return changed({ ...state, activeContextID: state.activeContextID === event.id ? undefined : event.id })
+  }
+  return changed({ ...state, focus: "external" })
+}
+
+function inputChanged(
+  state: PromptInputV2InteractionState,
+  value: string,
+  persist: boolean,
+  cursor: number | undefined,
+): PromptInputV2Transition {
+  const setText: PromptInputV2InteractionCommand[] = persist ? [{ type: "draft.setText", value }] : []
+  if (state.mode === "normal" && value === "!") {
+    return changed({ ...state, mode: "shell", popover: { type: "closed" }, focus: "editor" }, [
+      { type: "draft.setText", value: "" },
+    ])
+  }
+  const context = value.slice(0, cursor ?? value.length).match(/(?:^|\s)@([^\s@]*)$/)
+  if (context) {
+    const query = context[1] ?? ""
+    return changed({ ...state, popover: { type: "context", query }, focus: "editor" }, [
+      ...setText,
+      { type: "popover.filter", popover: "context", query },
+    ])
+  }
+
+  const command = value.match(/^\/(\S*)$/)
+  if (command) {
+    const query = command[1] ?? ""
+    return changed({ ...state, popover: { type: "command-inline", query }, focus: "editor" }, [
+      ...setText,
+      { type: "popover.filter", popover: "command", query },
+    ])
+  }
+
+  return changed(
+    { ...state, popover: state.popover.type === "command-menu" ? state.popover : { type: "closed" }, focus: "editor" },
+    setText,
+  )
+}
+
+function openCommands(
+  state: PromptInputV2InteractionState,
+  persisted: PromptInputV2PersistedState,
+): PromptInputV2Transition {
+  if (!populated(persisted)) {
+    return changed({ ...state, popover: { type: "command-inline", query: "" }, focus: "editor" }, [
+      { type: "draft.setText", value: promptText(persisted) + "/" },
+      { type: "popover.filter", popover: "command", query: "" },
+      { type: "focus.editor" },
+    ])
+  }
+  return changed({ ...state, popover: { type: "command-menu", query: "" }, focus: "command-search" }, [
+    { type: "popover.filter", popover: "command", query: "" },
+    { type: "focus.command-search" },
+  ])
+}
+
+function openContext(
+  state: PromptInputV2InteractionState,
+  persisted: PromptInputV2PersistedState,
+): PromptInputV2Transition {
+  return changed({ ...state, popover: { type: "context", query: "" }, focus: "editor" }, [
+    { type: "draft.setText", value: promptText(persisted) + "@" },
+    { type: "popover.filter", popover: "context", query: "" },
+    { type: "focus.editor" },
+  ])
+}
+
+function queryChanged(state: PromptInputV2InteractionState, query: string): PromptInputV2Transition {
+  if (state.popover.type === "closed") return unchanged(state)
+  const popover = state.popover.type === "context" ? "context" : "command"
+  return changed({ ...state, popover: { ...state.popover, query, activeID: undefined } }, [
+    { type: "popover.filter", popover, query },
+  ])
+}
+
+function resultsChanged(state: PromptInputV2InteractionState, ids: string[]): PromptInputV2Transition {
+  if (state.popover.type === "closed") return unchanged(state)
+  const activeID = state.popover.activeID && ids.includes(state.popover.activeID) ? state.popover.activeID : ids[0]
+  if (activeID === state.popover.activeID) return unchanged(state)
+  return changed({ ...state, popover: { ...state.popover, activeID } })
+}
+
+function activeChanged(state: PromptInputV2InteractionState, id: string): PromptInputV2Transition {
+  if (state.popover.type === "closed" || state.popover.activeID === id) return unchanged(state)
+  return changed({ ...state, popover: { ...state.popover, activeID: id } })
+}
+
+function suggestionSelected(
+  state: PromptInputV2InteractionState,
+  item: PromptInputV2Suggestion,
+  persisted: PromptInputV2PersistedState,
+): PromptInputV2Transition {
+  const current = promptText(persisted)
+  const commands: PromptInputV2InteractionCommand[] = []
+  if (item.kind === "command") {
+    commands.push({
+      type: "draft.setText",
+      value:
+        state.popover.type === "command-menu"
+          ? current.trim()
+            ? `${item.label} ${current.trim()}`
+            : `${item.label} `
+          : replaceTrigger(current, "/", `${item.label} `),
+    })
+  } else {
+    commands.push({ type: "mention.add", item })
+  }
+  commands.push({ type: "focus.editor" })
+  return changed({ ...state, popover: { type: "closed" }, focus: "editor" }, commands)
+}
+
+function keyDown(
+  state: PromptInputV2InteractionState,
+  event: Extract<PromptInputV2InteractionEvent, { type: "key.down" }>,
+): PromptInputV2Transition {
+  if (event.ctrl && event.key.toLowerCase() === "g") {
+    if (state.popover.type === "closed") return unchanged(state)
+    return changed({ ...state, popover: { type: "closed" }, focus: "editor" }, [{ type: "focus.editor" }], true)
+  }
+  if (state.popover.type === "closed") {
+    if (state.mode === "shell" && (event.key === "Escape" || (event.key === "Backspace" && event.empty))) {
+      return changed({ ...state, mode: "normal" }, [], true)
+    }
+    return unchanged(state)
+  }
+  if (event.key === "Escape") {
+    return changed({ ...state, popover: { type: "closed" }, focus: "editor" }, [{ type: "focus.editor" }], true)
+  }
+  if (event.key === "Tab" || (event.key === "Enter" && !event.composing)) {
+    if (!state.popover.activeID) return unchanged(state, true)
+    return unchanged(state, true, [{ type: "suggestion.select", id: state.popover.activeID }])
+  }
+  const direction =
+    event.key === "ArrowDown" || (event.ctrl && event.key === "n")
+      ? 1
+      : event.key === "ArrowUp" || (event.ctrl && event.key === "p")
+        ? -1
+        : 0
+  if (!direction || event.ids.length === 0) return unchanged(state)
+  const current = state.popover.activeID ? event.ids.indexOf(state.popover.activeID) : -1
+  const index =
+    current < 0
+      ? direction === 1
+        ? 0
+        : event.ids.length - 1
+      : (current + direction + event.ids.length) % event.ids.length
+  return changed({ ...state, popover: { ...state.popover, activeID: event.ids[index] } }, [], true)
+}
+
+function promptText(persisted: PromptInputV2PersistedState) {
+  return persisted.prompt.map((part) => (part.type === "text" ? part.content : "")).join("")
+}
+
+function populated(persisted: PromptInputV2PersistedState) {
+  return (
+    !!promptText(persisted).trim() ||
+    persisted.context.items.length > 0 ||
+    persisted.prompt.some((part) => part.type === "file" || part.type === "image")
+  )
+}
+
+function replaceTrigger(value: string, trigger: "@" | "/", replacement: string) {
+  const index = trigger === "/" ? value.indexOf(trigger) : value.lastIndexOf(trigger)
+  return index < 0 ? replacement : value.slice(0, index) + replacement
+}
+
+function changed(
+  state: PromptInputV2InteractionState,
+  commands: PromptInputV2InteractionCommand[] = [],
+  handled = false,
+): PromptInputV2Transition {
+  return { state, commands, handled }
+}
+
+function unchanged(
+  state: PromptInputV2InteractionState,
+  handled = false,
+  commands: PromptInputV2InteractionCommand[] = [],
+): PromptInputV2Transition {
+  return { state, commands, handled }
+}

package/src/v2/components/prompt-input/prompt-input.stories.tsx

@@ -0,0 +1,221 @@
+// @ts-nocheck
+import { createStore } from "solid-js/store"
+import { PromptInputV2, type PromptInputV2PersistedState, type PromptInputV2Suggestion } from "."
+import { createPromptInputV2Controller } from "./interaction"
+import { createPromptInputV2Store } from "./store"
+import { createEffect } from "solid-js"
+
+const agents = [
+  { id: "build", label: "Build" },
+  { id: "plan", label: "Plan" },
+  { id: "review", label: "Review" },
+]
+
+const variants = [
+  { id: "default", label: "Default" },
+  { id: "fast", label: "Fast" },
+  { id: "thinking", label: "Thinking" },
+]
+
+const models = [
+  { id: "claude-sonnet", name: "Claude Sonnet", providerID: "anthropic" },
+  { id: "gpt-5", name: "GPT-5", providerID: "openai" },
+  { id: "gemini-pro", name: "Gemini Pro", providerID: "google" },
+]
+
+const contextSuggestions: PromptInputV2Suggestion[] = [
+  {
+    id: "file-prompt",
+    kind: "file",
+    label: "prompt-input-v2.tsx",
+    path: "src/components/prompt-input-v2.tsx",
+    recent: true,
+    mention: {
+      type: "file",
+      path: "src/components/prompt-input-v2.tsx",
+      content: "@src/components/prompt-input-v2.tsx",
+      start: 0,
+      end: 0,
+    },
+  },
+  {
+    id: "file-story",
+    kind: "file",
+    label: "prompt-input-v2.stories.tsx",
+    path: "src/components/prompt-input-v2.stories.tsx",
+    mention: {
+      type: "file",
+      path: "src/components/prompt-input-v2.stories.tsx",
+      content: "@src/components/prompt-input-v2.stories.tsx",
+      start: 0,
+      end: 0,
+    },
+  },
+  {
+    id: "agent-review",
+    kind: "agent",
+    label: "@review",
+    description: "Ask the review agent",
+    mention: { type: "agent", name: "review", content: "@review", start: 0, end: 0 },
+  },
+  {
+    id: "reference-docs",
+    kind: "reference",
+    label: "@UI guidelines",
+    path: "docs/ui.md",
+    description: "Project reference",
+    mention: {
+      type: "file",
+      path: "docs/ui.md",
+      content: "@UI guidelines",
+      start: 0,
+      end: 0,
+      mime: "application/x-directory",
+      filename: "UI guidelines",
+    },
+  },
+]
+
+const commandSuggestions: PromptInputV2Suggestion[] = [
+  {
+    id: "command-fix",
+    kind: "command",
+    label: "/fix",
+    trigger: "fix",
+    title: "Fix",
+    description: "Fix the current issue",
+    keybind: ["Enter"],
+  },
+  {
+    id: "command-review",
+    kind: "command",
+    label: "/review",
+    trigger: "review",
+    title: "Review",
+    description: "Review pending changes",
+  },
+  {
+    id: "command-test",
+    kind: "command",
+    label: "/test",
+    trigger: "test",
+    title: "Test",
+    description: "Run relevant tests",
+  },
+]
+
+function ControlledPromptInput() {
+  // Agent choice is a persisted user/workspace preference in v1, not part of PromptStore.
+  const [preferences, setPreferences] = createStore({ agent: "build" })
+
+  const [runtime, setRuntime] = createStore({
+    stopping: false,
+  })
+
+  // This matches the v1 PromptStore and can use the same persistence boundary.
+  const state = createStore<PromptInputV2PersistedState>({
+    prompt: [
+      { type: "text", content: "", start: 0, end: 0 },
+      {
+        type: "image",
+        id: "attachment-1",
+        filename: "requirements.md",
+        mime: "text/markdown",
+        dataUrl: "data:text/markdown;base64,IyBSZXF1aXJlbWVudHM=",
+      },
+    ],
+    cursor: 0,
+    model: { providerID: "anthropic", modelID: "claude-sonnet", variant: null },
+    context: {
+      items: [
+        {
+          key: "file:src/components/prompt-input-v2.tsx:1:40",
+          type: "file",
+          path: "src/components/prompt-input-v2.tsx",
+          selection: { startLine: 1, startChar: 0, endLine: 40, endChar: 0 },
+          comment: "Keep this component context-free",
+        },
+      ],
+    },
+  })
+  const store = createPromptInputV2Store(state)
+
+  const controller = createPromptInputV2Controller({
+    store: state,
+    commands: () => commandSuggestions,
+    context: () => contextSuggestions,
+    searchContextFiles: (query) => {
+      const needle = query.trim().toLowerCase()
+      return contextSuggestions.filter(
+        (item) => item.kind === "file" && `${item.label} ${item.path ?? ""}`.toLowerCase().includes(needle),
+      )
+    },
+    view: {
+      add: {
+        onAttach: () => addAttachment("architecture.txt", "text/plain"),
+      },
+      agent: {
+        options: () => agents,
+        current: () => preferences.agent,
+        onSelect: (agent) => setPreferences("agent", agent),
+      },
+      model: {
+        options: () => models.map((model) => ({ id: model.id, label: model.name, providerID: model.providerID })),
+        current: () =>
+          models.find(
+            (model) => model.id === store.state.model?.modelID && model.providerID === store.state.model?.providerID,
+          )?.id ?? "",
+        onSelect(id) {
+          const model = models.find((item) => item.id === id)
+          if (!model) return
+          store.setModel({
+            providerID: model.providerID,
+            modelID: model.id,
+            variant: store.state.model?.variant,
+          })
+        },
+      },
+      variant: {
+        options: () => variants,
+        current: () => store.state.model?.variant ?? "default",
+        onSelect: (variant) => store.setVariant(variant === "default" ? null : variant),
+      },
+      submit: {
+        stopping: () => runtime.stopping,
+        working: () => runtime.stopping,
+        onSubmit: () => {
+          store.reset()
+          setRuntime("stopping", true)
+        },
+        onStop: () => setRuntime("stopping", false),
+      },
+      onDrop: (event) => addAttachment(event.dataTransfer?.files[0]?.name ?? "dropped-file.txt", "text/plain"),
+    },
+  })
+
+  const addAttachment = (filename: string, mime: string) => {
+    store.addAttachment({
+      type: "image",
+      id: `attachment-${store.state.prompt.filter((part) => part.type === "image").length + 1}`,
+      filename,
+      mime,
+      dataUrl: `data:${mime};base64,`,
+    })
+  }
+
+  return (
+    <div class="mx-auto flex max-w-[760px] flex-col gap-4 pt-32">
+      <PromptInputV2 controller={controller} />
+    </div>
+  )
+}
+
+export default {
+  title: "Session UI/PromptInputV2",
+  id: "session-ui-prompt-input-v2",
+  component: PromptInputV2,
+}
+
+export const ControlledComposition = {
+  render: () => <ControlledPromptInput />,
+}

package/src/v2/components/prompt-input/store.test.ts

@@ -0,0 +1,116 @@
+import { describe, expect, test } from "bun:test"
+import { createStore } from "solid-js/store"
+import type { PromptInputV2PersistedState } from "./types"
+import { createPromptInputV2Store } from "./store"
+
+function createPromptStore() {
+  return createPromptInputV2Store(
+    createStore<PromptInputV2PersistedState>({
+      prompt: [
+        { type: "text", content: "old", start: 0, end: 3 },
+        {
+          type: "image",
+          id: "attachment-1",
+          filename: "notes.txt",
+          mime: "text/plain",
+          dataUrl: "data:text/plain;base64,",
+        },
+      ],
+      cursor: 3,
+      model: { providerID: "anthropic", modelID: "claude-sonnet", variant: null },
+      context: { items: [] },
+    }),
+  )
+}
+
+describe("prompt input v2 store", () => {
+  test("accepts an accessor for the backing store", () => {
+    const [state, setState] = createStore<PromptInputV2PersistedState>({
+      prompt: [{ type: "text", content: "", start: 0, end: 0 }],
+      cursor: 0,
+      context: { items: [] },
+    })
+    const prompt = createPromptInputV2Store([() => state, setState])
+
+    prompt.setText("accessed")
+
+    expect(prompt.state.prompt).toEqual([{ type: "text", content: "accessed", start: 0, end: 8 }])
+    expect(prompt.state.cursor).toBe(8)
+  })
+
+  test("updates prompt text and cursor together while preserving attachments", () => {
+    const prompt = createPromptStore()
+
+    prompt.setText("updated")
+
+    expect(prompt.state.prompt).toEqual([
+      { type: "text", content: "updated", start: 0, end: 7 },
+      {
+        type: "image",
+        id: "attachment-1",
+        filename: "notes.txt",
+        mime: "text/plain",
+        dataUrl: "data:text/plain;base64,",
+      },
+    ])
+    expect(prompt.state.cursor).toBe(7)
+  })
+
+  test("inserts text without flattening structured mentions", () => {
+    const [state, setState] = createStore<PromptInputV2PersistedState>({
+      prompt: [
+        { type: "text", content: "A ", start: 0, end: 2 },
+        { type: "file", path: "one", content: "@one", start: 2, end: 6 },
+        { type: "text", content: " B", start: 6, end: 8 },
+      ],
+      cursor: 2,
+      context: { items: [] },
+    })
+    const prompt = createPromptInputV2Store([state, setState])
+
+    prompt.addText("X\nY")
+
+    expect(prompt.state.prompt).toEqual([
+      { type: "text", content: "A X\nY", start: 0, end: 5 },
+      { type: "file", path: "one", content: "@one", start: 5, end: 9 },
+      { type: "text", content: " B", start: 9, end: 11 },
+    ])
+    expect(prompt.state.cursor).toBe(5)
+  })
+
+  test("mutates context, attachments, and model through shared actions", () => {
+    const prompt = createPromptStore()
+    const context = { key: "file:src/index.ts", type: "file" as const, path: "src/index.ts" }
+
+    prompt.addContext(context)
+    prompt.addContext(context)
+    prompt.addMention({ type: "file", path: "src/app.ts", content: "@src/app.ts", start: 0, end: 0 })
+    prompt.removeAttachment("attachment-1")
+    prompt.setVariant("thinking")
+
+    expect(prompt.state.context.items).toEqual([context])
+    expect(prompt.state.prompt).toEqual([
+      { type: "text", content: "old", start: 0, end: 3 },
+      { type: "file", path: "src/app.ts", content: "@src/app.ts", start: 3, end: 14 },
+      { type: "text", content: " ", start: 14, end: 15 },
+    ])
+    expect(prompt.state.model?.variant).toBe("thinking")
+
+    prompt.removeContext(context.key)
+    prompt.setPrompt([{ type: "text", content: "old", start: 0, end: 3 }], 3)
+    prompt.setModel(undefined)
+
+    expect(prompt.state.context.items).toEqual([])
+    expect(prompt.state.prompt).toEqual([{ type: "text", content: "old", start: 0, end: 3 }])
+    expect(prompt.state.model).toBeUndefined()
+  })
+
+  test("resets the prompt and cursor", () => {
+    const prompt = createPromptStore()
+
+    prompt.reset()
+
+    expect(prompt.state.prompt).toEqual([{ type: "text", content: "", start: 0, end: 0 }])
+    expect(prompt.state.cursor).toBe(0)
+  })
+})