@rse/ase 2.0.6 → 2.0.8

package/package.json

@@ -6,7 +6,7 @@
     "homepage":                             "https://ase.tools",
     "repository":                           { "url": "git+https://github.com/rse/ase.git", "type": "git" },
     "bugs":                                 { "url": "https://github.com/rse/ase/issues" },
-    "version":                              "2.0.6",
+    "version":                              "2.0.8",
     "license":                              "Apache-2.0",
     "author": {
         "name":                             "Dr. Ralf S. Engelschall",
@@ -31,7 +31,7 @@
         "globals":                          "17.14.0",
         "typescript":                       "6.0.3",
         "eslint-plugin-vue":                "10.12.0",
-        "vue-eslint-parser":                "10.4.1",
+        "vue-eslint-parser":                "10.4.2",
         "vue-tsc":                          "3.3.14",
 
         "@rse/stx":                         "1.1.7",
@@ -39,9 +39,9 @@
         "shx":                              "0.4.0",
         "sync-directory":                   "6.0.6",
         "stylus":                           "0.64.0",
-        "vite":                             "8.3.5",
+        "vite":                             "8.3.6",
         "@vitejs/plugin-vue":               "6.0.10",
-        "vue":                              "3.5.44",
+        "vue":                              "3.5.45",
         "mousetrap":                        "1.6.5",
         "@codemirror/view":                 "6.43.15",
         "@codemirror/state":                "6.7.6",
@@ -78,7 +78,7 @@
         "valibot":                          "1.5.0",
         "execa":                            "10.2.1",
         "mkdirp":                           "3.0.1",
-        "@hapi/hapi":                       "21.4.12",
+        "@hapi/hapi":                       "21.4.13",
         "beautiful-mermaid":                "1.1.3",
         "@d2lang/d2":                       "0.1.34",
         "elkjs":                            "0.12.1",
@@ -86,8 +86,9 @@
         "string-width":                     "8.3.0",
         "react":                            "19.3.1",
         "chokidar":                         "6.0.0",
-        "marked":                           "18.1.2",
-        "shiki":                            "4.5.0",
+        "marked":                           "18.1.3",
+        "diff":                             "9.0.0",
+        "shiki":                            "4.6.0",
         "cli-table3":                       "0.6.5",
         "chalk":                            "6.0.1",
         "pretty-ms":                        "10.0.0",
@@ -97,7 +98,7 @@
         "zod":                              "4.6.7",
         "which":                            "7.0.0",
         "update-notifier":                  "7.3.1",
-        "semver":                           "7.8.5",
+        "semver":                           "7.8.6",
         "shell-quote":                      "1.12.0",
         "get-stdin":                        "10.0.0",
         "proper-lockfile":                  "4.1.2",
@@ -105,10 +106,10 @@
         "p-queue":                          "10.0.0",
         "pacote":                           "22.0.1",
         "ofetch":                           "1.5.1",
-        "undici":                           "8.12.3",
+        "undici":                           "8.12.4",
         "picomatch":                        "4.0.7",
         "lru-cache":                        "11.5.3",
-        "@rse/specbook":                    "1.6.1",
+        "@rse/specbook":                    "1.6.2",
         "markdownlint":                     "0.42.0",
         "tail":                             "2.2.6",
         "source-code-error":                "1.2.0",

package/plugin/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
     "name":        "ase",
-    "version":     "2.0.6",
+    "version":     "2.0.8",
     "description": "Agentic Software Engineering (ASE)",
     "keywords":    [ "agentic", "software", "engineering" ],
     "homepage":    "https://ase.tools",

package/plugin/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
     "name":        "ase",
-    "version":     "2.0.6",
+    "version":     "2.0.8",
     "description": "Agentic Software Engineering (ASE)",
     "keywords":    [ "agentic", "software", "engineering" ],
     "homepage":    "https://ase.tools",

package/plugin/.github/plugin/plugin.json

@@ -1,6 +1,6 @@
 {
     "name":        "ase",
-    "version":     "2.0.6",
+    "version":     "2.0.8",
     "description": "Agentic Software Engineering (ASE)",
     "keywords":    [ "agentic", "software", "engineering" ],
     "homepage":    "https://ase.tools",

package/plugin/meta/ase-common-task.md

@@ -58,6 +58,30 @@ Task Skill Common Steps
 
 </define>
 
+<define name="task-focus">
+
+Resolve the plan sections under focus: treat <getopt-option-focus/> as a
+comma-separated list of *section tokens*. Trim every token, then expand
+the synonyms `SPEC` and `WHAT` to `SPECIFICATION`, the synonyms `DES` and
+`HOW` to `DESIGN`, and the synonyms `VERIFY`, `VER`, and `WHEN` to
+`VERIFICATION`, and expand the sentinel `all` (the default) to
+`SPECIFICATION,DESIGN,VERIFICATION`. Set <sections/> to the resulting
+list, *keeping the given order*. The getopt parser validates only the
+*first* token, so you *MUST* validate each token yourself: if any token
+is *empty*, *not* one of the recognized sections or synonyms (matched
+*case-sensitively*), or results in a section already present in
+<sections/>, bind <token/> to that offending token, then only output the
+following <template/> and immediately *STOP* processing the entire
+current skill:
+
+<template>
+⧉ **ASE**: ☻ skill: **<arg1/>**, ▶ ERROR: invalid `--focus` token: **<token/>**
+</template>
+
+Do not output anything else.
+
+</define>
+
 <define name="task-load-content">
 
 <if condition="
@@ -227,10 +251,18 @@ related to this MCP call except the following <template/>:
     custom dialog according to the expanded `custom-dialog`
     definition. You *MUST* closely follow this definition:
 
-    <expand name="custom-dialog" arg1="--no-other">
+    <expand name="custom-dialog" arg1="--other">
         <content/>
     </expand>
 
+    If <result/> matches `OTHER: <text/>`, the user typed a free-text
+    request instead of choosing an option: treat it as an implicit
+    `DONE`, i.e., set <result>DONE</result>, and let the calling skill
+    finish along its `DONE` dispatch (output its `DONE` template).
+    Its *STOP* then ends only the skill, *not* the current turn:
+    immediately afterwards, handle <text/> as a regular user request,
+    outside of any skill, without re-opening this dialog.
+
 </define>
 
 <define name="task-next-handoff">

package/plugin/meta/ase-control.md

@@ -187,3 +187,17 @@ Control Flow Constructs
     the order of their occurrence in <parallel-body/>. This construct is
     expanded to its <parallel-body/>. Do not output anything else.
 
+-   *IMPORTANT*: You *MUST* honor the following rule for *all*
+    concurrently dispatched sub-agents -- whether invoked through
+    <parallel/> or through multiple `Agent` tool invocations emitted in
+    one single message:
+
+    The agent tool may run sub-agents in the *background* (e.g.
+    *Anthropic Claude Code CLI* ignores `run_in_background: false`) and
+    then notifies you of each returned sub-agent individually. While
+    these notifications arrive, you *MUST* *NOT* output anything -- no
+    progress messages (like `Batch 3 of 8 is back, 5 still running`),
+    no intermediate results, and no waiting notices -- but silently wait
+    for the remaining sub-agents. Only once *all* of them have returned,
+    continue with the processing which consumes their results.
+

package/plugin/meta/ase-format-specbook.yaml

@@ -125,7 +125,7 @@
   id: DG
   file: 03-REQS-DG-Domain-Glossary.md
   desc: >
-    The ubiquitous language of the domain, defining the meaning of each domain term in business language, together with its synonyms, its place in the hierarchy of terms, and the terms it has to be kept apart from, shared consistently across all Artifacts.
+    The ubiquitous language of the domain, defining the meaning of each domain term in business language, together with its synonyms, its place in the hierarchy of terms, and the terms it has to be kept apart from, shared consistently across all artifacts.
   optional: true
   children:
     - kind: TERM
@@ -581,7 +581,7 @@
           optional: true
         - name: TRIGGER
           desc: >
-            The event that starts the use case, stated as a 1-sentence occurrence (e.g. `The attendee opens the event URL.`), as opposed to the `PRE-CONDITION` which is a state that has to hold, and matching the `When <trigger>` of the event-driven Functional Requirements the use case exercises.
+            The event that starts the use case, stated as a 1-sentence occurrence (e.g. `The attendee opens the event URL.`), as opposed to the `PRE-CONDITION`, which is a state that has to hold, and matching the `When <trigger>` of the event-driven Functional Requirements the use case exercises.
           optional: true
         - name: POST-CONDITION
           desc: >
@@ -847,7 +847,7 @@
             The kind of the interface, one of:
             -   `REST`:      HTTP resources addressed by URL paths and HTTP methods.
             -   `GraphQL`:   A GraphQL schema of queries, mutations, and subscriptions.
-            -   `gRPC`:      Protocol Buffers based remote procedure calls.
+            -   `gRPC`:      Protocol Buffers-based remote procedure calls.
             -   `WebSocket`: Messages exchanged over a WebSocket connection.
             -   `MQTT`:      Messages published to and subscribed from MQTT topics.
             -   `MCP`:       Tools, resources, and prompts of a Model Context Protocol server.
@@ -1322,7 +1322,7 @@
       props:
         - name: MAXIMS
           desc: >
-            Comma-separated references to the MAXIM objects the principle concretizes (e.g. a `Stateless Services` principle concretizing a `Scale Out over Scale Up` maxim), so that the principles form a hierarchy below the maxims rather than a flat catalogue; omitted for a principle standing on its own forces alone.
+            Comma-separated references to the MAXIM objects the principle concretizes (e.g. a `Stateless Services` principle concretizing a `Scale Out over Scale Up` maxim), so that the principles form a hierarchy below the maxims rather than a flat catalog; omitted for a principle standing on its own forces alone.
           value: list([[MAXIM:*]])
           optional: true
         - name: DRIVEN-BY
@@ -1362,7 +1362,7 @@
           optional: true
         - name: USES
           desc: >
-            Comma-separated references to the smaller ARCHITECTURE-PATTERNS objects the pattern is composed of (e.g. a `Saga` using a `Transactional Outbox` for its steps), so that the patterns form a language of related structures rather than a flat catalogue.
+            Comma-separated references to the smaller ARCHITECTURE-PATTERNS objects the pattern is composed of (e.g. a `Saga` using a `Transactional Outbox` for its steps), so that the patterns form a language of related structures rather than a flat catalog.
           value: list([[PATTERN:*]])
           optional: true
           acyclic: true
@@ -1663,7 +1663,7 @@
           desc: >
             A single technology component, named with a short (2-5 word) summary (e.g. `UI Framework`, `Web Server`, `Relational Database`) and described in a concise (1-3 sentence) paragraph by how the product is used within the solution and how it fits into the overall technology stack, plus a 1-sentence rationale ("why") for choosing this product over the alternatives.
 
-            A component states one product in one role on one tier: the product used by several tiers alike belongs to the `Common` tier once, the lock-in carrying trade-off behind the choice is a Design Decisions decision referencing the component through `DECIDES`, and the functional components depending on the product reference it through `USED-BY`.
+            A component states one product in one role on one tier: the product used by several tiers alike belongs to the `Common` tier once, the lock-in-carrying trade-off behind the choice is a Design Decisions decision referencing the component through `DECIDES`, and the functional components depending on the product reference it through `USED-BY`.
           props:
             - name: PRODUCT
               desc: >
@@ -2395,7 +2395,7 @@
           optional: true
         - name: USES
           desc: >
-            Comma-separated references to the smaller CODE-PATTERNS objects the pattern is composed of (e.g. an `Endpoint Authorization` using the `Error Propagation` for its rejections), so that the patterns form a language of related shapes rather than a flat catalogue.
+            Comma-separated references to the smaller CODE-PATTERNS objects the pattern is composed of (e.g. an `Endpoint Authorization` using the `Error Propagation` for its rejections), so that the patterns form a language of related shapes rather than a flat catalog.
           value: list([[CODE-PATTERN:*]])
           optional: true
           acyclic: true
@@ -2449,8 +2449,8 @@
             The mandatory, concrete input data or action applied during the test, i.e. the stimulus whose response the `EXPECTED` judges.
         - name: EXPECTED
           desc: >
-            The mandatory, concrete, observable response of the solution to the `INPUT` (a message shown, a session issued, a submission rejected) that defines a passing test, as opposed to the `POST-CONDITION` which is the state left behind. When the test case verifies a NON-FUNCTIONAL-REQUIREMENTS object, the expected response restates the `METRIC` threshold of that requirement as the pass criterion (e.g. `p95 latency < 200 ms`) rather than a qualitative phrase (e.g. `remains responsive`).
+            The mandatory, concrete, observable response of the solution to the `INPUT` (a message shown, a session issued, a submission rejected) that defines a passing test, as opposed to the `POST-CONDITION`, which is the state left behind. When the test case verifies a NON-FUNCTIONAL-REQUIREMENTS object, the expected response restates the `METRIC` threshold of that requirement as the pass criterion (e.g. `p95 latency < 200 ms`) rather than a qualitative phrase (e.g. `remains responsive`).
         - name: POST-CONDITION
           desc: >
-            The persisted state that must hold after the test completes (e.g. `the authorization token is in state used`), including the state that must not have changed (e.g. `no session token exists`), as opposed to the `EXPECTED` which is the immediate response, and omitted for a test whose input leaves no state behind.
+            The persisted state that must hold after the test completes (e.g. `the authorization token is in state used`), including the state that must not have changed (e.g. `no session token exists`), as opposed to the `EXPECTED`, which is the immediate response, and omitted for a test whose input leaves no state behind.
           optional: true

package/plugin/meta/ase-skill.md

@@ -232,6 +232,13 @@ Skill Identification
     ⧉ **ASE**: ✪ skill: **<skill-name/>**, ✦ purpose: **<purpose/>**, ▶ status: **skill started**
     </template>
 
+    You *MUST* output this <template/> *immediately* as the *very first*
+    output of the skill, *before* any tool call (including the
+    `ase_getopt` call) and *before* any work of the skill, and also when
+    the skill was invoked via the `Skill` tool from another skill. Any
+    "Do not output anything" instruction of the subsequent steps does
+    *NOT* suppress or defer it.
+
     Later (but only if ((`$1` is *NOT* equal to `-h` or `--help`) *AND*
     (<ase-guidance-level/> is equal to `normal` or `verbose`))), once
     this skill finally will stop processing, you *MUST* once output the

package/plugin/mods/ase-mods-common.ts

@@ -6,20 +6,21 @@
 
 /*  Claude Code function hooks module ("mod", EARLY ACCESS):
     Common parts, shared by the grill table, the decision matrix, the intent
-    help, the synopsis form, the manual band, the manpage browser, and the hint
-    band: the rows of the Markdown tables, the styled characters of the terminal
+    help, the synopsis form, the manual band, the manpage browser, the hint band,
+    and the task band: the rows of the Markdown tables, the styled characters of the terminal
     drawing, their Markdown conversion, wrapping, and framing, and the contract,
     keys, geometry, and drawing of the master/detail view in the band above the
     prompt.  */
 
 import type { Elements, Frozen, MatchedEvent, ModelCompleteRequest, ModelForkResult,
-    PromptBox, PromptEditInput, PromptFilled, RenderElement } from "claude-code"
+    PromptBox, PromptEditInput, PromptFilled, RenderElement, Timer } from "claude-code"
 
 /*  the services of the engine, bound by the hooking infrastructure for the
     modules (as the engine refuses to load a module passing "$" itself): the
     redrawing, the reading of a plugin file and of the names of the directories
     in a plugin directory, the forked and the plain model completion, the
-    waiting, and the reading and filling of the prompt  */
+    waiting, the reading and filling of the prompt, the loading of a task
+    (with its entity tag), and the running of a repeating timer  */
 export type Engine = {
     invalidate: () => void,
     read:       (file: string) => Promise<string>,
@@ -28,7 +29,9 @@ export type Engine = {
     complete:   (request: ModelCompleteRequest) => Promise<string>,
     sleep:      (ms: number) => Promise<void>,
     prompt:     () => Promise<PromptBox>,
-    fill:       (text: string) => Promise<PromptFilled>
+    fill:       (text: string) => Promise<PromptFilled>,
+    load:       (id: string) => Promise<string>,
+    every:      (ms: number, fn: () => void) => Timer
 }
 
 /*  the colors of a picked (resp. selected or focused) item, of a code span,
@@ -131,7 +134,7 @@ export const cells = (line: string): string[] => {
 }
 
 /*  a single styled character of the terminal drawing  */
-export type Char = { ch: string, bold: boolean, color: string | undefined }
+export type Char = { ch: string, bold: boolean, color: string | undefined, italic?: boolean, inverse?: boolean, background?: string }
 
 /*  extract a section of a manual page (without its heading)  */
 export const section = (manual: string, name: string): string =>
@@ -225,16 +228,21 @@ export const wrap = (chars: Char[], columns: number, indent: number, lead = 0):
 }
 
 /*  a run of equally styled characters  */
-type Run = { text: string, bold: boolean, color: string | undefined }
+type Run = { text: string, bold: boolean, color: string | undefined, italic: boolean, inverse: boolean, background: string | undefined }
 
 /*  split a line of styled characters into runs of equally styled characters  */
 export const split = (chars: Char[]): Run[] => {
     const runs: Run[] = []
     for (let i = 0, j = 0; i < chars.length; i = j) {
         const { bold, color } = chars[i]!
-        while (j < chars.length && chars[j]!.bold === bold && chars[j]!.color === color)
+        const italic  = chars[i]!.italic  ?? false
+        const inverse = chars[i]!.inverse ?? false
+        const { background } = chars[i]!
+        while (j < chars.length && chars[j]!.bold === bold && chars[j]!.color === color &&
+            (chars[j]!.italic ?? false) === italic && (chars[j]!.inverse ?? false) === inverse &&
+            chars[j]!.background === background)
             j++
-        runs.push({ text: chars.slice(i, j).map((char) => char.ch).join(""), bold, color })
+        runs.push({ text: chars.slice(i, j).map((char) => char.ch).join(""), bold, color, italic, inverse, background })
     }
     return runs
 }
@@ -307,15 +315,15 @@ export const frame = (lines: Char[][], columns: number, color: string | undefine
 }
 
 /*  split a horizontal edge of a frame into runs with a title placed after its
-    first and another one before its last two characters (each if it fits, the
-    one at the end with precedence), flagged whether they are a title  */
-const titled = (line: string, head: string, tail: string): [ string, boolean ][] => {
-    const end   = tail !== "" && line.length >= tail.length + 4 ? tail : ""
-    const start = head !== "" && line.length >= head.length + (end !== "" ? end.length + 6 : 4) ? head : ""
-    const k     = end !== "" ? line.length - 2 - end.length : line.length
+    first "lead" and another one before its last "trail" characters (each if it
+    fits, the one at the end with precedence), flagged whether they are a title  */
+const titled = (line: string, head: string, tail: string, lead: number, trail: number): [ string, boolean ][] => {
+    const end   = tail !== "" && line.length >= tail.length + trail + 2 ? tail : ""
+    const start = head !== "" && line.length >= head.length + lead + trail + (end !== "" ? end.length + 2 : 0) ? head : ""
+    const k     = end !== "" ? line.length - trail - end.length : line.length
     return [
-        ...(start !== "" ? [ [ line.slice(0, 2), false ], [ start, true ] ] as [ string, boolean ][] : []),
-        [ line.slice(start !== "" ? 2 + start.length : 0, k), false ],
+        ...(start !== "" ? [ [ line.slice(0, lead), false ], [ start, true ] ] as [ string, boolean ][] : []),
+        [ line.slice(start !== "" ? lead + start.length : 0, k), false ],
         ...(end !== "" ? [ [ end, true ], [ line.slice(k + end.length), false ] ] as [ string, boolean ][] : [])
     ]
 }
@@ -348,14 +356,15 @@ export type Text = Elements["terminal"]["Text"]
 
 /*  draw a line of styled characters: its styled runs  */
 export const paint = (Text: Text, chars: Char[]): (string | RenderElement)[] =>
-    split(chars).map(({ text, bold, color }) =>
-        bold || color !== undefined ? Text({ bold, color, children: text }) : text)
+    split(chars).map(({ text, bold, color, italic, inverse, background }) =>
+        bold || italic || inverse || color !== undefined || background !== undefined ?
+            Text({ bold, italic, inverse, color, backgroundColor: background, children: text }) : text)
 
 /*  draw a horizontal edge of the self-drawn frame (dimmed), with titles at its
     start and its end (with their brackets dimmed, an "ASE" prefix before a colon
     in bold, and the rest dimmed)  */
-const edge = (Text: Text, line: string, head = "", tail = ""): RenderElement =>
-    Text({ children: titled(line, head, tail).flatMap(([ text, label ]) => {
+const edge = (Text: Text, line: string, head = "", tail = "", lead = 2, trail = 2): RenderElement =>
+    Text({ children: titled(line, head, tail, lead, trail).flatMap(([ text, label ]) => {
         const m = /^(\[ )?([^:]*)(:.*?)( \])?$/.exec(text)
         if (!label || m === null)
             return [ Text({ ...BORDER, children: text }) ]
@@ -367,9 +376,10 @@ const edge = (Text: Text, line: string, head = "", tail = ""): RenderElement =>
         ]
     }) })
 
-/*  draw a row of a scrollbar: the thumb, the (dimmed) track, or nothing  */
+/*  draw a row of a scrollbar: the dark grey thumb (an inverse space, as it fills
+    the entire cell, unlike a block glyph), the (dimmed) track, or nothing  */
 const bar = (Text: Text, mark: Mark | undefined): RenderElement =>
-    mark === "thumb" ? Text({ children: "█" }) :
+    mark === "thumb" ? Text({ inverse: true, color: "ansi256(242)", children: " " }) :
         mark === "track" ? Text({ dimColor: true, children: "░" }) : Text({ children: " " })
 
 /*  the geometry of the band above the prompt: the inner columns of the self-drawn
@@ -384,7 +394,7 @@ export type Layout = { span: number, body: number, master: number, detail: numbe
     and, once focused, by the keys only for a tree taller than the band), all rows of
     the band but the one of the engine's "n more" row (as the band then takes them
     anyway), and the columns of the master view (by the given share) and of the
-    detail view (with a separator column between them, and a gap of two columns and
+    detail view (with a separator column between them, and a gap, a separator, and
     a scrollbar column right of the detail view)  */
 export const layout = (e: BandRender, share: number, band = BAND): Layout => {
     const span     = Math.max(20, e.props.bodyColumns - FRAME.cols)
@@ -412,10 +422,14 @@ export const wheel = (e: BandScroll, view: View, step?: (by: number) => void): v
 
 /*  draw the band above the prompt: inside the self-drawn frame (with the title
     in its top edge) either a single view of the given rows, a single view of the
-    given lines with its scrollbar, or a master view of the given rows (where the
-    given rule rows are horizontal lines joining the borders) and, joined by a
-    separator, a detail view of the given lines (optionally dimmed) with its
-    scrollbar, into the bottom edge the given status (if any) at its start and
+    given lines with its scrollbar (optionally with the first given characters of
+    each line in a gutter at the left border, separated by a vertical line joining
+    the edges, with the background of a line filling the columns up to its scrollbar),
+    or a master view of the given rows (where the given rule rows are horizontal lines
+    joining the borders) and, joined by a separator, a detail view of the given lines
+    (optionally dimmed) with its scrollbar, every scrollbar (of lines not always
+    fitting) separated by a vertical line joining the edges,
+    into the bottom edge the given status (if any) at its start and
     the scroll position of the lines (unless they always fit) at its end, and below
     the frame the key hints (followed by blank rows for an overflowing band),
     where the scroll position is clamped, and the page size (for the scroll keys)
@@ -428,7 +442,8 @@ export const panel = (ui: Elements["terminal"], { span, body, master, detail, ov
     rule?:   (i: number) => boolean,
     lines?:  Char[][],
     dim?:    boolean,
-    fit?:    boolean
+    fit?:    boolean,
+    gutter?: number
 }): RenderElement => {
     const { Box, Text } = ui
     const lines = spec.lines ?? []
@@ -438,22 +453,38 @@ export const panel = (ui: Elements["terminal"], { span, body, master, detail, ov
     view.scroll = Math.max(0, Math.min(view.scroll, lines.length - body))
     const marks  = scrollbar(body, lines.length, view.scroll)
     const blank  = Text({ children: " " })
+    const gutter = solo ? spec.gutter ?? 0 : 0
+    const rail   = spec.lines !== undefined && spec.fit !== true
+    const lead   = gutter > 0 ? gutter + 2 : 2
+    const trail  = rail ? 3 : 2
     const border = (left: string, joint: string, right: string) =>
-        left + (spec.lines === undefined || solo ? "─".repeat(span + 1) :
-            "─".repeat(master + 2) + joint + "─".repeat(detail + 4)) + right
-    const scrolled = (i: number, width: number) => [
-        Box({ width, flexShrink: 0, children:
-            Text({ wrap: "truncate-end", dimColor: spec.dim ?? false,
-                children: paint(Text, lines[view.scroll + i] ?? []) }) }),
-        Text({ children: "  " }),
-        bar(Text, marks[i])
-    ]
-    const rows: RenderElement[] = [ edge(Text, border("╭", "┬", "╮"), spec.title) ]
+        left + (!rail ? "─".repeat(span + 1) :
+            (gutter > 0 ? `${"─".repeat(gutter)}${joint}${"─".repeat(span - 2 - gutter)}` :
+                solo ? "─".repeat(span - 1) :
+                    `${"─".repeat(master + 2)}${joint}${"─".repeat(detail + 2)}`) + `${joint}─`) + right
+    const scrolled = (i: number, width: number) => {
+        const line = lines[view.scroll + i] ?? []
+        const fill = line[0]?.background
+        return [
+            ...(gutter > 0 ? [
+                Box({ width: gutter, flexShrink: 0, children: Text({ children: paint(Text, line.slice(0, gutter)) }) }),
+                Text({ ...BORDER, children: "│" }),
+                Text({ backgroundColor: fill, children: " " })
+            ] : []),
+            Box({ width, flexShrink: 0, children:
+                Text({ wrap: "truncate-end", dimColor: spec.dim ?? false,
+                    children: paint(Text, line.slice(gutter)) }) }),
+            ...(rail ? [ Text({ backgroundColor: fill, children: " " }), Text({ ...BORDER, children: "│" }) ] :
+                [ Text({ children: "  " }) ]),
+            bar(Text, marks[i])
+        ]
+    }
+    const rows: RenderElement[] = [ edge(Text, border("╭", "┬", "╮"), spec.title, "", lead, trail) ]
     for (let i = 0; i < body; i++) {
         const rule = !solo && spec.lines !== undefined && spec.rule?.(i) === true
         rows.push(Box({ flexDirection: "row", children: [
-            Text({ ...BORDER, children: rule ? "├─" : "│ " }),
-            ...(solo ? scrolled(i, span - 3) : spec.lines === undefined ? [
+            Text({ ...BORDER, children: rule ? "├─" : gutter > 0 ? "│" : "│ " }),
+            ...(solo ? scrolled(i, gutter > 0 ? span - 4 - gutter : span - 3) : spec.lines === undefined ? [
                 Box({ width: span, flexShrink: 0, children: spec.rows!(i) ?? blank })
             ] : [
                 rule ? Text({ ...BORDER, children: `${"─".repeat(master + 1)}┤ ` }) :
@@ -465,7 +496,7 @@ export const panel = (ui: Elements["terminal"], { span, body, master, detail, ov
         ] }))
     }
     rows.push(edge(Text, border("╰", "┴", "╯"), spec.status,
-        spec.fit === true ? "" : position(body, lines.length, view.scroll)))
+        spec.fit === true ? "" : position(body, lines.length, view.scroll), lead, trail))
     rows.push(Box({ paddingLeft: 1, children: Text({ dimColor: true, wrap: "truncate-end", children: spec.hints }) }))
     if (overflow)
         rows.push(blank, blank)

package/plugin/mods/ase-mods-help-hint.ts

@@ -29,7 +29,7 @@ const GROUP  = /\[(?:[^[\]]|\[[^\]]*\])*\]|\((?:[^()]|\([^)]*\))*\)|\S+/g
 const NBSP   = String.fromCodePoint(0xA0)
 const SYNTAX = "gray"
 const REFER  = "red"
-const INDENT = 4
+const INDENT = 2
 const TITLE  = "[ ⧉ ASE: Show Skill Synopsis ]"
 
 /*  a hint band: the scroll state of its frame, the skill command as typed,