feat(tui): rail composer chrome for plugins

A bare left rail in the text colour (warning in shell mode), with no
fill, padding or metadata row: the fx-style composer.

Author: cevr

packages/plugin/src/tui/context.ts

@@ -568,9 +568,14 @@ export interface Layout {
   /**
    * The composer's chrome. "bar" is the host default: a left accent bar and a
    * metadata row. "band" is a full-width band on raised.base with a blank row
-   * above and below the editor and the given prefix before it.
+   * above and below the editor and the given prefix before it. "rail" is a bare
+   * left rail in the text colour (the warning colour in shell mode) with no
+   * fill, padding or metadata row.
    */
-  readonly composer?: { readonly chrome: "bar" } | { readonly chrome: "band"; readonly prefix?: string }
+  readonly composer?:
+    | { readonly chrome: "bar" }
+    | { readonly chrome: "band"; readonly prefix?: string }
+    | { readonly chrome: "rail" }
   /**
    * Transcript defaults for users who have not chosen. The user's `session`
    * config wins over them. Fields merge across plugins one by one.

packages/tui/src/component/prompt/index.tsx

@@ -1683,9 +1683,18 @@ export function Prompt(props: PromptProps) {
     const composer = plugins.layout().composer
     return composer?.chrome === "band" ? { prefix: composer.prefix } : undefined
   })
+  // "rail" chrome: a bare left rail in the text colour (the warning colour in
+  // shell mode), no fill, padding or metadata row.
+  const rail = createMemo(() => plugins.layout().composer?.chrome === "rail")
+  const bare = () => band() !== undefined || rail()
   const promptBg = createMemo(() =>
-    band() ? theme.background.raised.base : theme.decrease(theme.background.raised.base),
+    rail()
+      ? RGBA.fromInts(0, 0, 0, 0)
+      : band()
+        ? theme.background.raised.base
+        : theme.decrease(theme.background.raised.base),
   )
+  const railColor = () => (store.mode === "shell" ? theme.text.feedback.warning.base : theme.text.base)
 
   return (
     <>
@@ -1696,17 +1705,17 @@ export function Prompt(props: PromptProps) {
           // Workaround: an OpenTUI box keeps its border once styled (setting
           // `border` back to false leaves the bar drawn), so the band paints the
           // bar in the band colour instead of removing it.
-          borderColor={band() ? promptBg() : borderHighlight()}
+          borderColor={band() ? promptBg() : rail() ? railColor() : borderHighlight()}
           backgroundColor={band() ? promptBg() : undefined}
           customBorderChars={{
             ...SplitBorder.customBorderChars,
             bottomLeft: "╹",
           }}
         >
           <box
-            paddingLeft={band() ? 0 : dimensions().width < 44 ? 1 : 2}
+            paddingLeft={band() ? 0 : rail() ? 1 : dimensions().width < 44 ? 1 : 2}
             paddingRight={dimensions().width < 44 ? 1 : 2}
-            paddingTop={1}
+            paddingTop={rail() ? 0 : 1}
             paddingBottom={band() ? 1 : 0}
             flexShrink={0}
             backgroundColor={promptBg()}
@@ -1878,7 +1887,7 @@ export function Prompt(props: PromptProps) {
               paddingTop={1}
               gap={1}
               justifyContent="space-between"
-              visible={!band()}
+              visible={!bare()}
             >
               <PromptMetadataRow
                 mode={store.mode}
@@ -1899,7 +1908,7 @@ export function Prompt(props: PromptProps) {
         </box>
         <box
           height={1}
-          visible={!band()}
+          visible={!bare()}
           border={["left"]}
           borderColor={borderHighlight()}
           customBorderChars={{

packages/tui/test/fixture/plugin/composer-rail/tui.tsx

@@ -0,0 +1,9 @@
+import { Plugin } from "@opencode/plugin/tui"
+
+// Picks the bare rail composer.
+export default Plugin.define({
+  id: "fixture.composer-rail",
+  setup(context) {
+    context.ui.layout({ composer: { chrome: "rail" } })
+  },
+})

packages/tui/test/plugin-session-hooks.test.tsx

@@ -1,3 +1,4 @@
+import { rgbToHex } from "@opentui/core"
 import { expect, test } from "bun:test"
 import { createAppFixture } from "./fixture/app"
 import { copyPlugin } from "./fixture/fixture"
@@ -188,3 +189,19 @@ test("a plugin claims the transcript's header, first and last rows, user prompt
   // The band composer puts its prefix before the editor. Its bar is still drawn, in the band's colour.
   expect(lines.some((line) => line.startsWith(" ┃> "))).toBe(true)
 })
+
+test("a plugin picks the bare rail composer", async () => {
+  await using app = await openSession("composer-rail")
+  await app.ready
+  const frame = await waitForHighlightedFrame(app, (frame) => frame.includes("The parser is fixed."))
+  const lines = frame.split("\n")
+  // An empty draft is a bare rail: no fill, padding or metadata row before the footer.
+  const rail = lines.findLastIndex((line) => /^ *┃ *$/.test(line))
+  expect(rail).toBeGreaterThan(-1)
+  expect(lines[rail + 1]).toContain("ctrl+p commands")
+  // The rail is drawn in the text colour, as the reply's prose is in the default theme.
+  const spans = app.captureSpans().lines
+  const color = (y: number, text: string) => spans[y]!.spans.find((span) => span.text.includes(text))!.fg
+  const prose = spans.findIndex((line) => line.spans.some((span) => span.text.includes("is fixed")))
+  expect(rgbToHex(color(rail, "┃"))).toBe(rgbToHex(color(prose, "is fixed")))
+})