tau-all-agent 0.2.0 → 0.3.0

package/extensions/answer.ts

@@ -14,6 +14,7 @@ import type { Model, Api, UserMessage } from "@earendil-works/pi-ai";
 import {
   BorderedLoader,
   type ExtensionAPI,
+  type KeybindingsManager,
   type ModelRegistry,
   type Theme,
 } from "@earendil-works/pi-coding-agent";
@@ -24,7 +25,6 @@ import {
   type Focusable,
   Key,
   matchesKey,
-  truncateToWidth,
   type TUI,
   visibleWidth,
   wrapTextWithAnsi,
@@ -84,8 +84,8 @@ Example output:
   "questions": []
 }`;
 
-const OPENAI_FAST_MODEL_ID = "gpt-5.6-luna";
-const ANTHROPIC_FAST_MODEL_ID = "claude-haiku-4-5";
+const OPENAI_FAST_MODEL_ID = "gpt-6-luna";
+const ANTHROPIC_FAST_MODEL_ID = "claude-haiku-5-5";
 
 // Structured output format for question extraction
 interface ExtractedQuestion {
@@ -204,10 +204,15 @@ class QnAComponent implements Component, Focusable {
   private theme: Theme;
   private onDone: (result: string | null) => void;
   private showingConfirmation: boolean = false;
+  private questionOffset = 0;
+  private readingHeight = 0;
+  private maxQuestionOffset = 0;
+  private usable = false;
 
   // Cache
   private renderWidth?: number;
   private cachedWidth?: number;
+  private cachedHeight?: number;
   private cachedLines?: string[];
 
   private _focused = false;
@@ -219,12 +224,14 @@ class QnAComponent implements Component, Focusable {
   set focused(value: boolean) {
     this._focused = value;
     this.editor.focused = value;
+    this.invalidate();
   }
 
   constructor(
     questions: ExtractedQuestion[],
     tui: TUI,
     theme: Theme,
+    private keybindings: KeybindingsManager,
     onDone: (result: string | null) => void,
   ) {
     this.questions = questions;
@@ -263,6 +270,7 @@ class QnAComponent implements Component, Focusable {
     if (index < 0 || index >= this.questions.length) return;
     this.saveCurrentAnswer();
     this.currentIndex = index;
+    this.questionOffset = 0;
     this.editor.setText(this.answers[index] || "");
     this.invalidate();
   }
@@ -295,26 +303,57 @@ class QnAComponent implements Component, Focusable {
 
   invalidate(): void {
     this.cachedWidth = undefined;
+    this.cachedHeight = undefined;
     this.cachedLines = undefined;
   }
 
   handleInput(data: string): void {
-    if ((this.renderWidth ?? this.tui.terminal.columns) < MIN_QUESTIONNAIRE_WIDTH) {
+    // Recheck current geometry before accepting input, including resize before repaint.
+    // Both dimensions reserve the one-cell margins from overlayOptions below.
+    this.render(
+      Math.min(this.renderWidth ?? this.tui.terminal.columns - 2, this.tui.terminal.columns - 2),
+    );
+    if (!this.usable) {
       if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) this.cancel();
       return;
     }
 
+    if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
+      if (this.showingConfirmation) {
+        this.showingConfirmation = false;
+        this.invalidate();
+        this.tui.requestRender();
+      } else {
+        this.cancel();
+      }
+      return;
+    }
+
+    // Viewport navigation reads the question. Unmatched keys retain native editing behavior.
+    const scrollActions = [
+      ["tui.altScreen.pageUp", -this.readingHeight],
+      ["tui.altScreen.pageDown", this.readingHeight],
+      ["tui.altScreen.top", -Infinity],
+      ["tui.altScreen.bottom", Infinity],
+    ] as const;
+    for (const [action, delta] of scrollActions) {
+      if (!this.keybindings.matches(data, action)) continue;
+      this.questionOffset = Math.max(
+        0,
+        Math.min(this.maxQuestionOffset, this.questionOffset + delta),
+      );
+      this.invalidate();
+      this.tui.requestRender();
+      return;
+    }
+
     // Handle confirmation dialog
     if (this.showingConfirmation) {
       if (matchesKey(data, Key.enter) || data.toLowerCase() === "y") {
         this.submit();
         return;
       }
-      if (
-        matchesKey(data, Key.escape) ||
-        matchesKey(data, Key.ctrl("c")) ||
-        data.toLowerCase() === "n"
-      ) {
+      if (data.toLowerCase() === "n") {
         this.showingConfirmation = false;
         this.invalidate();
         this.tui.requestRender();
@@ -323,12 +362,6 @@ class QnAComponent implements Component, Focusable {
       return;
     }
 
-    // Global navigation and commands
-    if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
-      this.cancel();
-      return;
-    }
-
     // Tab / Shift+Tab for navigation
     if (matchesKey(data, Key.tab)) {
       if (this.currentIndex < this.questions.length - 1) {
@@ -386,26 +419,47 @@ class QnAComponent implements Component, Focusable {
 
   render(width: number): string[] {
     this.renderWidth = width;
-    if (width < MIN_QUESTIONNAIRE_WIDTH) {
-      return [
-        truncateToWidth(
-          this.theme.fg(
-            "muted",
-            `Resize to ${MIN_QUESTIONNAIRE_WIDTH}+ columns to answer. Esc cancels.`,
-          ),
-          width,
-        ),
-      ];
-    }
-
-    if (this.cachedLines && this.cachedWidth === width) {
+    const height = Math.max(1, this.tui.terminal.rows - 2);
+    if (this.cachedLines && this.cachedWidth === width && this.cachedHeight === height) {
+      this.usable = true;
       return this.cachedLines;
     }
 
     const theme = this.theme;
     const lines: string[] = [];
-    const boxWidth = Math.min(width - 4, 120); // Allow wider box
-    const contentWidth = boxWidth - 4; // 2 chars padding on each side
+    const boxWidth = Math.min(Math.max(MIN_QUESTIONNAIRE_WIDTH, width) - 4, 120);
+    const contentWidth = boxWidth - 4;
+    const editorLines = this.editor.render(contentWidth - 7);
+    const readingKeys = [
+      ...this.keybindings.getKeys("tui.altScreen.pageUp"),
+      ...this.keybindings.getKeys("tui.altScreen.pageDown"),
+      ...this.keybindings.getKeys("tui.altScreen.top"),
+      ...this.keybindings.getKeys("tui.altScreen.bottom"),
+    ].join("/");
+    const controls = this.showingConfirmation
+      ? `${theme.fg("warning", "Submit all answers?")} Enter/y confirm · Esc/n back`
+      : "Tab/Enter next · Shift+Tab prev · Shift+Enter newline · Esc cancel";
+    const footer = [
+      ...wrapTextWithAnsi(
+        theme.fg("dim", `Read question: ${readingKeys || "navigation keys unbound"}`),
+        contentWidth,
+      ),
+      ...wrapTextWithAnsi(controls, contentWidth),
+    ];
+    // Six frame rows (top/title/divider, editor spacer, footer divider, bottom),
+    // the full native editor and wrapped footer, plus at least one reading row.
+    const minimumHeight = 6 + editorLines.length + footer.length + 1;
+    this.usable = width >= MIN_QUESTIONNAIRE_WIDTH && height >= minimumHeight;
+    if (!this.usable) {
+      this.invalidate();
+      return wrapTextWithAnsi(
+        theme.fg(
+          "muted",
+          `Resize to ${MIN_QUESTIONNAIRE_WIDTH + 2}+ columns and more rows. Esc cancels.`,
+        ),
+        Math.max(1, width),
+      ).slice(0, height);
+    }
 
     // Helper to create horizontal lines (dim the whole thing at once)
     const horizontalLine = (count: number) => "─".repeat(count);
@@ -418,10 +472,6 @@ class QnAComponent implements Component, Focusable {
       return theme.fg("dim", "│") + paddedContent + " ".repeat(rightPad) + theme.fg("dim", "│");
     };
 
-    const emptyBoxLine = (): string => {
-      return theme.fg("dim", "│") + " ".repeat(boxWidth - 2) + theme.fg("dim", "│");
-    };
-
     const padToWidth = (line: string): string => {
       const len = visibleWidth(line);
       return line + " ".repeat(Math.max(0, width - len));
@@ -433,7 +483,14 @@ class QnAComponent implements Component, Focusable {
     lines.push(padToWidth(boxLine(title)));
     lines.push(padToWidth(theme.fg("dim", "├" + horizontalLine(boxWidth - 2) + "┤")));
 
-    // Progress indicator
+    // Start with the question even when only one reading row fits.
+    const q = this.questions[this.currentIndex];
+    const reading = wrapTextWithAnsi(`> ${q.question}`, contentWidth);
+    if (q.context) {
+      reading.push("", ...wrapTextWithAnsi(theme.fg("muted", q.context), contentWidth - 2));
+    }
+
+    // Progress belongs to the reading region so every indicator remains reachable.
     const progressParts: string[] = [];
     for (let i = 0; i < this.questions.length; i++) {
       const answered = (this.answers[i]?.trim() || "").length > 0;
@@ -446,61 +503,30 @@ class QnAComponent implements Component, Focusable {
         progressParts.push(theme.fg("dim", "○"));
       }
     }
-    for (const line of wrapTextWithAnsi(progressParts.join(" "), contentWidth)) {
-      lines.push(padToWidth(boxLine(line)));
-    }
-    lines.push(padToWidth(emptyBoxLine()));
-
-    // Current question
-    const q = this.questions[this.currentIndex];
-    const questionText = `> ${q.question}`;
-    const wrappedQuestion = wrapTextWithAnsi(questionText, contentWidth);
-    for (const line of wrappedQuestion) {
+    reading.push("", ...wrapTextWithAnsi(progressParts.join(" "), contentWidth));
+
+    this.readingHeight = height - minimumHeight + 1;
+    this.maxQuestionOffset = Math.max(0, reading.length - this.readingHeight);
+    this.questionOffset = Math.min(this.questionOffset, this.maxQuestionOffset);
+    for (const line of reading.slice(
+      this.questionOffset,
+      this.questionOffset + this.readingHeight,
+    )) {
       lines.push(padToWidth(boxLine(line)));
     }
+    lines.push(padToWidth(boxLine("")));
 
-    // Context if present
-    if (q.context) {
-      lines.push(padToWidth(emptyBoxLine()));
-      const contextText = theme.fg("muted", `${q.context}`);
-      const wrappedContext = wrapTextWithAnsi(contextText, contentWidth - 2);
-      for (const line of wrappedContext) {
-        lines.push(padToWidth(boxLine(line)));
-      }
-    }
-
-    lines.push(padToWidth(emptyBoxLine()));
-
-    // Render the editor component (multi-line input) with padding
-    // Skip the first and last lines (editor's own border lines)
-    const answerPrefix = theme.bold("A: ");
-    const editorWidth = contentWidth - 4 - 3; // Extra padding + space for "A: "
-    const editorLines = this.editor.render(editorWidth);
-    for (let i = 1; i < editorLines.length - 1; i++) {
-      if (i === 1) {
-        // First content line gets the "A: " prefix
-        lines.push(padToWidth(boxLine(answerPrefix + editorLines[i])));
-      } else {
-        // Subsequent lines get padding to align with the first line
-        lines.push(padToWidth(boxLine("   " + editorLines[i])));
-      }
+    // Keep the entire native editor, including its cursor and scrolling indicators.
+    for (let i = 0; i < editorLines.length; i++) {
+      lines.push(padToWidth(boxLine((i === 1 ? theme.bold("A: ") : "   ") + editorLines[i])));
     }
 
-    lines.push(padToWidth(emptyBoxLine()));
-
-    // Confirmation dialog or footer with controls
-    if (this.showingConfirmation) {
-      lines.push(padToWidth(theme.fg("dim", "├" + horizontalLine(boxWidth - 2) + "┤")));
-      const confirmMsg = `${theme.fg("warning", "Submit all answers?")} ${theme.fg("dim", "(Enter/y to confirm, Esc/n to cancel)")}`;
-      lines.push(padToWidth(boxLine(truncateToWidth(confirmMsg, contentWidth))));
-    } else {
-      lines.push(padToWidth(theme.fg("dim", "├" + horizontalLine(boxWidth - 2) + "┤")));
-      const controls = `${theme.fg("dim", "Tab/Enter")} next · ${theme.fg("dim", "Shift+Tab")} prev · ${theme.fg("dim", "Shift+Enter")} newline · ${theme.fg("dim", "Esc")} cancel`;
-      lines.push(padToWidth(boxLine(truncateToWidth(controls, contentWidth))));
-    }
+    lines.push(padToWidth(theme.fg("dim", "├" + horizontalLine(boxWidth - 2) + "┤")));
+    for (const line of footer) lines.push(padToWidth(boxLine(line)));
     lines.push(padToWidth(theme.fg("dim", "╰" + horizontalLine(boxWidth - 2) + "╯")));
 
     this.cachedWidth = width;
+    this.cachedHeight = height;
     this.cachedLines = lines;
     return lines;
   }
@@ -633,9 +659,10 @@ export default function (pi: ExtensionAPI) {
       }
 
       // Show the Q&A component
-      const answersResult = await ctx.ui.custom<string | null>((tui, theme, _kb, done) => {
-        return new QnAComponent(questions, tui, theme, done);
-      });
+      const answersResult = await ctx.ui.custom<string | null>(
+        (tui, theme, kb, done) => new QnAComponent(questions, tui, theme, kb, done),
+        { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%", margin: 1 } },
+      );
 
       if (answersResult === null) {
         ctx.ui.notify("Cancelled", "info");

package/extensions/branch-term/index.ts

@@ -157,7 +157,7 @@ function showCommandMessage(
   command: string,
 ): void {
   const copiedToClipboard = copyToClipboard(command);
-  if (!ctx.hasUI) {
+  if (ctx.mode === "print") {
     console.log(formatCommandMessageIntro(intro, copiedToClipboard));
     console.log(command);
     return;
@@ -269,9 +269,13 @@ export default function (pi: ExtensionAPI) {
       }
 
       const leafId = ctx.sessionManager.getLeafId();
-      const hasAssistantReply = ctx.sessionManager
+      const hasPersistedMessage = ctx.sessionManager
         .getEntries()
-        .some((entry) => entry.type === "message" && entry.message.role === "assistant");
+        .some(
+          (entry) =>
+            entry.type === "message" &&
+            (entry.message.role === "user" || entry.message.role === "assistant"),
+        );
 
       let forkFile: string;
       if (leafId && hasValidSessionFile(sessionFile)) {
@@ -285,7 +289,7 @@ export default function (pi: ExtensionAPI) {
         }
         forkFile = persistFork(forkManager);
       } else {
-        if (leafId && hasAssistantReply) {
+        if (leafId && hasPersistedMessage) {
           throw new Error(`Current session file is missing or invalid: ${sessionFile}`);
         }
 
@@ -293,7 +297,7 @@ export default function (pi: ExtensionAPI) {
           ? "Current session has no persisted history yet. Opening a fresh session."
           : "Selected conversation is empty. Opening a fresh session.";
         if (ctx.hasUI) ctx.ui.notify(message, "warning");
-        else console.log(message);
+        else console.error(message);
 
         forkFile = persistFork(
           SessionManager.create(ctx.cwd, ctx.sessionManager.getSessionDir(), {

package/extensions/btw.ts

@@ -24,6 +24,7 @@ import {
   matchesKey,
   truncateToWidth,
   type Component,
+  type KeybindingsManager,
   type TUI,
   visibleWidth,
   wrapTextWithAnsi,
@@ -32,6 +33,8 @@ import {
 const STATUS_KEY = "0-btw";
 const RESULT_MARKDOWN_THEME = getMarkdownTheme();
 const MIN_RESULT_WIDTH = 50;
+const RESULT_CHROME_ROWS = 6;
+const MIN_RESULT_ROWS = RESULT_CHROME_ROWS + 3; // Two overlay margins and one reading row.
 const STATUS_SPINNER_INTERVAL_MS = 80;
 const STATUS_SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 
@@ -350,9 +353,11 @@ function seedSessionManager(sessionManager: SessionManager, messages: AgentMessa
 }
 
 async function showResultDialog(ctx: ExtensionContext, result: BtwResult): Promise<void> {
-  await ctx.ui.custom<void>((tui, theme, _keybindings, done) => {
-    return new BtwResultComponent(result, tui, theme, done);
-  });
+  await ctx.ui.custom<void>(
+    (tui, theme, keybindings, done) =>
+      new BtwResultComponent(result, tui, theme, keybindings, done),
+    { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%", margin: 1 } },
+  );
 }
 
 function getLastAssistantMessage(messages: AgentMessage[]): AssistantMessage | null {
@@ -389,6 +394,7 @@ class BtwResultComponent implements Component {
     private readonly result: BtwResult,
     private readonly tui: TUI,
     private readonly theme: Theme,
+    private readonly keybindings: KeybindingsManager,
     private readonly onDone: () => void,
   ) {
     this.markdown = new Markdown(result.answer, 0, 0, RESULT_MARKDOWN_THEME);
@@ -412,49 +418,61 @@ class BtwResultComponent implements Component {
     }
 
     const width = this.renderWidth ?? this.tui.terminal.columns;
-    if (width < MIN_RESULT_WIDTH) return;
+    if (width < MIN_RESULT_WIDTH || this.tui.terminal.rows < MIN_RESULT_ROWS) return;
 
     const bodyHeight = this.getBodyHeight();
-    const boxWidth = this.getBoxWidth(width);
+    const boxWidth = width;
     const bodyLines = this.getBodyLines(this.getContentWidth(boxWidth));
     const maxScroll = Math.max(0, bodyLines.length - bodyHeight);
 
-    if (matchesKey(data, Key.up) || data.toLowerCase() === "k") {
-      this.scrollOffset = Math.max(0, this.scrollOffset - 1);
-    } else if (matchesKey(data, Key.down) || data.toLowerCase() === "j") {
-      this.scrollOffset = Math.min(maxScroll, this.scrollOffset + 1);
-    } else if (matchesKey(data, Key.pageUp)) {
-      this.scrollOffset = Math.max(0, this.scrollOffset - Math.max(4, bodyHeight - 2));
-    } else if (matchesKey(data, Key.pageDown)) {
-      this.scrollOffset = Math.min(maxScroll, this.scrollOffset + Math.max(4, bodyHeight - 2));
-    } else if (matchesKey(data, Key.home)) {
+    this.scrollOffset = clamp(this.scrollOffset, 0, maxScroll);
+    const kb = this.keybindings;
+    if (kb.matches(data, "tui.altScreen.pageUp")) {
+      this.scrollOffset -= bodyHeight;
+    } else if (kb.matches(data, "tui.altScreen.pageDown")) {
+      this.scrollOffset += bodyHeight;
+    } else if (kb.matches(data, "tui.altScreen.halfPageUp")) {
+      this.scrollOffset -= Math.max(1, Math.floor(bodyHeight / 2));
+    } else if (kb.matches(data, "tui.altScreen.halfPageDown")) {
+      this.scrollOffset += Math.max(1, Math.floor(bodyHeight / 2));
+    } else if (kb.matches(data, "tui.altScreen.top")) {
       this.scrollOffset = 0;
-    } else if (matchesKey(data, Key.end)) {
+    } else if (kb.matches(data, "tui.altScreen.bottom")) {
       this.scrollOffset = maxScroll;
+    } else if (kb.matches(data, "tui.altScreen.lineUp")) {
+      this.scrollOffset -= 1;
+    } else if (kb.matches(data, "tui.altScreen.lineDown")) {
+      this.scrollOffset += 1;
+    } else if (matchesKey(data, Key.up) || data.toLowerCase() === "k") {
+      this.scrollOffset -= 1;
+    } else if (matchesKey(data, Key.down) || data.toLowerCase() === "j") {
+      this.scrollOffset += 1;
     } else {
       return;
     }
 
+    this.scrollOffset = clamp(this.scrollOffset, 0, maxScroll);
     this.tui.requestRender();
   }
 
   render(width: number): string[] {
     this.renderWidth = width;
-    if (width < MIN_RESULT_WIDTH) {
+    if (width < 1 || this.tui.terminal.rows <= 2) return [];
+    if (width < MIN_RESULT_WIDTH || this.tui.terminal.rows < MIN_RESULT_ROWS) {
       return [
         truncateToWidth(
-          this.theme.fg("muted", `Resize to ${MIN_RESULT_WIDTH}+ columns to view answer.`),
+          this.theme.fg(
+            "muted",
+            `Esc close · Resize to ${MIN_RESULT_WIDTH + 2}+ columns, ${MIN_RESULT_ROWS}+ rows.`,
+          ),
           width,
+          "",
         ),
       ];
     }
 
-    const boxWidth = this.getBoxWidth(width);
+    const boxWidth = width;
     const contentWidth = this.getContentWidth(boxWidth);
-    const questionLines = wrapTextWithAnsi(
-      this.theme.fg("muted", this.result.question),
-      contentWidth,
-    );
     const bodyLines = this.getBodyLines(contentWidth);
     const bodyHeight = this.getBodyHeight();
     const maxScroll = Math.max(0, bodyLines.length - bodyHeight);
@@ -462,11 +480,7 @@ class BtwResultComponent implements Component {
 
     const lines: string[] = [];
     lines.push(this.borderLine("╭", "╮", boxWidth));
-    lines.push(this.boxLine(this.theme.bold("Request"), boxWidth));
-    for (const line of questionLines) {
-      lines.push(this.boxLine(line, boxWidth));
-    }
-    lines.push(this.separatorLine(boxWidth));
+    lines.push(this.boxLine(this.theme.bold("BTW"), boxWidth));
 
     const visibleBody = bodyLines.slice(this.scrollOffset, this.scrollOffset + bodyHeight);
     for (const line of visibleBody) {
@@ -478,15 +492,30 @@ class BtwResultComponent implements Component {
 
     lines.push(this.separatorLine(boxWidth));
     const scrollText = `${Math.min(bodyLines.length, this.scrollOffset + 1)}-${Math.min(bodyLines.length, this.scrollOffset + visibleBody.length)}/${bodyLines.length}`;
-    const controls = `${this.theme.fg("dim", "↑↓ scroll · PgUp/PgDn jump · Home/End · Enter/Esc close")} ${this.theme.fg("muted", scrollText)}`;
-    lines.push(this.boxLine(truncateToWidth(controls, contentWidth), boxWidth));
+    const navigation = [
+      ["pageUp", "pageDown", "page"],
+      ["top", "bottom", "ends"],
+    ] as const;
+    const hints = [
+      "↑↓/j/k scroll",
+      ...navigation.flatMap(([up, down, label]) => {
+        const keys = [up, down].map((action) =>
+          this.keybindings
+            .getKeys(`tui.altScreen.${action}`)
+            .find((key) => !["enter", "escape", "ctrl+c", "q"].includes(key)),
+        );
+        return keys.some(Boolean) ? [`${keys.map((key) => key ?? "—").join("/")} ${label}`] : [];
+      }),
+    ];
+    lines.push(this.boxLine(this.theme.fg("dim", hints.join(" · ")), boxWidth));
+    lines.push(this.boxLine(this.theme.fg("dim", `Enter/Esc close · ${scrollText}`), boxWidth));
     lines.push(this.borderLine("╰", "╯", boxWidth));
 
     return lines;
   }
 
   private getBodyHeight(): number {
-    return Math.max(8, this.tui.terminal.rows - 14);
+    return this.tui.terminal.rows - 2 - RESULT_CHROME_ROWS;
   }
 
   private getBodyLines(contentWidth: number): string[] {
@@ -494,18 +523,20 @@ class BtwResultComponent implements Component {
       return this.cachedBodyLines;
     }
 
-    const lines = this.markdown.render(contentWidth);
+    const lines = [
+      this.theme.bold("Request"),
+      ...wrapTextWithAnsi(this.theme.fg("muted", this.result.question), contentWidth),
+      "",
+      this.theme.bold("Answer"),
+      ...this.markdown.render(contentWidth),
+    ];
     this.cachedBodyWidth = contentWidth;
     this.cachedBodyLines = lines;
     return lines;
   }
 
-  private getBoxWidth(width: number): number {
-    return Math.max(MIN_RESULT_WIDTH, Math.min(width - 2, 140));
-  }
-
   private getContentWidth(boxWidth: number): number {
-    return Math.max(10, boxWidth - 4);
+    return boxWidth - 4;
   }
 
   private borderLine(left: string, right: string, width: number): string {