termcast 1.3.50 → 1.3.51

package/src/components/table.tsx

@@ -79,7 +79,9 @@ export class TableRenderable extends Renderable {
   }
 
   set rows(value: TableCellContent[][]) {
-    const structureChanged = value.length !== this._rows.length
+    const newColCount = value[0]?.length || 0
+    const oldColCount = this._rows[0]?.length || 0
+    const structureChanged = value.length !== this._rows.length || newColCount !== oldColCount
     this._rows = value
     this._tableDirty = true
     if (structureChanged) this._tableStructureDirty = true
@@ -164,7 +166,7 @@ export class TableRenderable extends Renderable {
       this.remove(child.id)
     }
 
-    const colCount = this._headers.length
+    const colCount = this._headers.length || this._rows[0]?.length || 0
     if (colCount === 0 || this._rows.length === 0) return
 
     const headingStyle =
@@ -193,31 +195,35 @@ export class TableRenderable extends Renderable {
     headerFg: StyleDefinition['fg'],
     stripeBg: StyleDefinition['fg'],
   ): void {
+    const hasHeaders = this._headers.length > 0
+
     for (let col = 0; col < colCount; col++) {
       const columnBox = new BoxRenderable(this.ctx, {
         id: `${this.id}-col-${col}`,
         flexDirection: 'column',
       })
 
-      const headerContent = this._headers[col] ?? ''
-      let headerStyledText = this.toStyledText(headerContent)
-      headerStyledText = this.styledHeaderChunks(headerStyledText, headingStyle, headerFg)
+      if (hasHeaders) {
+        const headerContent = this._headers[col] ?? ''
+        let headerStyledText = this.toStyledText(headerContent)
+        headerStyledText = this.styledHeaderChunks(headerStyledText, headingStyle, headerFg)
 
-      const headerBox = new BoxRenderable(this.ctx, {
-        id: `${this.id}-col-${col}-header-box`,
-        backgroundColor: headerBg,
-      })
-      headerBox.add(
-        new TextRenderable(this.ctx, {
-          id: `${this.id}-col-${col}-header`,
-          content: headerStyledText,
-          height: 1,
-          overflow: 'hidden',
-          paddingLeft: 1,
-          paddingRight: 1,
-        }),
-      )
-      columnBox.add(headerBox)
+        const headerBox = new BoxRenderable(this.ctx, {
+          id: `${this.id}-col-${col}-header-box`,
+          backgroundColor: headerBg,
+        })
+        headerBox.add(
+          new TextRenderable(this.ctx, {
+            id: `${this.id}-col-${col}-header`,
+            content: headerStyledText,
+            height: 1,
+            overflow: 'hidden',
+            paddingLeft: 1,
+            paddingRight: 1,
+          }),
+        )
+        columnBox.add(headerBox)
+      }
 
       for (let row = 0; row < this._rows.length; row++) {
         const cell = this._rows[row]?.[col] ?? ''
@@ -254,28 +260,30 @@ export class TableRenderable extends Renderable {
     headerFg: StyleDefinition['fg'],
     stripeBg: StyleDefinition['fg'],
   ): void {
-    const headerRow = new BoxRenderable(this.ctx, {
-      id: `${this.id}-header-row`,
-      flexDirection: 'row',
-      backgroundColor: headerBg,
-    })
-    for (let col = 0; col < colCount; col++) {
-      const headerContent = this._headers[col] ?? ''
-      let headerStyledText = this.toStyledText(headerContent)
-      headerStyledText = this.styledHeaderChunks(headerStyledText, headingStyle, headerFg)
-
-      headerRow.add(
-        new TextRenderable(this.ctx, {
-          id: `${this.id}-header-${col}`,
-          content: headerStyledText,
-          flexGrow: 1,
-          flexBasis: 0,
-          paddingLeft: 1,
-          paddingRight: 1,
-        }),
-      )
+    if (this._headers.length > 0) {
+      const headerRow = new BoxRenderable(this.ctx, {
+        id: `${this.id}-header-row`,
+        flexDirection: 'row',
+        backgroundColor: headerBg,
+      })
+      for (let col = 0; col < colCount; col++) {
+        const headerContent = this._headers[col] ?? ''
+        let headerStyledText = this.toStyledText(headerContent)
+        headerStyledText = this.styledHeaderChunks(headerStyledText, headingStyle, headerFg)
+
+        headerRow.add(
+          new TextRenderable(this.ctx, {
+            id: `${this.id}-header-${col}`,
+            content: headerStyledText,
+            flexGrow: 1,
+            flexBasis: 0,
+            paddingLeft: 1,
+            paddingRight: 1,
+          }),
+        )
+      }
+      this.add(headerRow)
     }
-    this.add(headerRow)
 
     for (let row = 0; row < this._rows.length; row++) {
       const isOddRow = row % 2 === 1
@@ -322,7 +330,8 @@ export class TableRenderable extends Renderable {
     const stripeBg = concealStyle?.bg
 
     const columns = (this as any)._childrenInLayoutOrder as Renderable[]
-    const colCount = this._headers.length
+    const colCount = this._headers.length || this._rows[0]?.length || 0
+    const hasHeaders = this._headers.length > 0
 
     for (let col = 0; col < colCount; col++) {
       const columnBox = columns[col]
@@ -330,23 +339,26 @@ export class TableRenderable extends Renderable {
 
       const columnChildren = (columnBox as any)._childrenInLayoutOrder as Renderable[]
 
-      // Update header
-      const headerBox = columnChildren[0]
-      if (headerBox instanceof BoxRenderable) {
-        headerBox.backgroundColor = headerBg ?? 'transparent'
-        const headerChildren = (headerBox as any)._childrenInLayoutOrder as Renderable[]
-        const headerText = headerChildren[0]
-        if (headerText instanceof TextRenderable) {
-          const headerContent = this._headers[col] ?? ''
-          let headerStyledText = this.toStyledText(headerContent)
-          headerStyledText = this.styledHeaderChunks(headerStyledText, headingStyle, headerFg)
-          headerText.content = headerStyledText
+      if (hasHeaders) {
+        // Update header
+        const headerBox = columnChildren[0]
+        if (headerBox instanceof BoxRenderable) {
+          headerBox.backgroundColor = headerBg ?? 'transparent'
+          const headerChildren = (headerBox as any)._childrenInLayoutOrder as Renderable[]
+          const headerText = headerChildren[0]
+          if (headerText instanceof TextRenderable) {
+            const headerContent = this._headers[col] ?? ''
+            let headerStyledText = this.toStyledText(headerContent)
+            headerStyledText = this.styledHeaderChunks(headerStyledText, headingStyle, headerFg)
+            headerText.content = headerStyledText
+          }
         }
       }
 
       // Update data rows
+      const rowOffset = hasHeaders ? 1 : 0
       for (let row = 0; row < this._rows.length; row++) {
-        const cellContainer = columnChildren[row + 1]
+        const cellContainer = columnChildren[row + rowOffset]
         if (cellContainer instanceof BoxRenderable) {
           const isOddRow = row % 2 === 1
           cellContainer.backgroundColor = isOddRow && stripeBg ? stripeBg : 'transparent'
@@ -370,25 +382,29 @@ export class TableRenderable extends Renderable {
     const stripeBg = concealStyle?.bg
 
     const allRows = (this as any)._childrenInLayoutOrder as Renderable[]
-    const colCount = this._headers.length
-
-    const headerRow = allRows[0]
-    if (headerRow instanceof BoxRenderable) {
-      headerRow.backgroundColor = headerBg ?? 'transparent'
-      const headerCells = (headerRow as any)._childrenInLayoutOrder as Renderable[]
-      for (let col = 0; col < colCount; col++) {
-        const headerText = headerCells[col]
-        if (headerText instanceof TextRenderable) {
-          const headerContent = this._headers[col] ?? ''
-          let headerStyledText = this.toStyledText(headerContent)
-          headerStyledText = this.styledHeaderChunks(headerStyledText, headingStyle, headerFg)
-          headerText.content = headerStyledText
+    const colCount = this._headers.length || this._rows[0]?.length || 0
+    const hasHeaders = this._headers.length > 0
+
+    if (hasHeaders) {
+      const headerRow = allRows[0]
+      if (headerRow instanceof BoxRenderable) {
+        headerRow.backgroundColor = headerBg ?? 'transparent'
+        const headerCells = (headerRow as any)._childrenInLayoutOrder as Renderable[]
+        for (let col = 0; col < colCount; col++) {
+          const headerText = headerCells[col]
+          if (headerText instanceof TextRenderable) {
+            const headerContent = this._headers[col] ?? ''
+            let headerStyledText = this.toStyledText(headerContent)
+            headerStyledText = this.styledHeaderChunks(headerStyledText, headingStyle, headerFg)
+            headerText.content = headerStyledText
+          }
         }
       }
     }
 
+    const rowOffset = hasHeaders ? 1 : 0
     for (let row = 0; row < this._rows.length; row++) {
-      const rowBox = allRows[row + 1]
+      const rowBox = allRows[row + rowOffset]
       if (!(rowBox instanceof BoxRenderable)) continue
 
       const isOddRow = row % 2 === 1
@@ -461,8 +477,9 @@ type TableLayoutProps = Partial<
 >
 
 export interface TableProps extends TableLayoutProps {
-  /** Column header labels */
-  headers: string[]
+  /** Column header labels. When omitted, no header row is rendered — useful for
+   *  key-value tables where headers like "Field"/"Value" add no information. */
+  headers?: string[]
   /** Row data – each inner array is one row of cell strings */
   rows: string[][]
   /** When true, cell text wraps instead of being truncated to one line. Default false. */
@@ -474,7 +491,7 @@ export interface TableProps extends TableLayoutProps {
 }
 
 export function Table(props: TableProps): any {
-  const { headers, rows, wrapText, width = '100%', height, ...layoutProps } = props
+  const { headers = [], rows, wrapText, width = '100%', height, ...layoutProps } = props
 
   const themeName = useStore((state) => state.currentThemeName)
   const syntaxStyle = React.useMemo(() => {

package/src/diagram-parser.tsx

@@ -128,9 +128,23 @@ export function diagramToDebugString(parsed: ParsedDiagramLine[]): string {
 
 /**
  * Convert ASCII diagram characters to Unicode box-drawing equivalents.
- * Eliminates visual gaps between lines.
- * - `|` -> `│` (vertical lines)
- * - `--` or more -> `──` (horizontal lines, but not single hyphens in text)
+ *
+ * ASCII glyphs have visible gaps in monospaced fonts because they don't
+ * fill the entire terminal cell:
+ *   `|`  — the pipe glyph is shorter than the cell height, so stacked
+ *          pipes show a gap between every row.
+ *   `-`  — the hyphen glyph is narrower than the cell width and sits
+ *          centered, so consecutive hyphens show gaps between each cell.
+ *
+ * Unicode box-drawing characters are designed to span the full cell,
+ * connecting seamlessly with adjacent cells:
+ *   `│` (U+2502) — fills full cell height, no vertical gaps.
+ *   `─` (U+2500) — fills full cell width, no horizontal gaps.
+ *
+ * Replacements:
+ *   `|`        -> `│`  (every occurrence)
+ *   `--` (2+)  -> `──` (only runs of 2+ to avoid converting single
+ *                       hyphens in regular text like "e-mail")
  */
 export function convertAsciiToUnicode(content: string): string {
   return content

package/src/examples/bar-graph-weekly.vitest.tsx

@@ -87,10 +87,10 @@ test('many columns (20) clips with overflow hidden', async () => {
 
        > Search...
 
-       Weekly Traffic 3 channels across 6 d │         ███         ███ ███
-       Revenue by Region EMEA / APAC / Amer │         ███         ███ ███ ███
-       Server Load CPU / Memory / IO        │ ███     ███ ███     ███ ███ ███
-      ›Many Columns (20) Overflow test with │ ███ ███ ███ ███ ███ ███ ███ ███ ██
+       Weekly Traffic 3 channels across 6 d │
+       Revenue by Region EMEA / APAC / Amer │                             ███
+       Server Load CPU / Memory / IO        │ ███ ███             ███     ███ ██
+      ›Many Columns (20) Overflow test with │ ███ ███     ███     ███ ███ ███ ██
        Many Series (8) Legend overflow test │ ███ ███ ███ ███ ███ ███ ███ ███ ██
        Long Labels Labels wider than bar co │ ███ ███ ███ ███ ███ ███ ███ ███ ██
        Week 1 vs Week 2 Two graphs in a Row │ ███ ███ ███ ███ ███ ███ ███ ███ ██

package/src/examples/detail-metadata-showcase.vitest.tsx

@@ -91,7 +91,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
       Team:        Platform
 
-      ────────────────────────────────────────────────────────────────────────────────────────────
+      ─────────────────────────────────────────────────────────────────────────────────────────────
 
       Status:      Active
 
@@ -101,7 +101,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
       Risk:        Medium
 
-      ────────────────────────────────────────────────────────────────────────────────────────────
+      ─────────────────────────────────────────────────────────────────────────────────────────────
 
       Description: This is a comprehensive metadata showcase that demonstrates all the different
                    ways you can display information using the Detail.Metadata component.
@@ -112,7 +112,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
       Reviewer:    Bob Smith
 
-      ────────────────────────────────────────────────────────────────────────────────────────────
+      ─────────────────────────────────────────────────────────────────────────────────────────────
 
       Repository:  github.com/example
 
@@ -120,7 +120,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
       PR Link:     github.com/organization/repository/pull/12345
 
-      ────────────────────────────────────────────────────────────────────────────────────────────
+      ─────────────────────────────────────────────────────────────────────────────────────────────
 
       Labels:      documentation enhancement good first issue
 
@@ -134,7 +134,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
       Due Date:    2024-02-01
 
-      ────────────────────────────────────────────────────────────────────────────────────────────
+      ─────────────────────────────────────────────────────────────────────────────────────────────
 
       Metrics
 
@@ -147,6 +147,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
       Watchers:    @alice @bob @charlie
 
 
+      esc go back   ^k actions                                                 powered by termcast.app
 
 
 
@@ -159,7 +160,6 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
 
 
-      esc go back   ^k actions                                                 powered by termcast.app
 
     "
   `)
@@ -443,7 +443,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
       Team:        Platform
 
-      ────────────────────────────────────────────────────────────────────────────────────────────
+      ─────────────────────────────────────────────────────────────────────────────────────────────
 
       Status:      Active
 
@@ -453,7 +453,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
       Risk:        Medium
 
-      ────────────────────────────────────────────────────────────────────────────────────────────
+      ─────────────────────────────────────────────────────────────────────────────────────────────
 
       Description: This is a comprehensive metadata showcase that demonstrates all the different
                    ways you can display information using the Detail.Metadata component.
@@ -464,7 +464,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
       Reviewer:    Bob Smith
 
-      ────────────────────────────────────────────────────────────────────────────────────────────
+      ─────────────────────────────────────────────────────────────────────────────────────────────
 
       Repository:  github.com/example
 
@@ -472,7 +472,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
       PR Link:     github.com/organization/repository/pull/12345
 
-      ────────────────────────────────────────────────────────────────────────────────────────────
+      ─────────────────────────────────────────────────────────────────────────────────────────────
 
       Labels:      documentation enhancement good first issue
 
@@ -486,7 +486,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
       Due Date:    2024-02-01
 
-      ────────────────────────────────────────────────────────────────────────────────────────────
+      ─────────────────────────────────────────────────────────────────────────────────────────────
 
       Metrics
 
@@ -499,6 +499,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
       Watchers:    @alice @bob @charlie
 
 
+      esc go back   ^k actions                                                 powered by termcast.app
 
 
 
@@ -511,7 +512,6 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
 
 
-      esc go back   ^k actions                                                 powered by termcast.app
 
     "
   `)

package/src/examples/form-basic.vitest.tsx

@@ -3,6 +3,22 @@ import { launchTerminal, Session } from 'tuistory/src'
 
 let session: Session
 
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function focusedFieldRegex(title: string) {
+  return new RegExp(`◆\\s+${escapeRegExp(title)}`, 'm')
+}
+
+async function waitForFocusedField(title: string) {
+  return session.text({
+    waitFor: (text) => {
+      return focusedFieldRegex(title).test(text)
+    },
+  })
+}
+
 beforeEach(async () => {
   session = await launchTerminal({
     command: 'bun',
@@ -204,8 +220,8 @@ test('form date picker selection with space and enter', async () => {
       │
       ◇  Date of Birth
       │
-      │   ←       2026        →
-      │   ←     February      →
+      │   ←        2026       →
+      │   ←      February     →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -262,8 +278,8 @@ test('form date picker selection with space and enter', async () => {
       │
       ◇  Date of Birth
       │
-      │   ←       2026        →
-      │   ←     February      →
+      │   ←        2026       →
+      │   ←      February     →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -321,8 +337,8 @@ test('form date picker selection with space and enter', async () => {
       │
       ◇  Date of Birth
       │
-      │   ←       2026        →
-      │   ←     February      →
+      │   ←        2026       →
+      │   ←      February     →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -396,8 +412,8 @@ test('form dropdown navigation', async () => {
       │
       ◇  Date of Birth
       │
-      │   ←       2026        →
-      │   ←     February      →
+      │   ←        2026       →
+      │   ←      February     →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -454,8 +470,8 @@ test('form dropdown navigation', async () => {
       │
       ◇  Date of Birth
       │
-      │   ←       2026        →
-      │   ←     February      →
+      │   ←        2026       →
+      │   ←      February     →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -514,8 +530,8 @@ test('form dropdown navigation', async () => {
       │
       ◇  Date of Birth
       │
-      │   ←       2026        →
-      │   ←     February      →
+      │   ←        2026       →
+      │   ←      February     →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -572,8 +588,8 @@ test('form dropdown navigation', async () => {
       │
       ◇  Date of Birth
       │
-      │   ←       2026        →
-      │   ←     February      →
+      │   ←        2026       →
+      │   ←      February     →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -746,8 +762,8 @@ test('arrow down from checkbox to dropdown lands on first item', async () => {
       │
       ◇  Date of Birth
       │
-      │   ←       2026        →
-      │   ←     February      →
+      │   ←        2026       →
+      │   ←      February     →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -917,3 +933,88 @@ test('textarea arrow keys move focus between adjacent form fields', async () =>
   const afterUpSnapshot = await session.text()
   expect(afterUpSnapshot).toMatch(/◆\s+Biography/)
 }, 10000)
+
+test('arrow up/down navigates all form inputs and respects widget edges', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Form Component Demo/i.test(text)
+    },
+  })
+
+  await session.press('tab')
+  let text = await waitForFocusedField('Username')
+  expect(text).toMatch(/◆\s+Username/)
+
+  await session.press('down')
+  text = await waitForFocusedField('Password')
+
+  await session.press('down')
+  text = await waitForFocusedField('Biography')
+
+  await session.type('line 1')
+  await session.press('enter')
+  await session.type('line 2')
+
+  await session.press('up')
+  text = await waitForFocusedField('Biography')
+
+  await session.press('up')
+  text = await waitForFocusedField('Password')
+
+  await session.press('down')
+  text = await waitForFocusedField('Biography')
+
+  await session.press('down')
+  text = await waitForFocusedField('Biography')
+
+  await session.press('down')
+  text = await waitForFocusedField('Email Preferences')
+
+  await session.press('down')
+  text = await waitForFocusedField('Country')
+  expect(text).toMatch(/›.*United States/)
+
+  await session.press('up')
+  text = await waitForFocusedField('Email Preferences')
+
+  await session.press('down')
+  text = await waitForFocusedField('Country')
+  expect(text).toMatch(/›.*United States/)
+
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+
+  text = await waitForFocusedField('Country')
+  expect(text).toMatch(/›.*Germany/)
+
+  await session.press('down')
+  text = await waitForFocusedField('Empty Dropdown')
+
+  await session.press('down')
+  text = await waitForFocusedField('Minimal Field')
+
+  await session.press('down')
+  text = await waitForFocusedField('Date of Birth')
+
+  await session.press('down')
+  text = await waitForFocusedField('Date of Birth')
+
+  let reachedFilePicker = false
+  for (let i = 0; i < 8; i++) {
+    await session.press('down')
+    const nextText = await session.text()
+    if (focusedFieldRegex('Upload Documents').test(nextText)) {
+      reachedFilePicker = true
+      break
+    }
+  }
+
+  expect(reachedFilePicker).toBe(true)
+
+  await session.press('up')
+  text = await waitForFocusedField('Date of Birth')
+  expect(text).toMatch(/◆\s+Date of Birth/)
+}, 20000)

package/src/examples/graph-bar-chart.vitest.tsx

@@ -35,7 +35,7 @@ test('initial render shows bar chart for Monthly Budget', async () => {
       ›Monthly Budget Spent / Remaining / Savings     │ ┌Spent: 78.6%┐
        Disk Usage System / Apps / Media / Free        │
        Investment Portfolio Stocks / Bonds / Cash / C │
-       CPU Time User / System / IO Wait / Idle        │ ────────────────────────────────────────────
+       CPU Time User / System / IO Wait / Idle        │ ───────────────────────────────────────────
        Revenue by Product 6 product lines             │
        A/B Test Split Control vs Variant (50/50)      │ Total: $6,174
        Storage Full 100% used                         │
@@ -46,7 +46,7 @@ test('initial render shows bar chart for Monthly Budget', async () => {
        Stress Test (20 items) Many small equal segmen │
                                                       │
                                                       │
-       ↵ open detail   ↑↓ navigate   ^k actions       │
+                                                      │
                                                       │
                                                       │
                                                       │

package/src/examples/graph-row.vitest.tsx

@@ -39,17 +39,17 @@ test('side detail shows two graphs in a row', async () => {
        Mixed Variants Area left, Striped right        │ Filled chart (right) shows memory steadily
        Sparse Data (Zeros) Filled vs Striped with zer │ climbing.
                                                       │
-                                                      │ 100│            ⡀     100│
-                                                      │    │     ⡄     ⣼⣷⡀       │             ▄▄▀▀
-                                                      │  67│    ⣸⣿⡄   ⣸⣿⣿⣧     67│        ▄▄▀▀▀▀▀▀▀
-                                                      │    │  ⣼⣶⣿⣿⣷⡀ ⢰⣿⣿⣿⣿⣧      │   ▄▄▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │    │ ⢸⣿⣿⣿⣿⣿⣷⣀⣿⣿⣿⣿⣿⣿⣇     │▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │  33│⣀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧  33│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │    │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │   0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │     0h 6h  12h 18h24h     0h 6h  12h 18h24h
+                                                      │ 100│             ⡀     100│
+                                                      │    │     ⣠     ⢠⣾⣷⡀       │             ▄▄▀▀
+                                                      │  67│    ⣰⣿⣧   ⢀⣿⣿⣿⣇     67│        ▄▄▀▀▀▀▀▀▀
+                                                      │    │  ⢠⣷⣿⣿⣿⣆  ⣾⣿⣿⣿⣿⡄      │   ▄▄▀▀▀▀▀▀▀▀▀▀▀▀
+                                                      │    │ ⢀⣿⣿⣿⣿⣿⣿⣆⣸⣿⣿⣿⣿⣿⣿⣄     │▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+                                                      │  33│⣀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧  33│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+                                                      │    │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+                                                      │   0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+                                                      │     0h 6h   12h 18h24h     0h 6h  12h 18h24h
                                                       │
-                                                      │ ───────────────────────────────────────────
+                                                      │ ────────────────────────────────────────────
                                                       │
                                                       │ CPU Peak: 90%
                                                       │