@neurocode-ai/app 1.18.8

package/src/pages/session/composer/session-composer-region.tsx

@@ -0,0 +1,168 @@
+import { Show, type JSX } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
+import { SessionPermissionDock } from "@/pages/session/composer/session-permission-dock"
+import { SessionQuestionDock } from "@/pages/session/composer/session-question-dock"
+import { SessionFollowupDock } from "@/pages/session/composer/session-followup-dock"
+import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
+import { SessionTodoDock } from "@/pages/session/composer/session-todo-dock"
+import type { SessionComposerRegionController } from "./session-composer-region-controller"
+
+export function SessionComposerRegion(props: {
+  controller: SessionComposerRegionController
+  promptInput: JSX.Element
+}) {
+  const language = useLanguage()
+  const controller = props.controller
+  const settings = useSettings()
+  const rolled = () => {
+    const revert = controller.revert()
+    return revert?.items.length ? revert : undefined
+  }
+
+  return (
+    <div
+      ref={controller.setDockRef}
+      data-component="session-prompt-dock"
+      classList={{
+        "w-full shrink-0 flex flex-col justify-center items-center pb-3 pointer-events-none": true,
+        "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
+        "bg-background-stronger": !settings.general.newLayoutDesigns(),
+      }}
+    >
+      <div
+        classList={{
+          "w-full px-3 pointer-events-auto": true,
+          "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": controller.centered(),
+        }}
+      >
+        <Show when={controller.state.questionRequest()} keyed>
+          {(request) => (
+            <div>
+              <SessionQuestionDock request={request} onSubmit={controller.onResponseSubmit} />
+            </div>
+          )}
+        </Show>
+
+        <Show when={controller.state.permissionRequest()} keyed>
+          {(request) => (
+            <div>
+              <SessionPermissionDock
+                request={request}
+                responding={controller.state.permissionResponding()}
+                onDecide={(response) => {
+                  controller.onResponseSubmit()
+                  controller.state.decide(response)
+                }}
+              />
+            </div>
+          )}
+        </Show>
+
+        <Show when={controller.showComposer()}>
+          <Show when={controller.dock()}>
+            <div
+              classList={{
+                "overflow-hidden": true,
+                "pointer-events-none": controller.dockProgress() < 0.98,
+              }}
+              style={{
+                "max-height": `${controller.dockHeight() * controller.dockProgress()}px`,
+              }}
+            >
+              <div ref={controller.setDockBodyRef}>
+                <SessionTodoDock
+                  todos={controller.state.todos()}
+                  collapsed={controller.todo.collapsed()}
+                  onToggle={controller.todo.onToggle}
+                  collapseLabel={language.t("session.todo.collapse")}
+                  expandLabel={language.t("session.todo.expand")}
+                  dockProgress={controller.dockProgress()}
+                />
+              </div>
+            </div>
+          </Show>
+          <Show
+            when={controller.promptReady()}
+            fallback={
+              <>
+                <Show when={rolled()} keyed>
+                  {(revert) => (
+                    <div class="pb-2">
+                      <SessionRevertDock
+                        items={revert.items}
+                        restoring={revert.restoring}
+                        disabled={revert.disabled}
+                        onRestore={revert.onRestore}
+                      />
+                    </div>
+                  )}
+                </Show>
+                <div
+                  class="w-full min-h-32 md:min-h-40 rounded-md border border-border-weak-base bg-background-base/50 px-4 py-3 text-text-weak whitespace-pre-wrap pointer-events-none"
+                  style={{ "margin-top": `${-36 * controller.dockProgress()}px` }}
+                >
+                  {controller.handoffPrompt() || language.t("prompt.loading")}
+                </div>
+              </>
+            }
+          >
+            <Show when={rolled()} keyed>
+              {(revert) => (
+                <div
+                  style={{
+                    "margin-top": `${-36 * controller.dockProgress()}px`,
+                  }}
+                >
+                  <SessionRevertDock
+                    items={revert.items}
+                    restoring={revert.restoring}
+                    disabled={revert.disabled}
+                    onRestore={revert.onRestore}
+                  />
+                </div>
+              )}
+            </Show>
+            <div
+              classList={{
+                "relative z-[70]": true,
+              }}
+              style={{
+                "margin-top": `${-controller.lift()}px`,
+              }}
+            >
+              <Show when={controller.followup()?.items.length}>
+                <SessionFollowupDock
+                  items={controller.followup()!.items}
+                  sending={controller.followup()!.sending}
+                  onSend={controller.followup()!.onSend}
+                  onEdit={controller.followup()!.onEdit}
+                />
+              </Show>
+              <Show
+                when={controller.child()}
+                fallback={<Show when={!controller.state.blocked()}>{props.promptInput}</Show>}
+              >
+                <div
+                  ref={controller.setPromptRef}
+                  class="w-full rounded-[12px] border border-border-weak-base bg-background-base p-3 text-16-regular text-text-weak"
+                >
+                  <span>{language.t("session.child.promptDisabled")} </span>
+                  <Show when={controller.parentID()}>
+                    <button
+                      type="button"
+                      class="text-text-base transition-colors hover:text-text-strong"
+                      onClick={controller.openParent}
+                    >
+                      {language.t("session.child.backToParent")}
+                    </button>
+                  </Show>
+                </div>
+              </Show>
+            </div>
+          </Show>
+        </Show>
+      </div>
+    </div>
+  )
+}

package/src/pages/session/composer/session-composer-state.test.ts

@@ -0,0 +1,138 @@
+import { describe, expect, test } from "bun:test"
+import type { PermissionRequest, QuestionRequest, Session } from "@neurocode-ai/sdk/v2/client"
+import { todoDockAtBoundary, todoState } from "./session-composer-state"
+import { sessionPermissionRequest, sessionQuestionRequest } from "./session-request-tree"
+
+const session = (input: { id: string; parentID?: string }) =>
+  ({
+    id: input.id,
+    parentID: input.parentID,
+  }) as Session
+
+const permission = (id: string, sessionID: string) =>
+  ({
+    id,
+    sessionID,
+  }) as PermissionRequest
+
+const question = (id: string, sessionID: string) =>
+  ({
+    id,
+    sessionID,
+    questions: [],
+  }) as QuestionRequest
+
+describe("sessionPermissionRequest", () => {
+  test("prefers the current session permission", () => {
+    const sessions = [session({ id: "root" }), session({ id: "child", parentID: "root" })]
+    const permissions = {
+      root: [permission("perm-root", "root")],
+      child: [permission("perm-child", "child")],
+    }
+
+    expect(sessionPermissionRequest(sessions, permissions, "root")?.id).toBe("perm-root")
+  })
+
+  test("returns a nested child permission", () => {
+    const sessions = [
+      session({ id: "root" }),
+      session({ id: "child", parentID: "root" }),
+      session({ id: "grand", parentID: "child" }),
+      session({ id: "other" }),
+    ]
+    const permissions = {
+      grand: [permission("perm-grand", "grand")],
+      other: [permission("perm-other", "other")],
+    }
+
+    expect(sessionPermissionRequest(sessions, permissions, "root")?.id).toBe("perm-grand")
+  })
+
+  test("returns undefined without a matching tree permission", () => {
+    const sessions = [session({ id: "root" }), session({ id: "child", parentID: "root" })]
+    const permissions = {
+      other: [permission("perm-other", "other")],
+    }
+
+    expect(sessionPermissionRequest(sessions, permissions, "root")).toBeUndefined()
+  })
+
+  test("skips filtered permissions in the current tree", () => {
+    const sessions = [session({ id: "root" }), session({ id: "child", parentID: "root" })]
+    const permissions = {
+      root: [permission("perm-root", "root")],
+      child: [permission("perm-child", "child")],
+    }
+
+    expect(sessionPermissionRequest(sessions, permissions, "root", (item) => item.id !== "perm-root"))?.toMatchObject({
+      id: "perm-child",
+    })
+  })
+
+  test("returns undefined when all tree permissions are filtered out", () => {
+    const sessions = [session({ id: "root" }), session({ id: "child", parentID: "root" })]
+    const permissions = {
+      root: [permission("perm-root", "root")],
+      child: [permission("perm-child", "child")],
+    }
+
+    expect(sessionPermissionRequest(sessions, permissions, "root", () => false)).toBeUndefined()
+  })
+})
+
+describe("sessionQuestionRequest", () => {
+  test("prefers the current session question", () => {
+    const sessions = [session({ id: "root" }), session({ id: "child", parentID: "root" })]
+    const questions = {
+      root: [question("q-root", "root")],
+      child: [question("q-child", "child")],
+    }
+
+    expect(sessionQuestionRequest(sessions, questions, "root")?.id).toBe("q-root")
+  })
+
+  test("returns a nested child question", () => {
+    const sessions = [
+      session({ id: "root" }),
+      session({ id: "child", parentID: "root" }),
+      session({ id: "grand", parentID: "child" }),
+    ]
+    const questions = {
+      grand: [question("q-grand", "grand")],
+    }
+
+    expect(sessionQuestionRequest(sessions, questions, "root")?.id).toBe("q-grand")
+  })
+})
+
+describe("todoState", () => {
+  test("hides when there are no todos", () => {
+    expect(todoState({ count: 0, done: false, live: true })).toBe("hide")
+  })
+
+  test("opens while the session is still working", () => {
+    expect(todoState({ count: 2, done: false, live: true })).toBe("open")
+  })
+
+  test("closes completed todos after a running turn", () => {
+    expect(todoState({ count: 2, done: true, live: true })).toBe("close")
+  })
+
+  test("clears stale todos when the turn ends", () => {
+    expect(todoState({ count: 2, done: false, live: false })).toBe("clear")
+  })
+
+  test("clears completed todos when the session is no longer live", () => {
+    expect(todoState({ count: 2, done: true, live: false })).toBe("clear")
+  })
+})
+
+describe("todoDockAtBoundary", () => {
+  test("shows active todos when entering a session", () => {
+    expect(todoDockAtBoundary("open")).toBe(true)
+  })
+
+  test("hides completed todos when entering a session", () => {
+    expect(todoDockAtBoundary("close")).toBe(false)
+  })
+})

package/src/pages/session/composer/session-composer-state.ts

@@ -0,0 +1,204 @@
+import { createEffect, createMemo, on, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import type { PermissionRequest, QuestionRequest, Todo } from "@neurocode-ai/sdk/v2"
+import { useParams } from "@solidjs/router"
+import { showToast } from "@/utils/toast"
+import { useServerSync } from "@/context/server-sync"
+import { useLanguage } from "@/context/language"
+import { usePermission } from "@/context/permission"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { sessionPermissionRequest, sessionQuestionRequest } from "./session-request-tree"
+
+export const todoState = (input: {
+  count: number
+  done: boolean
+  live: boolean
+}): "hide" | "clear" | "open" | "close" => {
+  if (input.count === 0) return "hide"
+  if (!input.live) return "clear"
+  if (!input.done) return "open"
+  return "close"
+}
+
+export const todoDockAtBoundary = (state: ReturnType<typeof todoState>) => state === "open"
+
+const idle = { type: "idle" as const }
+
+export function createSessionComposerController(options?: { closeMs?: number | (() => number) }) {
+  const params = useParams()
+  const sdk = useSDK()
+  const sync = useSync()
+  const serverSync = useServerSync()
+  const language = useLanguage()
+  const permission = usePermission()
+
+  const questionRequest = createMemo((): QuestionRequest | undefined => {
+    return sessionQuestionRequest(sync().data.session, sync().data.question, params.id)
+  })
+
+  const permissionRequest = createMemo((): PermissionRequest | undefined => {
+    return sessionPermissionRequest(sync().data.session, sync().data.permission, params.id, (item) => {
+      return !permission.autoResponds(item, sdk().directory)
+    })
+  })
+
+  const blocked = createMemo(() => {
+    const id = params.id
+    if (!id) return false
+    return !!permissionRequest() || !!questionRequest()
+  })
+
+  const todos = createMemo((): Todo[] => {
+    const id = params.id
+    if (!id) return []
+    return serverSync().session.data.todo[id] ?? []
+  })
+
+  const done = createMemo(
+    () => todos().length > 0 && todos().every((todo) => todo.status === "completed" || todo.status === "cancelled"),
+  )
+
+  const live = createMemo(() => sync().data.session_working(params.id ?? "") || blocked())
+
+  const [store, setStore] = createStore({
+    sessionID: params.id,
+    responding: undefined as string | undefined,
+    dock: todos().length > 0 && !done() && live(),
+    closing: false,
+    opening: false,
+  })
+
+  const permissionResponding = createMemo(() => {
+    const perm = permissionRequest()
+    if (!perm) return false
+    return store.responding === perm.id
+  })
+
+  const decide = (response: "once" | "always" | "reject") => {
+    const perm = permissionRequest()
+    if (!perm) return
+    if (store.responding === perm.id) return
+
+    setStore("responding", perm.id)
+    sdk()
+      .api.permission.reply({ sessionID: perm.sessionID, requestID: perm.id, reply: response })
+      .catch((err: unknown) => {
+        const description = err instanceof Error ? err.message : String(err)
+        showToast({ title: language.t("common.requestFailed"), description })
+      })
+      .finally(() => {
+        setStore("responding", (id) => (id === perm.id ? undefined : id))
+      })
+  }
+
+  let timer: number | undefined
+  let raf: number | undefined
+
+  const closeMs = () => {
+    const value = options?.closeMs
+    if (typeof value === "function") return Math.max(0, value())
+    if (typeof value === "number") return Math.max(0, value)
+    return 400
+  }
+
+  const scheduleClose = () => {
+    if (timer) window.clearTimeout(timer)
+    timer = window.setTimeout(() => {
+      setStore({ dock: false, closing: false })
+      timer = undefined
+    }, closeMs())
+  }
+
+  // Keep stale turn todos from reopening if the model never clears them.
+  const clear = () => {
+    const id = params.id
+    if (!id) return
+    sync().set("todo", id, [])
+  }
+
+  createEffect(
+    on(
+      () => [params.id, todos().length, done(), live()] as const,
+      ([id, count, complete, active], previous) => {
+        if (raf) cancelAnimationFrame(raf)
+        raf = undefined
+
+        const next = todoState({
+          count,
+          done: complete,
+          live: active,
+        })
+
+        if (!previous || previous[0] !== id) {
+          if (timer) window.clearTimeout(timer)
+          timer = undefined
+          setStore({ sessionID: id, dock: todoDockAtBoundary(next), closing: false, opening: false })
+          if (next === "clear") clear()
+          return
+        }
+
+        if (next === "hide") {
+          if (timer) window.clearTimeout(timer)
+          timer = undefined
+          setStore({ dock: false, closing: false, opening: false })
+          return
+        }
+
+        if (next === "clear") {
+          if (timer) window.clearTimeout(timer)
+          timer = undefined
+          clear()
+          return
+        }
+
+        if (next === "open") {
+          if (timer) window.clearTimeout(timer)
+          timer = undefined
+          const hidden = !store.dock || store.closing
+          setStore({ dock: true, closing: false })
+          if (hidden) {
+            setStore("opening", true)
+            raf = requestAnimationFrame(() => {
+              setStore("opening", false)
+              raf = undefined
+            })
+            return
+          }
+          setStore("opening", false)
+          return
+        }
+
+        setStore({ dock: true, opening: false, closing: true })
+        if (!timer) scheduleClose()
+      },
+    ),
+  )
+
+  onCleanup(() => {
+    if (!timer) return
+    window.clearTimeout(timer)
+  })
+
+  onCleanup(() => {
+    if (!raf) return
+    cancelAnimationFrame(raf)
+  })
+
+  return {
+    blocked,
+    questionRequest,
+    permissionRequest,
+    permissionResponding,
+    decide,
+    todos,
+    dock: () =>
+      store.sessionID === params.id
+        ? store.dock
+        : todoDockAtBoundary(todoState({ count: todos().length, done: done(), live: live() })),
+    closing: () => store.sessionID === params.id && store.closing,
+    opening: () => store.sessionID === params.id && store.opening,
+  }
+}
+
+export type SessionComposerController = ReturnType<typeof createSessionComposerController>

package/src/pages/session/composer/session-followup-dock.tsx

@@ -0,0 +1,109 @@
+import { For, Show, createMemo } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Button } from "@neurocode-ai/ui/button"
+import { DockTray } from "@neurocode-ai/ui/dock-surface"
+import { IconButton } from "@neurocode-ai/ui/icon-button"
+import { useLanguage } from "@/context/language"
+
+export function SessionFollowupDock(props: {
+  items: { id: string; text: string }[]
+  sending?: string
+  onSend: (id: string) => void
+  onEdit: (id: string) => void
+}) {
+  const language = useLanguage()
+  const [store, setStore] = createStore({
+    collapsed: false,
+  })
+
+  const toggle = () => setStore("collapsed", (value) => !value)
+  const total = createMemo(() => props.items.length)
+  const label = createMemo(() =>
+    language.t(total() === 1 ? "session.followupDock.summary.one" : "session.followupDock.summary.other", {
+      count: total(),
+    }),
+  )
+  const preview = createMemo(() => props.items[0]?.text ?? "")
+
+  return (
+    <DockTray
+      data-component="session-followup-dock"
+      style={{
+        "margin-bottom": "-0.875rem",
+        "border-bottom-left-radius": 0,
+        "border-bottom-right-radius": 0,
+      }}
+    >
+      <div
+        class="pl-3 pr-2 py-2 flex items-center gap-2"
+        role="button"
+        tabIndex={0}
+        onClick={toggle}
+        onKeyDown={(event) => {
+          if (event.key !== "Enter" && event.key !== " ") return
+          event.preventDefault()
+          toggle()
+        }}
+      >
+        <span class="shrink-0 text-13-medium text-text-strong cursor-default">{label()}</span>
+        <Show when={store.collapsed && preview()}>
+          <span class="min-w-0 flex-1 truncate text-13-regular text-text-base cursor-default">{preview()}</span>
+        </Show>
+        <div class="ml-auto shrink-0">
+          <IconButton
+            data-collapsed={store.collapsed ? "true" : "false"}
+            icon="chevron-down"
+            size="normal"
+            variant="ghost"
+            style={{ transform: `rotate(${store.collapsed ? 180 : 0}deg)` }}
+            onMouseDown={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+            }}
+            onClick={(event) => {
+              event.stopPropagation()
+              toggle()
+            }}
+            aria-label={
+              store.collapsed ? language.t("session.followupDock.expand") : language.t("session.followupDock.collapse")
+            }
+          />
+        </div>
+      </div>
+
+      <Show when={store.collapsed}>
+        <div class="h-5" aria-hidden="true" />
+      </Show>
+
+      <Show when={!store.collapsed}>
+        <div class="px-3 pb-7 flex flex-col gap-1.5 max-h-42 overflow-y-auto no-scrollbar">
+          <For each={props.items}>
+            {(item) => (
+              <div class="flex items-center gap-2 min-w-0 py-1">
+                <span class="min-w-0 flex-1 truncate text-13-regular text-text-strong">{item.text}</span>
+                <Button
+                  size="small"
+                  variant="secondary"
+                  class="shrink-0"
+                  disabled={!!props.sending}
+                  onClick={() => props.onSend(item.id)}
+                >
+                  {language.t("session.followupDock.sendNow")}
+                </Button>
+                <Button
+                  size="small"
+                  variant="ghost"
+                  class="shrink-0"
+                  disabled={!!props.sending}
+                  onClick={() => props.onEdit(item.id)}
+                >
+                  {language.t("session.followupDock.edit")}
+                </Button>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+    </DockTray>
+  )
+}

package/src/pages/session/composer/session-permission-dock.tsx

@@ -0,0 +1,74 @@
+import { For, Show } from "solid-js"
+import type { PermissionRequest } from "@neurocode-ai/sdk/v2"
+import { Button } from "@neurocode-ai/ui/button"
+import { DockPrompt } from "@neurocode-ai/session-ui/dock-prompt"
+import { Icon } from "@neurocode-ai/ui/icon"
+import { useLanguage } from "@/context/language"
+
+export function SessionPermissionDock(props: {
+  request: PermissionRequest
+  responding: boolean
+  onDecide: (response: "once" | "always" | "reject") => void
+}) {
+  const language = useLanguage()
+
+  const toolDescription = () => {
+    const key = `settings.permissions.tool.${props.request.permission}.description`
+    const value = language.t(key as Parameters<typeof language.t>[0])
+    if (value === key) return ""
+    return value
+  }
+
+  return (
+    <DockPrompt
+      kind="permission"
+      header={
+        <div data-slot="permission-row" data-variant="header">
+          <span data-slot="permission-icon">
+            <Icon name="warning" size="normal" />
+          </span>
+          <div data-slot="permission-header-title">{language.t("notification.permission.title")}</div>
+        </div>
+      }
+      footer={
+        <>
+          <div />
+          <div data-slot="permission-footer-actions">
+            <Button variant="ghost" size="normal" onClick={() => props.onDecide("reject")} disabled={props.responding}>
+              {language.t("ui.permission.deny")}
+            </Button>
+            <Button
+              variant="secondary"
+              size="normal"
+              onClick={() => props.onDecide("always")}
+              disabled={props.responding}
+            >
+              {language.t("ui.permission.allowAlways")}
+            </Button>
+            <Button variant="primary" size="normal" onClick={() => props.onDecide("once")} disabled={props.responding}>
+              {language.t("ui.permission.allowOnce")}
+            </Button>
+          </div>
+        </>
+      }
+    >
+      <Show when={toolDescription()}>
+        <div data-slot="permission-row">
+          <span data-slot="permission-spacer" aria-hidden="true" />
+          <div data-slot="permission-hint">{toolDescription()}</div>
+        </div>
+      </Show>
+
+      <Show when={props.request.patterns.length > 0}>
+        <div data-slot="permission-row">
+          <span data-slot="permission-spacer" aria-hidden="true" />
+          <div data-slot="permission-patterns">
+            <For each={props.request.patterns}>
+              {(pattern) => <code class="text-12-regular text-text-base break-all">{pattern}</code>}
+            </For>
+          </div>
+        </div>
+      </Show>
+    </DockPrompt>
+  )
+}