@pellux/goodvibes-tui 1.1.0 → 1.7.0

package/src/renderer/agent-detail-modal.ts

@@ -1,466 +0,0 @@
-import { readFile } from 'fs/promises';
-import { type Line } from '../types/grid.ts';
-import { ModalFactory } from './modal-factory.ts';
-import type { AgentManager } from '@pellux/goodvibes-sdk/platform/tools';
-import type { AgentMessageBus } from '@pellux/goodvibes-sdk/platform/agents';
-import type { WrfcController } from '@pellux/goodvibes-sdk/platform/agents';
-import { formatElapsed } from '../utils/format-elapsed.ts';
-import { logger } from '@pellux/goodvibes-sdk/platform/utils';
-import { getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
-import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
-import { handleConfirmInput, type ConfirmState } from '../panels/confirm-state.ts';
-import { AGENT_TERMINAL_STATUSES as MODAL_TERMINAL_STATUSES, AGENT_STALL_THRESHOLD_MS as MODAL_STALL_THRESHOLD_MS, hasReportedUsage } from '../panels/agent-inspector-shared.ts';
-import { UI_TONES } from './ui-primitives.ts';
-
-/**
- * Agent-detail-modal neon accent palette — WRFC/streaming panel-native hues
- * with no UI_TONES.state/accent role. Preserved byte-exact as named
- * accents per WO-207b (2026-07-02-renderer-plan.md decisions: "Agent-detail
- * neon palette: preserved byte-exact as named accents, zero visual change").
- */
-const AGENT_DETAIL_NEON = {
-  /** Addendum note + streaming content text. */
-  mint: '#aaffee',
-  /** Unsatisfied WRFC findings + agent error text. */
-  bad: '#ff6666',
-  /** Satisfied WRFC findings. */
-  good: '#44ff88',
-  /** Progress line + streaming label. */
-  accent: '#00ffcc',
-} as const;
-
-// ─── Constants ────────────────────────────────────────────────────────────────
-
-const MAX_LOG_ENTRIES = 10;
-const AGENT_ID_DISPLAY_LENGTH = 16;
-
-// MODAL_TERMINAL_STATUSES and MODAL_STALL_THRESHOLD_MS are re-exported aliases
-// from agent-inspector-shared.ts (imported above alongside ConfirmState).
-
-/**
- * formatStalledLabel — the "[STALLED — N+ min no activity]" suffix appended
- * to the Status line for a stalled agent. The minute count is derived from
- * the stall threshold (in ms) rather than hardcoded, so the label can never
- * drift out of sync with the actual threshold that decided isStalled.
- */
-export function formatStalledLabel(thresholdMs: number): string {
-  const minutes = Math.floor(thresholdMs / 60000);
-  return `  [STALLED — ${minutes}+ min no activity]`;
-}
-
-export interface AgentDetailModalDeps {
-  readonly agentManager: Pick<AgentManager, 'getStatus' | 'list'>;
-  readonly agentMessageBus: Pick<AgentMessageBus, 'getMessages'>;
-  readonly sessionLogPathResolver: (agentId: string) => string;
-  /** Optional — when supplied, constraint data from the agent's WRFC chain is shown (SDK 0.23.0). */
-  readonly wrfcController?: Pick<WrfcController, 'getChain'>;
-  /** Cancel the agent by id using the same orphan-free path as WRFC. Returns true if cancelled. */
-  readonly cancelAgent: (agentId: string) => boolean;
-}
-
-// ─── AgentDetailModal ─────────────────────────────────────────────────────────
-
-/**
- * AgentDetailModal — deep-view modal for a single running/completed agent.
- *
- * Displays task description, template, model, status, duration, tool-call
- * count, estimated token usage, recent messages from AgentMessageBus, and
- * the agent's current progress note.
- */
-export class AgentDetailModal {
-  public active = false;
-  public agentId: string | null = null;
-
-  /** Cached JSONL log entries, loaded on open(). */
-  public logEntries: Record<string, unknown>[] = [];
-  public logTotal = 0;
-
-  /** Pending cancel confirmation. Subject is the agent id to cancel. */
-  public confirmCancel: ConfirmState<string> | null = null;
-
-  private refreshTimer: ReturnType<typeof setInterval> | null = null;
-  private onRefresh: (() => void) | null = null;
-
-  constructor(readonly deps: AgentDetailModalDeps) {}
-
-  /** Set a callback to trigger re-render when log data updates. */
-  setOnRefresh(fn: () => void): void {
-    this.onRefresh = fn;
-  }
-
-  open(agentId: string): void {
-    this.agentId = agentId;
-    this.active = true;
-    this.logEntries = [];
-    this.logTotal = 0;
-    this.loadLog().catch((err) => { logger.debug('agent detail log load failed', { err }); });
-    // Auto-refresh log every 500ms while modal is open
-    if (this.refreshTimer) clearInterval(this.refreshTimer);
-    this.refreshTimer = setInterval(() => {
-      this.loadLog().then(() => this.onRefresh?.()).catch((err) => { logger.debug('agent detail log refresh tick failed', { err }); });
-    }, 500);
-  }
-
-  close(): void {
-    this.active = false;
-    this.agentId = null;
-    this.logEntries = [];
-    this.logTotal = 0;
-    this.confirmCancel = null;
-    if (this.refreshTimer) {
-      clearInterval(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-  }
-
-  /**
-   * Handle a key press while the modal is active.
-   * Must be called BEFORE the Esc handler closes the modal.
-   *
-   * Routes:
-   *   - 'c' initiates cancel confirm (if agent is non-terminal)
-   *   - confirm keys (Enter/y/n/Esc) are forwarded to handleConfirmInput
-   *
-   * Returns true when the key was consumed (caller should NOT propagate).
-   */
-  handleKey(key: string): boolean {
-    if (!this.active) return false;
-
-    if (this.confirmCancel) {
-      const result = handleConfirmInput(this.confirmCancel, key);
-      if (result === 'confirmed') {
-        if (this.agentId) {
-          const rec = this.deps.agentManager.getStatus(this.agentId);
-          if (rec && !MODAL_TERMINAL_STATUSES.has(rec.status)) {
-            this.deps.cancelAgent(rec.id);
-          }
-        }
-        this.confirmCancel = null;
-        this.onRefresh?.();
-        return true;
-      }
-      if (result === 'cancelled') {
-        this.confirmCancel = null;
-        this.onRefresh?.();
-        return true;
-      }
-      // absorbed — key swallowed while confirm is pending
-      return true;
-    }
-
-    if (key === 'c') {
-      if (this.agentId) {
-        const rec = this.deps.agentManager.getStatus(this.agentId);
-        if (rec && !MODAL_TERMINAL_STATUSES.has(rec.status)) {
-          const label = rec.task.split('\n')[0]?.slice(0, 40) ?? rec.id.slice(-8);
-          this.confirmCancel = { subject: rec.id, label };
-          this.onRefresh?.();
-          return true;
-        }
-      }
-      // Non-cancellable — absorb key silently
-      return true;
-    }
-
-    return false;
-  }
-
-  /**
-   * Returns whether the current agent is considered stalled.
-   * Non-terminal agent with elapsed time exceeding MODAL_STALL_THRESHOLD_MS.
-   */
-  isCurrentAgentStalled(): boolean {
-    if (!this.agentId) return false;
-    const rec = this.deps.agentManager.getStatus(this.agentId);
-    if (!rec || MODAL_TERMINAL_STATUSES.has(rec.status)) return false;
-    return (Date.now() - rec.startedAt) >= MODAL_STALL_THRESHOLD_MS;
-  }
-
-  /**
-   * Count of all stalled agents across the agentManager list.
-   * Non-terminal agents with elapsed time >= MODAL_STALL_THRESHOLD_MS.
-   */
-  getStalledAgentCount(): number {
-    const now = Date.now();
-    return this.deps.agentManager.list().filter(rec => {
-      if (MODAL_TERMINAL_STATUSES.has(rec.status)) return false;
-      return (now - rec.startedAt) >= MODAL_STALL_THRESHOLD_MS;
-    }).length;
-  }
-
-  async loadLog(): Promise<void> {
-    if (!this.agentId) { this.logEntries = []; this.logTotal = 0; return; }
-    try {
-      const sessionFile = this.deps.sessionLogPathResolver(this.agentId);
-      const logContent = await readFile(sessionFile, 'utf-8');
-      const logLines = logContent.trim().split('\n');
-      this.logTotal = logLines.length;
-      const parsed = logLines.slice(-MAX_LOG_ENTRIES).map(line => {
-        try { return JSON.parse(line) as Record<string, unknown>; } catch { return null; }
-      });
-      const failedCount = parsed.filter(e => e === null).length;
-      if (failedCount > 0) {
-        logger.debug('AgentDetailModal: skipped malformed JSONL lines', { count: failedCount });
-      }
-      this.logEntries = parsed.filter((e): e is Record<string, unknown> => e !== null);
-    } catch (err) {
-      const code = (err as NodeJS.ErrnoException).code;
-      if (code !== 'ENOENT') {
-        logger.debug('AgentDetailModal: failed to load session log', { error: summarizeError(err) });
-      }
-      this.logEntries = [];
-      this.logTotal = 0;
-    }
-  }
-}
-
-// ─── renderAgentDetailModal ───────────────────────────────────────────────────
-
-/**
- * Render the agent detail modal as Line[] for overlay in the viewport.
- *
- * Shows a deep view of the selected agent: task, template, model, status,
- * duration, tool call count, token estimate, recent bus messages, and
- * progress text.
- *
- * @param modal  AgentDetailModal state
- * @param width  Terminal width
- */
-export function renderAgentDetailModal(
-  modal: AgentDetailModal,
-  width: number,
-  viewportHeight = 24,
-): Line[] {
-  if (!modal.agentId) return [];
-  const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
-    margin: 2,
-    maxWidth: width - 4,
-    chromeRows: 6,
-    minContentRows: 10,
-    maxContentRows: 22,
-  });
-  const targetContentRows = Math.max(18, Math.min(22, getStableOverlayContentRows(metrics.contentRows, 12) + 8));
-
-  const rec = modal.deps.agentManager.getStatus(modal.agentId);
-  if (!rec) {
-    return ModalFactory.createModal({
-      title: 'Agent Detail',
-      width: metrics.boxWidth,
-      margin: metrics.margin,
-      targetContentRows,
-      sections: [
-        { type: 'text', content: '(agent not found)' },
-      ],
-      hints: ['[Esc] Close'],
-    }, width);
-  }
-
-  const now = Date.now();
-  const elapsedMs = (rec.completedAt ?? now) - rec.startedAt;
-
-  // ── Build sections ────────────────────────────────────────────────────────
-
-  const sections: import('./modal-factory.ts').ModalSection[] = [];
-
-  // Task — show first line only, capped at 120 chars
-  const taskFirstLine = rec.task.split('\n')[0].replace(/^(WRFC\s+(Fix|Review)\s+Request\s*)/i, '').trim();
-  const taskDisplay = taskFirstLine.length > 120 ? taskFirstLine.slice(0, 117) + '\u2026' : taskFirstLine;
-  sections.push({
-    type: 'text',
-    content: `Task: ${taskDisplay}`,
-    style: { bold: true },
-  });
-  sections.push({ type: 'separator' });
-
-  // Metadata grid
-  const modelStr = rec.model ? `${rec.provider ?? ''}/${rec.model}` : (rec.provider ?? '(default)');
-  sections.push({ type: 'text', content: `Template : ${rec.template}` });
-  sections.push({ type: 'text', content: `Model    : ${modelStr}` });
-  const isStalled = !MODAL_TERMINAL_STATUSES.has(rec.status) && (now - rec.startedAt) >= MODAL_STALL_THRESHOLD_MS;
-  sections.push({ type: 'text', content: `Status   : ${rec.status}${isStalled ? formatStalledLabel(MODAL_STALL_THRESHOLD_MS) : ''}` });
-  sections.push({ type: 'text', content: `Duration : ${formatElapsed(elapsedMs)}` });
-  sections.push({ type: 'separator' });
-
-  // Metrics
-  sections.push({ type: 'text', content: `Tool calls : ${rec.toolCallCount}` });
-  if (hasReportedUsage(rec.usage)) {
-    const usage = rec.usage;
-    const totalIn = usage.inputTokens + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0);
-    sections.push({ type: 'text', content: `Tokens in  : ${totalIn.toLocaleString()}` });
-    sections.push({ type: 'text', content: `Tokens out : ${usage.outputTokens.toLocaleString()}` });
-  } else {
-    sections.push({
-      type: 'text',
-      content: 'Tokens     : n/a (agent running)',
-      style: { dim: true },
-    });
-  }
-
-  // SDK 0.23.0: systemPromptAddendum indicator — confirms WRFC constraint addendum was injected
-  if (rec.systemPromptAddendum) {
-    sections.push({
-      type: 'text',
-      content: 'Addendum   : yes (WRFC constraint layer injected)',
-      style: { fg: AGENT_DETAIL_NEON.mint },
-    });
-  }
-
-  // SDK 0.23.0: constraint data from WRFC chain (engineer constraints + reviewer findings)
-  if (rec.wrfcId && modal.deps.wrfcController) {
-    try {
-      const chain = modal.deps.wrfcController.getChain(rec.wrfcId);
-      if (chain && chain.constraints.length > 0) {
-        sections.push({ type: 'separator' });
-        sections.push({
-          type: 'text',
-          content: `Constraints (${chain.constraints.length}):`,
-          style: { dim: true },
-        });
-        for (const c of chain.constraints) {
-          const text = c.text.length > 80 ? c.text.slice(0, 77) + '…' : c.text;
-          sections.push({
-            type: 'text',
-            content: `  [${c.id}] ${text}`,
-            style: { fg: '246' },
-          });
-        }
-        // Reviewer constraint findings (if review has completed)
-        const findings = chain.reviewerReport?.constraintFindings;
-        if (findings && findings.length > 0) {
-          const unsatisfied = findings.filter((f) => !f.satisfied);
-          sections.push({
-            type: 'text',
-            content: `Findings   : ${findings.length} checked, ${unsatisfied.length} unsatisfied`,
-            style: { fg: unsatisfied.length > 0 ? AGENT_DETAIL_NEON.bad : AGENT_DETAIL_NEON.good },
-          });
-        }
-      }
-    } catch {
-      // wrfcController.getChain throws when chain not found — normal during teardown
-    }
-  }
-
-  // Progress
-  if (rec.progress) {
-    sections.push({ type: 'separator' });
-    sections.push({
-      type: 'text',
-      content: `Progress: ${rec.progress}`,
-      style: { fg: AGENT_DETAIL_NEON.accent },
-    });
-  }
-
-  // Error
-  if (rec.error) {
-    sections.push({ type: 'separator' });
-    sections.push({
-      type: 'text',
-      content: `Error: ${rec.error}`,
-      style: { fg: AGENT_DETAIL_NEON.bad },
-    });
-  }
-
-  // Recent messages from AgentMessageBus
-  const recentMessages = modal.deps.agentMessageBus
-    .getMessages(modal.agentId)
-    .slice(-4); // last 4 messages
-
-  if (recentMessages.length > 0) {
-    sections.push({ type: 'separator' });
-    sections.push({
-      type: 'text',
-      content: `Recent messages (${recentMessages.length}):`,
-      style: { dim: true },
-    });
-    for (const msg of recentMessages) {
-      const fromLabel = msg.from === '*' ? 'broadcast' : msg.from.slice(0, 12);
-      const preview = msg.content.length > 50
-        ? msg.content.slice(0, 47) + '\u2026'
-        : msg.content;
-      sections.push({
-        type: 'text',
-        content: `  [${fromLabel}] ${preview}`,
-        style: { fg: '246' },
-      });
-    }
-  }
-
-  // Execution history from cached JSONL session log (loaded on open())
-  if (modal.logEntries.length > 0) {
-    sections.push({ type: 'separator' });
-    sections.push({
-      type: 'text',
-      content: `Execution Log (${modal.logTotal} events, showing last ${modal.logEntries.length}):`,
-      style: { dim: true },
-    });
-    for (const entry of modal.logEntries) {
-      const entryType = String(entry.type ?? 'unknown');
-      const rawTs = entry.timestamp;
-      const ts = typeof rawTs === 'string' && rawTs.length >= 19
-        ? rawTs.slice(11, 19)
-        : '';
-      let detail = '';
-      if (entryType === 'tool_execution') detail = ` ${entry.toolName}`;
-      if (entryType === 'llm_response') detail = ` (${entry.toolCallCount} tools, ${entry.contentLength} chars)`;
-      if (entryType === 'session_end') detail = ` [${entry.status}]`;
-      sections.push({
-        type: 'text',
-        content: `  ${ts} ${entryType}${detail}`,
-        style: { fg: '246' },
-      });
-    }
-  }
-
-  // Streaming content — show live output when agent is actively streaming
-  const STREAMING_MAX_CHARS = 500;
-  if (rec.status === 'running' && rec.streamingContent) {
-    const content = rec.streamingContent;
-    const truncated = content.length > STREAMING_MAX_CHARS;
-    const display = truncated ? content.slice(-STREAMING_MAX_CHARS) : content;
-    sections.push({ type: 'separator' });
-    sections.push({
-      type: 'text',
-      content: truncated
-        ? `Streaming (last ${STREAMING_MAX_CHARS} of ${content.length} chars \u2191 scroll for more):`
-        : 'Streaming:',
-      style: { fg: AGENT_DETAIL_NEON.accent, dim: true },
-    });
-    // Split into display lines, capped at width for readability
-    const maxLineWidth = Math.max(width - 10, 40);
-    const streamLines = display.split('\n');
-    for (const line of streamLines) {
-      const trimmed = line.length > maxLineWidth ? line.slice(0, maxLineWidth - 1) + '\u2026' : line;
-      sections.push({
-        type: 'text',
-        content: `  ${trimmed}`,
-        style: { fg: AGENT_DETAIL_NEON.mint },
-      });
-    }
-  }
-
-  // Cancel confirm overlay (when pending)
-  const cancellable = !MODAL_TERMINAL_STATUSES.has(rec.status);
-  if (modal.confirmCancel) {
-    sections.push({ type: 'separator' });
-    sections.push({
-      type: 'text',
-      content: `Cancel agent "${modal.confirmCancel.label}"?`,
-      style: { fg: UI_TONES.state.warn },
-    });
-    sections.push({
-      type: 'text',
-      content: 'y / Enter  confirm     n / Esc  cancel',
-      style: { dim: true },
-    });
-  }
-
-  const cancelHint = cancellable ? '[c] Cancel  ' : '';
-  return ModalFactory.createModal({
-    title: `Agent: ${rec.id.slice(0, AGENT_ID_DISPLAY_LENGTH)}`,
-    width: metrics.boxWidth,
-    margin: metrics.margin,
-    targetContentRows,
-    sections,
-    hints: [cancelHint + '[Esc] Close'],
-  }, width);
-}

package/src/renderer/live-tail-modal.ts

@@ -1,156 +0,0 @@
-import { type Line } from '../types/grid.ts';
-import { ModalFactory } from './modal-factory.ts';
-import type { ProcessManager } from '@pellux/goodvibes-sdk/platform/tools';
-import type { AgentManager } from '@pellux/goodvibes-sdk/platform/tools';
-import type { ProcessEntry } from './process-modal.ts';
-import { getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
-
-export interface LiveTailModalDeps {
-  readonly agentManager: Pick<AgentManager, 'cancel' | 'getStatus'>;
-  readonly processManager: Pick<ProcessManager, 'stop' | 'getOutput'>;
-}
-
-// ─── LiveTailModal ────────────────────────────────────────────────────────────
-
-/**
- * LiveTailModal — manages state for the live output peek modal.
- *
- * Shows streaming stdout/stderr from a selected background process or agent
- * progress notes. Auto-scrolls to the bottom unless the user scrolled up.
- */
-export class LiveTailModal {
-  public active = false;
-  public entry: ProcessEntry | null = null;
-
-  /** Number of lines scrolled up from the bottom (0 = at bottom). */
-  public scrollOffset = 0;
-
-  constructor(private readonly deps: LiveTailModalDeps) {}
-
-  open(entry: ProcessEntry): void {
-    this.entry = entry;
-    this.scrollOffset = 0;
-    this.active = true;
-  }
-
-  close(): void {
-    this.active = false;
-    this.entry = null;
-    this.scrollOffset = 0;
-  }
-
-  scrollUp(): void {
-    this.scrollOffset++;
-  }
-
-  scrollDown(): void {
-    this.scrollOffset = Math.max(0, this.scrollOffset - 1);
-  }
-
-  /**
-   * Kill the current process.
-   * Returns true if the process was found and stopped.
-   */
-  killProcess(): boolean {
-    if (!this.entry) return false;
-
-    if (this.entry.type === 'exec') {
-      return this.deps.processManager.stop(this.entry.id);
-    } else {
-      return this.deps.agentManager.cancel(this.entry.id);
-    }
-  }
-
-  /** Retrieve the current output text for the watched process. */
-  getOutput(): string {
-    if (!this.entry) return '';
-
-    if (this.entry.type === 'exec') {
-      const out = this.deps.processManager.getOutput(this.entry.id);
-      if (!out) return '';
-      const combined = [out.stdout, out.stderr].filter(Boolean).join('\n').trim();
-      return combined || '(no output yet)';
-    } else {
-      // For agents, show progress note and status
-      const rec = this.deps.agentManager.getStatus(this.entry.id);
-      if (!rec) return '(process not found)';
-      const parts: string[] = [
-        `Task: ${rec.task}`,
-        `Status: ${rec.status}`,
-        `Tool calls: ${rec.toolCallCount}`,
-      ];
-      if (rec.progress) parts.push(`Progress: ${rec.progress}`);
-      if (rec.error) parts.push(`Error: ${rec.error}`);
-      return parts.join('\n');
-    }
-  }
-}
-
-// ─── renderLiveTailModal ──────────────────────────────────────────────────────
-
-/**
- * Render the live-tail peek modal as Line[] for overlay in the viewport.
- *
- * Shows a scrollable view of the process output. scrollOffset=0 means the
- * bottom of the output is visible (auto-scroll behaviour).
- *
- * @param modal  LiveTailModal state
- * @param width  Terminal width
- * @param maxOutputLines  Maximum lines to show inside the box (default: 16)
- */
-export function renderLiveTailModal(
-  modal: LiveTailModal,
-  width: number,
-  viewportHeight = 24,
-): Line[] {
-  const entry = modal.entry;
-  if (!entry) return [];
-  const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
-    chromeRows: 4,
-    minContentRows: 6,
-    maxContentRows: 10,
-  });
-  const maxOutputLines = metrics.contentRows;
-  const targetContentRows = getStableOverlayContentRows(metrics.contentRows, 8);
-
-  const output = modal.getOutput();
-  const allLines = output.split('\n');
-
-  // Apply scroll: scrollOffset=0 → show tail; larger → scroll toward head
-  const totalLines = allLines.length;
-  // Clamp scrollOffset so we never scroll past the top of the content
-  const maxScroll = Math.max(0, totalLines - maxOutputLines);
-  const clampedOffset = Math.min(modal.scrollOffset, maxScroll);
-  const endIdx = Math.max(maxOutputLines, totalLines - clampedOffset);
-  const startIdx = Math.max(0, endIdx - maxOutputLines);
-  const visibleLines = allLines.slice(startIdx, endIdx);
-
-  const typeTag = entry.type === 'agent' ? '[agent]' : '[exec]';
-  const maxLabelW = Math.max(20, width - 30);
-  const title = `${typeTag} ${entry.label.slice(0, maxLabelW)}`;
-
-  // Build scroll indicator for text section header
-  const scrollInfo = totalLines > maxOutputLines
-    ? `  Lines ${startIdx + 1}-${Math.min(endIdx, totalLines)} of ${totalLines}  [Up/Down] Scroll`
-    : '';
-
-  const contentText = visibleLines.join('\n') || '(no output yet)';
-
-  const sections: import('./modal-factory.ts').ModalSection[] = [];
-
-  if (scrollInfo) {
-    sections.push({ type: 'text', content: scrollInfo });
-    sections.push({ type: 'separator' });
-  }
-
-  sections.push({ type: 'text', content: contentText });
-
-  return ModalFactory.createModal({
-    title,
-    width: metrics.boxWidth,
-    margin: 2,
-    targetContentRows,
-    sections,
-    hints: ['[Up/Down] Scroll', '[k] Kill', '[Esc] Back'],
-  }, width);
-}