reigncode-app 1.3.2

package/src/pages/session/composer/index.ts

@@ -0,0 +1,2 @@
+export { SessionComposerRegion } from "./session-composer-region"
+export { createSessionComposerState } from "./session-composer-state"

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

@@ -0,0 +1,255 @@
+import { Show, createEffect, createMemo, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useSpring } from "@reign-labs/ui/motion-spring"
+import { PromptInput } from "@/components/prompt-input"
+import { useLanguage } from "@/context/language"
+import { usePrompt } from "@/context/prompt"
+import { getSessionHandoff, setSessionHandoff } from "@/pages/session/handoff"
+import { useSessionKey } from "@/pages/session/session-layout"
+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 type { SessionComposerState } from "@/pages/session/composer/session-composer-state"
+import { SessionTodoDock } from "@/pages/session/composer/session-todo-dock"
+import type { FollowupDraft } from "@/components/prompt-input/submit"
+
+export function SessionComposerRegion(props: {
+  state: SessionComposerState
+  ready: boolean
+  centered: boolean
+  inputRef: (el: HTMLDivElement) => void
+  newSessionWorktree: string
+  onNewSessionWorktreeReset: () => void
+  onSubmit: () => void
+  onResponseSubmit: () => void
+  followup?: {
+    queue: () => boolean
+    items: { id: string; text: string }[]
+    sending?: string
+    edit?: { id: string; prompt: FollowupDraft["prompt"]; context: FollowupDraft["context"] }
+    onQueue: (draft: FollowupDraft) => void
+    onAbort: () => void
+    onSend: (id: string) => void
+    onEdit: (id: string) => void
+    onEditLoaded: () => void
+  }
+  revert?: {
+    items: { id: string; text: string }[]
+    restoring?: string
+    disabled?: boolean
+    onRestore: (id: string) => void
+  }
+  setPromptDockRef: (el: HTMLDivElement) => void
+}) {
+  const prompt = usePrompt()
+  const language = useLanguage()
+  const route = useSessionKey()
+
+  const handoffPrompt = createMemo(() => getSessionHandoff(route.sessionKey())?.prompt)
+
+  const previewPrompt = () =>
+    prompt
+      .current()
+      .map((part) => {
+        if (part.type === "file") return `[file:${part.path}]`
+        if (part.type === "agent") return `@${part.name}`
+        if (part.type === "image") return `[image:${part.filename}]`
+        return part.content
+      })
+      .join("")
+      .trim()
+
+  createEffect(() => {
+    if (!prompt.ready()) return
+    setSessionHandoff(route.sessionKey(), { prompt: previewPrompt() })
+  })
+
+  const [store, setStore] = createStore({
+    ready: false,
+    height: 320,
+    body: undefined as HTMLDivElement | undefined,
+  })
+  let timer: number | undefined
+  let frame: number | undefined
+
+  const clear = () => {
+    if (timer !== undefined) {
+      window.clearTimeout(timer)
+      timer = undefined
+    }
+    if (frame !== undefined) {
+      cancelAnimationFrame(frame)
+      frame = undefined
+    }
+  }
+
+  createEffect(() => {
+    route.sessionKey()
+    const ready = props.ready
+    const delay = 140
+
+    clear()
+    setStore("ready", false)
+    if (!ready) return
+
+    frame = requestAnimationFrame(() => {
+      frame = undefined
+      timer = window.setTimeout(() => {
+        setStore("ready", true)
+        timer = undefined
+      }, delay)
+    })
+  })
+
+  onCleanup(clear)
+
+  const open = createMemo(() => store.ready && props.state.dock() && !props.state.closing())
+  const progress = useSpring(() => (open() ? 1 : 0), { visualDuration: 0.3, bounce: 0 })
+  const value = createMemo(() => Math.max(0, Math.min(1, progress())))
+  const dock = createMemo(() => (store.ready && props.state.dock()) || value() > 0.001)
+  const rolled = createMemo(() => (props.revert?.items.length ? props.revert : undefined))
+  const lift = createMemo(() => (rolled() ? 18 : 36 * value()))
+  const full = createMemo(() => Math.max(78, store.height))
+
+  createEffect(() => {
+    const el = store.body
+    if (!el) return
+    const update = () => {
+      setStore("height", el.getBoundingClientRect().height)
+    }
+    update()
+    const observer = new ResizeObserver(update)
+    observer.observe(el)
+    onCleanup(() => observer.disconnect())
+  })
+
+  return (
+    <div
+      ref={props.setPromptDockRef}
+      data-component="session-prompt-dock"
+      class="shrink-0 w-full pb-3 flex flex-col justify-center items-center bg-background-stronger pointer-events-none"
+    >
+      <div
+        classList={{
+          "w-full px-3 pointer-events-auto": true,
+          "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
+        }}
+      >
+        <Show when={props.state.questionRequest()} keyed>
+          {(request) => (
+            <div>
+              <SessionQuestionDock request={request} onSubmit={props.onResponseSubmit} />
+            </div>
+          )}
+        </Show>
+
+        <Show when={props.state.permissionRequest()} keyed>
+          {(request) => (
+            <div>
+              <SessionPermissionDock
+                request={request}
+                responding={props.state.permissionResponding()}
+                onDecide={(response) => {
+                  props.onResponseSubmit()
+                  props.state.decide(response)
+                }}
+              />
+            </div>
+          )}
+        </Show>
+
+        <Show when={!props.state.blocked()}>
+          <Show
+            when={prompt.ready()}
+            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">
+                  {handoffPrompt() || language.t("prompt.loading")}
+                </div>
+              </>
+            }
+          >
+            <Show when={dock()}>
+              <div
+                classList={{
+                  "overflow-hidden": true,
+                  "pointer-events-none": value() < 0.98,
+                }}
+                style={{
+                  "max-height": `${full() * value()}px`,
+                }}
+              >
+                <div ref={(el) => setStore("body", el)}>
+                  <SessionTodoDock
+                    sessionID={route.params.id}
+                    todos={props.state.todos()}
+                    collapseLabel={language.t("session.todo.collapse")}
+                    expandLabel={language.t("session.todo.expand")}
+                    dockProgress={value()}
+                  />
+                </div>
+              </div>
+            </Show>
+            <Show when={rolled()} keyed>
+              {(revert) => (
+                <div
+                  style={{
+                    "margin-top": `${-36 * value()}px`,
+                  }}
+                >
+                  <SessionRevertDock
+                    items={revert.items}
+                    restoring={revert.restoring}
+                    disabled={revert.disabled}
+                    onRestore={revert.onRestore}
+                  />
+                </div>
+              )}
+            </Show>
+            <div
+              classList={{
+                "relative z-10": true,
+              }}
+              style={{
+                "margin-top": `${-lift()}px`,
+              }}
+            >
+              <Show when={props.followup?.items.length}>
+                <SessionFollowupDock
+                  items={props.followup!.items}
+                  sending={props.followup!.sending}
+                  onSend={props.followup!.onSend}
+                  onEdit={props.followup!.onEdit}
+                />
+              </Show>
+              <PromptInput
+                ref={props.inputRef}
+                newSessionWorktree={props.newSessionWorktree}
+                onNewSessionWorktreeReset={props.onNewSessionWorktreeReset}
+                edit={props.followup?.edit}
+                onEditLoaded={props.followup?.onEditLoaded}
+                shouldQueue={props.followup?.queue}
+                onQueue={props.followup?.onQueue}
+                onAbort={props.followup?.onAbort}
+                onSubmit={props.onSubmit}
+              />
+            </div>
+          </Show>
+        </Show>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,128 @@
+import { describe, expect, test } from "bun:test"
+import type { PermissionRequest, QuestionRequest, Session } from "@reign-labs/sdk/v2/client"
+import { 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")
+  })
+})

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

@@ -0,0 +1,249 @@
+import { createEffect, createMemo, on, onCleanup, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import type { PermissionRequest, QuestionRequest, Todo } from "@reign-labs/sdk/v2"
+import { useParams } from "@solidjs/router"
+import { showToast } from "@reign-labs/ui/toast"
+import { useGlobalSync } from "@/context/global-sync"
+import { useLanguage } from "@/context/language"
+import { usePermission } from "@/context/permission"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { composerDriver, composerEnabled, composerEvent } from "@/testing/session-composer"
+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"
+}
+
+const idle = { type: "idle" as const }
+
+export function createSessionComposerState(options?: { closeMs?: number | (() => number) }) {
+  const params = useParams()
+  const sdk = useSDK()
+  const sync = useSync()
+  const globalSync = useGlobalSync()
+  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 [test, setTest] = createStore({
+    on: false,
+    live: undefined as boolean | undefined,
+    todos: undefined as Todo[] | undefined,
+  })
+
+  const pull = () => {
+    const id = params.id
+    if (!id) {
+      setTest({ on: false, live: undefined, todos: undefined })
+      return
+    }
+
+    const next = composerDriver(id)
+    if (!next) {
+      setTest({ on: false, live: undefined, todos: undefined })
+      return
+    }
+
+    setTest({
+      on: true,
+      live: next.live,
+      todos: next.todos?.map((todo) => ({ ...todo })),
+    })
+  }
+
+  onMount(() => {
+    if (!composerEnabled()) return
+
+    pull()
+    createEffect(on(() => params.id, pull, { defer: true }))
+
+    const onEvent = (event: Event) => {
+      const detail = (event as CustomEvent<{ sessionID?: string }>).detail
+      if (detail?.sessionID !== params.id) return
+      pull()
+    }
+
+    window.addEventListener(composerEvent, onEvent)
+    onCleanup(() => window.removeEventListener(composerEvent, onEvent))
+  })
+
+  const todos = createMemo((): Todo[] => {
+    if (test.on && test.todos !== undefined) return test.todos
+    const id = params.id
+    if (!id) return []
+    return globalSync.data.session_todo[id] ?? []
+  })
+
+  const done = createMemo(
+    () => todos().length > 0 && todos().every((todo) => todo.status === "completed" || todo.status === "cancelled"),
+  )
+
+  const status = createMemo(() => {
+    const id = params.id
+    if (!id) return idle
+    return sync.data.session_status[id] ?? idle
+  })
+
+  const busy = createMemo(() => status().type !== "idle")
+  const live = createMemo(() => {
+    if (test.on && test.live !== undefined) return test.live
+    return busy() || blocked()
+  })
+
+  const [store, setStore] = createStore({
+    responding: undefined as string | undefined,
+    dock: todos().length > 0 && 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.client.permission
+      .respond({ sessionID: perm.sessionID, permissionID: perm.id, 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 = () => {
+    if (test.on && test.todos !== undefined) {
+      setTest("todos", [])
+      return
+    }
+    const id = params.id
+    if (!id) return
+    globalSync.todo.set(id, [])
+    sync.set("todo", id, [])
+  }
+
+  createEffect(
+    on(
+      () => [todos().length, done(), live()] as const,
+      ([count, complete, active]) => {
+        if (raf) cancelAnimationFrame(raf)
+        raf = undefined
+
+        const next = todoState({
+          count,
+          done: complete,
+          live: active,
+        })
+
+        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.dock,
+    closing: () => store.closing,
+    opening: () => store.opening,
+  }
+}
+
+export type SessionComposerState = ReturnType<typeof createSessionComposerState>