v3.37.0

changelog.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 2026-01-13 - 3.37.0 - feat(dees-button,dees-statsgrid)
+add unified icon property and icon-position support to dees-button; add partition and disk tile types to dees-statsgrid
+
+- dees-button: introduce icon (string) and iconPosition ('left'|'right') properties; extractLightDom() migrates legacy <dees-icon> slotted usage into properties and supports icon-only buttons
+- dees-button: render left/right icon, hide text for icon-only size; preserve backward compatibility for old type mappings
+- Demo updates: convert iconFA attributes to new icon syntax (e.g. 'fa:plus', 'lucide:Search') and add new icon-via-property examples and event logging
+- dees-statsgrid: add IPartitionData and IDiskData interfaces and new tile types 'partition' and 'disk' with rendering, styles and thresholds (usage, filesystem, mountpoint, capacity, iops, health)
+- dees-statsgrid.demo: add Disk & Storage demo panel with sample partition and disk tiles and configuration notes
+- misc: added/updated many demo images and metadata to reflect new icon/tile features
+
+## 2026-01-12 - 3.36.0 - feat(dees-chart-log)
+add xterm search addon support and enhance chart log demo with structured/raw (Docker-like) logs and themeable styles
+
+- Add IXtermSearchAddon and IXtermSearchAddonBundle types and integrate xterm-addon-search loading in DeesServiceLibLoader with caching and preload support
+- Expose new types in services index and add xtermAddonSearch version to CDN_VERSIONS
+- Enhance dees-chart-log demo: separate structured and raw (docker) log panels, add Docker/ANSI log templates, start/stop controls for each simulation, and raw log writing
+- Switch demo styling to cssManager theme-aware CSS, and import css helpers from dees-element
+- Add many .playwright-mcp PNG assets used by demos/tests
+
+## 2026-01-12 - 3.35.1 - fix(dees-statsgrid)
+center CPU core bars when they occupy less than ~66% of the tile and switch bar fills to absolute positioning for correct alignment and smoother transitions
+
+- Add .cpu-cores-bars.centered CSS rule to horizontally center the bars when appropriate.
+- Compute shouldCenter by estimating max bars width (cores * 24px + gaps) and comparing to estimated tile content width (accounts for columnSpan, minTileWidth, gap and ~32px padding), using a 66.6% threshold.
+- Change .cpu-core-bar-container to position: relative and .cpu-core-bar-fill to position: absolute (bottom:0; left:0; right:0) to ensure correct vertical alignment and smoother height transitions.
+
+## 2026-01-12 - 3.35.0 - feat(dees-statsgrid)
+add cpuCores tile type with column spanning, rendering, demo and docs
+
+- Introduce ICpuCore and coresData on IStatsTile to represent per-core usage
+- Implement renderCpuCores with responsive vertical bars, color thresholds (low/medium/high) and average usage header
+- Add columnSpan support for tiles and apply it to grid items (style grid-column: span N)
+- Add demo entries (8/16/32 core examples), Randomize grid action and updated demo layout
+- Document StatsGrid enhancements in readme.hints.md (usage examples and available tile types)
+- Bump devDependencies (@git.zone/tsbuild, @git.zone/tsbundle, @types/node), simplify build script to use tsbundle, and add @git.zone/tsbundle config in npmextra.json
+
 ## 2026-01-12 - 3.34.1 - fix(deps)
 move @design.estate/dees-wcctools from devDependencies to dependencies
 

npmextra.json

@@ -49,5 +49,15 @@
   },
   "@ship.zone/szci": {
     "npmGlobalTools": []
+  },
+  "@git.zone/tsbundle": {
+    "bundles": [
+      {
+        "from": "./ts_web/index.ts",
+        "to": "./dist_bundle/bundle.js",
+        "outputMode": "bundle",
+        "bundler": "esbuild"
+      }
+    ]
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.34.1",
+  "version": "3.37.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -8,7 +8,7 @@
   "type": "module",
   "scripts": {
     "test": "tstest test/ --web --verbose --timeout 30 --logfile",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
     "watch": "tswatch element",
     "buildDocs": "tsdoc",
     "postinstall": "node scripts/update-monaco-version.cjs"
@@ -44,12 +44,12 @@
     "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.0.2",
-    "@git.zone/tsbundle": "^2.6.3",
+    "@git.zone/tsbuild": "^4.1.0",
+    "@git.zone/tsbundle": "^2.8.1",
     "@git.zone/tstest": "^3.1.4",
     "@git.zone/tswatch": "^2.3.13",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.0.3"
+    "@types/node": "^25.0.6"
   },
   "files": [
     "ts/**/*",

readme.hints.md

@@ -911,3 +911,66 @@ appui.getBottomBarVisible();
 - `ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts` - Main component
 - `ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.demo.ts` - Demo
 - `ts_web/elements/interfaces/appconfig.ts` - New interfaces added
+
+## StatsGrid Enhancements (2026-01-12)
+
+### Column Spanning
+
+Tiles can now span multiple columns using the `columnSpan` property. This is useful for wider visualizations like the CPU cores tile.
+
+```typescript
+const tile: IStatsTile = {
+  id: 'wide-tile',
+  title: 'Wide Tile',
+  value: 100,
+  type: 'cpuCores',
+  columnSpan: 2,  // Spans 2 columns
+  coresData: [...]
+};
+```
+
+Note: On smaller screens where only 1 column fits, tiles will automatically fall back to single column width.
+
+### CPU Cores Tile Type
+
+New tile type `cpuCores` for visualizing multi-core CPU usage with vertical bars:
+
+```typescript
+interface ICpuCore {
+  id: string | number;
+  usage: number;  // 0-100
+  label?: string;
+}
+
+const cpuTile: IStatsTile = {
+  id: 'cpu-cores',
+  title: 'CPU Cores',
+  value: 0,  // Not used, avg is calculated from coresData
+  type: 'cpuCores',
+  icon: 'lucide:cpu',
+  columnSpan: 2,  // Recommended for 8+ cores
+  coresData: [
+    { id: 0, usage: 45, label: '0' },
+    { id: 1, usage: 72, label: '1' },
+    // ... more cores
+  ],
+  description: 'Intel i7 - 8 cores'
+};
+```
+
+Features:
+- Vertical bars showing individual core usage
+- Color-coded: green (<50%), yellow (50-80%), red (>80%)
+- Shows average usage in header
+- Core labels shown for 16 or fewer cores
+- Tooltips show exact usage per core
+- Responsive: bars flex to fill available width
+
+### Available Tile Types:
+- `number` - Simple numeric display
+- `gauge` - Semi-circular gauge with thresholds
+- `percentage` - Progress bar (0-100%)
+- `trend` - Sparkline with recent data
+- `text` - Text value display
+- `multiPercentage` - Multiple progress bars
+- `cpuCores` - Vertical bar visualization for CPU cores

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.34.1',
+  version: '3.37.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-button/dees-button/dees-button.demo.ts

@@ -142,54 +142,95 @@ export const demoFunc = () => html`
       <dees-panel .title=${'3. Buttons with Icons'} .subtitle=${'Combining icons with text for enhanced visual communication'}>
         <div class="icon-row">
           <dees-button>
-            <dees-icon iconFA="faPlus"></dees-icon>
+            <dees-icon icon="fa:plus"></dees-icon>
             Add Item
           </dees-button>
           <dees-button type="destructive">
-            <dees-icon iconFA="faTrash"></dees-icon>
+            <dees-icon icon="fa:trash"></dees-icon>
             Delete
           </dees-button>
           <dees-button type="outline">
-            <dees-icon iconFA="faDownload"></dees-icon>
+            <dees-icon icon="lucide:Download"></dees-icon>
             Download
           </dees-button>
         </div>
 
         <div class="icon-row">
           <dees-button type="secondary" size="sm">
-            <dees-icon iconFA="faCog"></dees-icon>
+            <dees-icon icon="fa:gear"></dees-icon>
             Settings
           </dees-button>
           <dees-button type="ghost">
-            <dees-icon iconFA="faChevronLeft"></dees-icon>
+            <dees-icon icon="fa:caretLeft"></dees-icon>
             Back
           </dees-button>
           <dees-button type="ghost">
             Next
-            <dees-icon iconFA="faChevronRight"></dees-icon>
+            <dees-icon icon="fa:caretRight"></dees-icon>
           </dees-button>
         </div>
 
         <div class="icon-row">
           <dees-button size="icon" type="default">
-            <dees-icon iconFA="faPlus"></dees-icon>
+            <dees-icon icon="fa:plus"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="secondary">
-            <dees-icon iconFA="faCog"></dees-icon>
+            <dees-icon icon="fa:gear"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="outline">
-            <dees-icon iconFA="faSearch"></dees-icon>
+            <dees-icon icon="lucide:Search"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="ghost">
-            <dees-icon iconFA="faEllipsisV"></dees-icon>
+            <dees-icon icon="lucide:MoreVertical"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="destructive">
-            <dees-icon iconFA="faTrash"></dees-icon>
+            <dees-icon icon="fa:trash"></dees-icon>
           </dees-button>
         </div>
       </dees-panel>
     </dees-demowrapper>
 
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Track icon property button clicks
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const icon = button.getAttribute('icon') || 'none';
+          const position = button.getAttribute('iconPosition') || 'left';
+          console.log(`Icon property button: icon=${icon}, position=${position}`);
+        });
+      });
+    }}>
+      <dees-panel .title=${'4. Icons via Property'} .subtitle=${'Simplified icon syntax using the icon property'}>
+        <div class="icon-row">
+          <dees-button icon="fa:plus">Add Item</dees-button>
+          <dees-button type="destructive" icon="fa:trash">Delete</dees-button>
+          <dees-button type="outline" icon="lucide:Download">Download</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button type="secondary" size="sm" icon="fa:gear">Settings</dees-button>
+          <dees-button type="ghost" icon="fa:caretLeft">Back</dees-button>
+          <dees-button type="ghost" icon="fa:caretRight" iconPosition="right">Next</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button size="icon" type="default" icon="fa:plus"></dees-button>
+          <dees-button size="icon" type="secondary" icon="lucide:Settings"></dees-button>
+          <dees-button size="icon" type="outline" icon="lucide:Search"></dees-button>
+          <dees-button size="icon" type="ghost" icon="lucide:MoreVertical"></dees-button>
+          <dees-button size="icon" type="destructive" icon="fa:trash"></dees-button>
+        </div>
+
+        <div style="margin-top: 16px;">
+          <div class="code-snippet">
+            &lt;dees-button icon="fa:plus"&gt;Add Item&lt;/dees-button&gt;<br>
+            &lt;dees-button icon="fa:caretRight" iconPosition="right"&gt;Next&lt;/dees-button&gt;
+          </div>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
     <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
       // Demonstrate status changes
       const pendingButton = elementArg.querySelector('dees-button[status="pending"]');
@@ -215,7 +256,7 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'4. Button States'} .subtitle=${'Different states to indicate button status and loading conditions'}>
+      <dees-panel .title=${'5. Button States'} .subtitle=${'Different states to indicate button status and loading conditions'}>
         <div class="button-group">
           <dees-button status="normal">Normal</dees-button>
           <dees-button status="pending">Processing...</dees-button>
@@ -260,7 +301,7 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'5. Event Handling'} .subtitle=${'Interactive examples with click event handling'}>
+      <dees-panel .title=${'6. Event Handling'} .subtitle=${'Interactive examples with click event handling'}>
         <div class="button-group">
           <dees-button>Click Me</dees-button>
           <dees-button type="secondary" .eventDetailData=${'custom-data-123'}>
@@ -303,7 +344,7 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'6. Form Integration'} .subtitle=${'Buttons working within forms with automatic spacing'}>
+      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Buttons working within forms with automatic spacing'}>
         <dees-form>
           <dees-input-text label="Name" key="name" required></dees-input-text>
           <dees-input-text label="Email" key="email" type="email" required></dees-input-text>
@@ -330,7 +371,7 @@ export const demoFunc = () => html`
         }
       });
     }}>
-      <dees-panel .title=${'7. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
+      <dees-panel .title=${'8. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
         <div class="button-group">
           <dees-button type="normal">Normal → Default</dees-button>
           <dees-button type="highlighted">Highlighted → Destructive</dees-button>
@@ -371,20 +412,20 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'8. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
+      <dees-panel .title=${'9. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
         <div class="horizontal-group">
           <div class="vertical-group">
             <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Action Group</h4>
             <dees-button type="default" size="sm">
-              <dees-icon iconFA="faSave"></dees-icon>
+              <dees-icon icon="lucide:Save"></dees-icon>
               Save Changes
             </dees-button>
             <dees-button type="secondary" size="sm">
-              <dees-icon iconFA="faUndo"></dees-icon>
+              <dees-icon icon="lucide:Undo2"></dees-icon>
               Discard
             </dees-button>
             <dees-button type="ghost" size="sm">
-              <dees-icon iconFA="faQuestionCircle"></dees-icon>
+              <dees-icon icon="lucide:HelpCircle"></dees-icon>
               Help
             </dees-button>
           </div>
@@ -392,15 +433,15 @@ export const demoFunc = () => html`
           <div class="vertical-group">
             <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Danger Zone</h4>
             <dees-button type="destructive" size="sm">
-              <dees-icon iconFA="faTrash"></dees-icon>
+              <dees-icon icon="fa:trash"></dees-icon>
               Delete Account
             </dees-button>
             <dees-button type="outline" size="sm">
-              <dees-icon iconFA="faArchive"></dees-icon>
+              <dees-icon icon="lucide:Archive"></dees-icon>
               Archive Data
             </dees-button>
             <dees-button type="ghost" size="sm" disabled>
-              <dees-icon iconFA="faBan"></dees-icon>
+              <dees-icon icon="lucide:Ban"></dees-icon>
               Not Available
             </dees-button>
           </div>
@@ -409,8 +450,7 @@ export const demoFunc = () => html`
         <div style="margin-top: 24px;">
           <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Code Example:</h4>
           <div class="code-snippet">
-            &lt;dees-button type="default" size="sm" @clicked="\${handleClick}"&gt;<br>
-            &nbsp;&nbsp;&lt;dees-icon iconFA="faSave"&gt;&lt;/dees-icon&gt;<br>
+            &lt;dees-button type="default" size="sm" icon="lucide:Save" @clicked="\${handleClick}"&gt;<br>
             &nbsp;&nbsp;Save Changes<br>
             &lt;/dees-button&gt;
           </div>

ts_web/elements/00group-button/dees-button/dees-button.ts

@@ -68,6 +68,12 @@ export class DeesButton extends DeesElement {
   })
   accessor insideForm: boolean = false;
 
+  @property({ type: String, reflect: true })
+  accessor icon: string;
+
+  @property({ type: String, reflect: true })
+  accessor iconPosition: 'left' | 'right' = 'left';
+
   constructor() {
     super();
   }
@@ -340,9 +346,62 @@ export class DeesButton extends DeesElement {
         height: 18px;
       }
 
+      /* Text alignment */
+      .textbox {
+        display: flex;
+        align-items: center;
+      }
+
     `,
   ];
 
+  /**
+   * Extracts icon and text from light DOM and sets properties
+   */
+  private extractLightDom(): void {
+    const iconElement = this.querySelector('dees-icon') as any;
+
+    // Get all text content from light DOM
+    const textContent = Array.from(this.childNodes)
+      .filter(node => node.nodeType === Node.TEXT_NODE)
+      .map(node => node.textContent?.trim())
+      .filter(Boolean)
+      .join(' ');
+
+    if (textContent && !this.text) {
+      this.text = textContent;
+    }
+
+    if (iconElement) {
+      // Get icon value
+      const iconValue = iconElement.icon || iconElement.getAttribute('icon') ||
+                        (iconElement.iconFA ? `fa:${iconElement.iconFA}` : null);
+
+      if (iconValue) {
+        // Determine position based on DOM order
+        const children = Array.from(this.childNodes);
+        const iconIndex = children.indexOf(iconElement);
+        const textNodes = children.filter(node =>
+          node.nodeType === Node.TEXT_NODE && node.textContent?.trim()
+        );
+
+        if (textNodes.length > 0) {
+          const firstTextIndex = children.indexOf(textNodes[0]);
+          this.iconPosition = iconIndex < firstTextIndex ? 'left' : 'right';
+        }
+
+        // Set the icon property
+        this.icon = iconValue;
+      }
+
+      // Remove the light DOM icon element
+      iconElement.remove();
+    }
+
+    // Clear all remaining light DOM
+    this.innerHTML = '';
+  }
+
   public render(): TemplateResult {
     // Map old types to new types for backward compatibility
     const typeMap: {[key: string]: string} = {
@@ -355,6 +414,16 @@ export class DeesButton extends DeesElement {
     const actualType = typeMap[this.type] || this.type;
     const actualSize = this.type === 'big' ? 'lg' : this.size;
 
+    const leftIcon = this.iconPosition === 'left' && this.icon
+      ? html`<dees-icon .icon=${this.icon}></dees-icon>`
+      : '';
+    const rightIcon = this.iconPosition === 'right' && this.icon
+      ? html`<dees-icon .icon=${this.icon}></dees-icon>`
+      : '';
+
+    // For icon-only buttons, hide the textbox
+    const isIconOnly = actualSize === 'icon' && this.icon;
+
     return html`
       <div
         class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} ${this.status} ${this.disabled
@@ -369,7 +438,9 @@ export class DeesButton extends DeesElement {
             size="${actualSize === 'sm' ? 14 : actualSize === 'lg' ? 18 : 16}"
           ></dees-spinner>
         `}
-        <div class="textbox">${this.text || html`<slot>Button</slot>`}</div>
+        ${leftIcon}
+        ${isIconOnly ? '' : html`<div class="textbox">${this.text || 'Button'}</div>`}
+        ${rightIcon}
       </div>
     `;
   }
@@ -390,6 +461,7 @@ export class DeesButton extends DeesElement {
   }
 
   public async firstUpdated() {
-    // Don't set default text here as it interferes with slotted content
+    // Extract light DOM content (icon + text) and set as properties
+    this.extractLightDom();
   }
 }

ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts

@@ -1,13 +1,15 @@
-import { html } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
 import type { DeesChartLog } from '../dees-chart-log/dees-chart-log.js';
 import '@design.estate/dees-wcctools/demotools';
 
 export const demoFunc = () => {
   return html`
     <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
-      // Get the log element
-      const logElement = elementArg.querySelector('dees-chart-log') as DeesChartLog;
-      let intervalId: number;
+      // Get the log elements
+      const structuredLog = elementArg.querySelector('#structured-log') as DeesChartLog;
+      const rawLog = elementArg.querySelector('#raw-log') as DeesChartLog;
+      let structuredIntervalId: number;
+      let rawIntervalId: number;
 
       const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];
 
@@ -49,9 +51,25 @@ export const demoFunc = () => {
         ],
       };
 
+      // Docker-like raw log lines with ANSI colors
+      const dockerLogTemplates = [
+        '\x1b[90m2024-01-15T10:23:45.123Z\x1b[0m \x1b[36mINFO\x1b[0m  [nginx] GET /api/health 200 - 2ms',
+        '\x1b[90m2024-01-15T10:23:45.456Z\x1b[0m \x1b[33mWARN\x1b[0m  [redis] Connection pool running low: 3/10',
+        '\x1b[90m2024-01-15T10:23:45.789Z\x1b[0m \x1b[31mERROR\x1b[0m [mongodb] Query timeout after 30000ms',
+        '\x1b[90m2024-01-15T10:23:46.012Z\x1b[0m \x1b[36mINFO\x1b[0m  [app] Processing batch job #{{jobId}}',
+        '\x1b[90m2024-01-15T10:23:46.345Z\x1b[0m \x1b[32mOK\x1b[0m    [health] All services healthy',
+        '\x1b[90m2024-01-15T10:23:46.678Z\x1b[0m \x1b[36mINFO\x1b[0m  [kafka] Message consumed from topic: events',
+        '\x1b[90m2024-01-15T10:23:47.001Z\x1b[0m \x1b[35mDEBUG\x1b[0m [grpc] Request received: GetUser(id={{userId}})',
+        '\x1b[90m2024-01-15T10:23:47.234Z\x1b[0m \x1b[31mERROR\x1b[0m [auth] Token validation failed: expired',
+        '\x1b[90m2024-01-15T10:23:47.567Z\x1b[0m \x1b[33mWARN\x1b[0m  [rate-limit] IP {{ip}} approaching rate limit',
+        '\x1b[90m2024-01-15T10:23:47.890Z\x1b[0m \x1b[36mINFO\x1b[0m  [websocket] Client connected: session={{session}}',
+        // Multi-line log entry like stack traces
+        '\x1b[31mError: Connection refused\x1b[0m\n    at TcpConnection.connect (/app/node_modules/pg/lib/connection.js:12:15)\n    at Pool.connect (/app/node_modules/pg/lib/pool.js:45:23)\n    at async DatabaseService.query (/app/src/db/service.ts:89:12)',
+      ];
+
       const generateRandomLog = () => {
         const levels: Array<'debug' | 'info' | 'warn' | 'error' | 'success'> = ['debug', 'info', 'warn', 'error', 'success'];
-        const weights = [0.2, 0.5, 0.15, 0.1, 0.05]; // Weighted probability
+        const weights = [0.2, 0.5, 0.15, 0.1, 0.05];
 
         const random = Math.random();
         let cumulative = 0;
@@ -92,17 +110,30 @@ export const demoFunc = () => {
           .replace('{{port}}', String(3000 + Math.floor(Math.random() * 10)))
           .replace('{{size}}', String(Math.floor(Math.random() * 500) + 100));
 
-        logElement.addLog(level, message, source);
+        structuredLog.addLog(level, message, source);
       };
 
-      const startSimulation = () => {
-        if (!intervalId) {
-          // Generate logs at random intervals between 500ms and 2500ms
+      const generateDockerLog = () => {
+        const template = dockerLogTemplates[Math.floor(Math.random() * dockerLogTemplates.length)];
+        const now = new Date().toISOString();
+
+        const logLine = template
+          .replace(/2024-01-15T10:23:\d{2}\.\d{3}Z/g, now)
+          .replace('{{jobId}}', String(Math.floor(Math.random() * 10000)))
+          .replace('{{userId}}', String(Math.floor(Math.random() * 10000)))
+          .replace('{{ip}}', `192.168.1.${Math.floor(Math.random() * 255)}`)
+          .replace('{{session}}', Math.random().toString(36).substring(2, 11));
+
+        rawLog.writelnRaw(logLine);
+      };
+
+      const startStructuredSimulation = () => {
+        if (!structuredIntervalId) {
           const scheduleNext = () => {
             generateRandomLog();
             const nextDelay = Math.random() * 2000 + 500;
-            intervalId = window.setTimeout(() => {
-              if (intervalId) {
+            structuredIntervalId = window.setTimeout(() => {
+              if (structuredIntervalId) {
                 scheduleNext();
               }
             }, nextDelay);
@@ -111,10 +142,32 @@ export const demoFunc = () => {
         }
       };
 
-      const stopSimulation = () => {
-        if (intervalId) {
-          window.clearTimeout(intervalId);
-          intervalId = null;
+      const stopStructuredSimulation = () => {
+        if (structuredIntervalId) {
+          window.clearTimeout(structuredIntervalId);
+          structuredIntervalId = null;
+        }
+      };
+
+      const startRawSimulation = () => {
+        if (!rawIntervalId) {
+          const scheduleNext = () => {
+            generateDockerLog();
+            const nextDelay = Math.random() * 1000 + 200;
+            rawIntervalId = window.setTimeout(() => {
+              if (rawIntervalId) {
+                scheduleNext();
+              }
+            }, nextDelay);
+          };
+          scheduleNext();
+        }
+      };
+
+      const stopRawSimulation = () => {
+        if (rawIntervalId) {
+          window.clearTimeout(rawIntervalId);
+          rawIntervalId = null;
         }
       };
 
@@ -122,48 +175,102 @@ export const demoFunc = () => {
       const buttons = elementArg.querySelectorAll('dees-button');
       buttons.forEach(button => {
         const text = button.textContent?.trim();
-        if (text === 'Add Single Log') {
-          button.addEventListener('click', () => generateRandomLog());
-        } else if (text === 'Start Simulation') {
-          button.addEventListener('click', () => startSimulation());
-        } else if (text === 'Stop Simulation') {
-          button.addEventListener('click', () => stopSimulation());
+        switch (text) {
+          case 'Add Structured Log':
+            button.addEventListener('click', () => generateRandomLog());
+            break;
+          case 'Start Structured':
+            button.addEventListener('click', () => startStructuredSimulation());
+            break;
+          case 'Stop Structured':
+            button.addEventListener('click', () => stopStructuredSimulation());
+            break;
+          case 'Add Docker Log':
+            button.addEventListener('click', () => generateDockerLog());
+            break;
+          case 'Start Docker':
+            button.addEventListener('click', () => startRawSimulation());
+            break;
+          case 'Stop Docker':
+            button.addEventListener('click', () => stopRawSimulation());
+            break;
         }
       });
     }}>
       <style>
-      .demoBox {
-        position: relative;
-        background: #000000;
-        height: 100%;
-        width: 100%;
-        padding: 40px;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-      .controls {
-        display: flex;
-        gap: 10px;
-        flex-wrap: wrap;
-      }
-      .info {
-        color: #888;
-        font-size: 12px;
-        font-family: 'Geist Sans', sans-serif;
-      }
-    </style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 5%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .section {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+          }
+          .section-title {
+            color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+            font-size: 14px;
+            font-weight: 600;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .section-description {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+            font-size: 12px;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .controls {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+          }
+        `}
+      </style>
     <div class="demoBox">
-      <div class="controls">
-        <dees-button>Add Single Log</dees-button>
-        <dees-button>Start Simulation</dees-button>
-        <dees-button>Stop Simulation</dees-button>
+      <!-- Structured Logs Section -->
+      <div class="section">
+        <div class="section-title">Structured Logs (ILogEntry)</div>
+        <div class="section-description">
+          Structured log entries with level, message, and source. Supports search and keyword highlighting.
+        </div>
+        <div class="controls">
+          <dees-button>Add Structured Log</dees-button>
+          <dees-button>Start Structured</dees-button>
+          <dees-button>Stop Structured</dees-button>
+        </div>
+        <dees-chart-log
+          id="structured-log"
+          .label=${'Production Server Logs'}
+          .highlightKeywords=${['error', 'failed', 'timeout']}
+          .showMetrics=${true}
+        ></dees-chart-log>
+      </div>
+
+      <!-- Raw Logs Section -->
+      <div class="section">
+        <div class="section-title">Raw Logs (Docker/Container Style)</div>
+        <div class="section-description">
+          Raw log output with ANSI escape sequences for real Docker/container logs.
+        </div>
+        <div class="controls">
+          <dees-button>Add Docker Log</dees-button>
+          <dees-button>Start Docker</dees-button>
+          <dees-button>Stop Docker</dees-button>
+        </div>
+        <dees-chart-log
+          id="raw-log"
+          .label=${'Docker Container Logs'}
+          .mode=${'raw'}
+          .showMetrics=${false}
+        ></dees-chart-log>
       </div>
-      <div class="info">Simulating realistic server logs with various levels and sources</div>
-      <dees-chart-log
-        .label=${'Production Server Logs'}
-      ></dees-chart-log>
     </div>
     </dees-demowrapper>
   `;

ts_web/elements/dees-statsgrid/dees-statsgrid.demo.ts

@@ -1,7 +1,16 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
 import '../dees-panel/dees-panel.js';
-import type { IStatsTile } from '../dees-statsgrid/dees-statsgrid.js';
+import type { IStatsTile, ICpuCore, IPartitionData, IDiskData } from '../dees-statsgrid/dees-statsgrid.js';
+
+// Helper function to generate random CPU core data
+const generateCpuCores = (count: number): ICpuCore[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    usage: Math.round(Math.random() * 100),
+    label: `${i}`,
+  }));
+};
 
 export const demoFunc = () => {
   return html`
@@ -334,7 +343,96 @@ export const demoFunc = () => {
         ></dees-statsgrid>
       </dees-panel>
       
-      <dees-panel .title=${'4. Interactive Features'} .subtitle=${'Tiles with actions and real-time updates'}>
+      <dees-panel .title=${'4. CPU Cores Visualization'} .subtitle=${'Vertical bar visualization for multi-core CPU usage with column spanning'}>
+        <dees-statsgrid
+          id="cpu-cores-grid"
+          .tiles=${[
+            {
+              id: 'cpu-cores-8',
+              title: 'CPU Cores (8-core)',
+              value: 0,
+              type: 'cpuCores',
+              icon: 'lucide:cpu',
+              columnSpan: 2,
+              coresData: generateCpuCores(8),
+              description: 'Intel i7 - 8 cores'
+            },
+            {
+              id: 'memory',
+              title: 'Memory Usage',
+              value: 68,
+              type: 'percentage',
+              icon: 'lucide:database',
+              description: '13.6 GB of 20 GB'
+            },
+            {
+              id: 'cpu-cores-16',
+              title: 'CPU Cores (16-core)',
+              value: 0,
+              type: 'cpuCores',
+              icon: 'lucide:cpu',
+              columnSpan: 2,
+              coresData: generateCpuCores(16),
+              description: 'AMD Ryzen 9 - 16 cores'
+            },
+            {
+              id: 'network',
+              title: 'Network I/O',
+              value: 245,
+              unit: 'MB/s',
+              type: 'trend',
+              icon: 'lucide:network',
+              trendData: [200, 220, 235, 240, 238, 245],
+              description: 'throughput'
+            },
+            {
+              id: 'cpu-cores-32',
+              title: 'Server CPU (32-core)',
+              value: 0,
+              type: 'cpuCores',
+              icon: 'lucide:server',
+              columnSpan: 3,
+              coresData: generateCpuCores(32),
+              description: 'AMD EPYC - 32 cores'
+            },
+            {
+              id: 'disk',
+              title: 'Disk Usage',
+              value: 42,
+              type: 'percentage',
+              icon: 'lucide:hard-drive',
+              description: '420 GB of 1 TB'
+            }
+          ]}
+          .gridActions=${[
+            {
+              name: 'Randomize',
+              iconName: 'lucide:shuffle',
+              action: async () => {
+                const grid = document.querySelector('#cpu-cores-grid') as any;
+                if (!grid) return;
+                const tiles = grid.tiles.map((tile: any) => {
+                  if (tile.type === 'cpuCores' && tile.coresData) {
+                    return {
+                      ...tile,
+                      coresData: tile.coresData.map((core: any) => ({
+                        ...core,
+                        usage: Math.round(Math.random() * 100)
+                      }))
+                    };
+                  }
+                  return tile;
+                });
+                grid.tiles = tiles;
+              }
+            }
+          ]}
+          .minTileWidth=${250}
+          .gap=${16}
+        ></dees-statsgrid>
+      </dees-panel>
+
+      <dees-panel .title=${'5. Interactive Features'} .subtitle=${'Tiles with actions and real-time updates'}>
         <dees-statsgrid
           id="interactive-grid"
           .tiles=${[
@@ -448,7 +546,7 @@ export const demoFunc = () => {
         ></dees-statsgrid>
       </dees-panel>
       
-      <dees-panel .title=${'5. Code Example'} .subtitle=${'How to implement a stats grid with TypeScript'}>
+      <dees-panel .title=${'6. Code Example'} .subtitle=${'How to implement a stats grid with TypeScript'}>
         <div class="code-block">${`const tiles: IStatsTile[] = [
   {
     id: 'revenue',
@@ -503,6 +601,134 @@ html\`
   ></dees-statsgrid>
 \`;`}</div>
       </dees-panel>
+
+      <dees-panel .title=${'7. Disk & Storage Tiles'} .subtitle=${'Partition and physical disk visualization tiles'}>
+        <dees-statsgrid
+          .tiles=${[
+            {
+              id: 'root-partition',
+              title: 'Root Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:folder-root',
+              partitionData: {
+                used: 698_341_425_152,      // ~650 GB
+                total: 1_073_741_824_000,   // ~1 TB
+                filesystem: 'ext4',
+                mountPoint: '/'
+              }
+            },
+            {
+              id: 'home-partition',
+              title: 'Home Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:home',
+              partitionData: {
+                used: 214_748_364_800,      // ~200 GB
+                total: 536_870_912_000,     // ~500 GB
+                filesystem: 'ext4',
+                mountPoint: '/home'
+              }
+            },
+            {
+              id: 'data-partition',
+              title: 'Data Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:database',
+              partitionData: {
+                used: 1_932_735_283_200,    // ~1.8 TB (90% - critical)
+                total: 2_147_483_648_000,   // ~2 TB
+                filesystem: 'xfs',
+                mountPoint: '/data'
+              }
+            },
+            {
+              id: 'nvme-ssd',
+              title: 'Primary NVMe',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:hard-drive',
+              columnSpan: 2,
+              diskData: {
+                capacity: 2_000_000_000_000,  // 2 TB
+                model: 'Samsung 990 Pro',
+                type: 'nvme',
+                iops: {
+                  read: 7450,
+                  write: 6900
+                },
+                health: 98
+              }
+            },
+            {
+              id: 'sata-ssd',
+              title: 'Secondary SSD',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:hard-drive',
+              diskData: {
+                capacity: 1_000_000_000_000,  // 1 TB
+                model: 'Crucial MX500',
+                type: 'ssd',
+                iops: {
+                  read: 560,
+                  write: 510
+                },
+                health: 85
+              }
+            },
+            {
+              id: 'hdd-storage',
+              title: 'Backup HDD',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:archive',
+              diskData: {
+                capacity: 8_000_000_000_000,  // 8 TB
+                model: 'Seagate IronWolf',
+                type: 'hdd',
+                iops: {
+                  read: 210,
+                  write: 195
+                },
+                health: 42
+              }
+            }
+          ]}
+          .minTileWidth=${280}
+          .gap=${16}
+        ></dees-statsgrid>
+
+        <div class="tile-config">
+          <div class="config-section">
+            <div class="config-title">Partition Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>partitionData.used:</strong> Used space in bytes (auto-formatted)</li>
+                <li><strong>partitionData.total:</strong> Total capacity in bytes</li>
+                <li><strong>partitionData.filesystem:</strong> Filesystem type (ext4, xfs, ntfs)</li>
+                <li><strong>partitionData.mountPoint:</strong> Mount point path (optional)</li>
+              </ul>
+              Color thresholds: Normal (&lt;75%), Warning (75-90%), Critical (&gt;90%)
+            </div>
+          </div>
+          <div class="config-section">
+            <div class="config-title">Disk Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>diskData.capacity:</strong> Total capacity in bytes</li>
+                <li><strong>diskData.model:</strong> Disk model name (optional)</li>
+                <li><strong>diskData.type:</strong> Disk type: 'ssd', 'hdd', or 'nvme'</li>
+                <li><strong>diskData.iops:</strong> Read/write IOPS (optional)</li>
+                <li><strong>diskData.health:</strong> Health percentage 0-100 (optional)</li>
+              </ul>
+              Health thresholds: Good (70-100%), Warning (30-70%), Critical (&lt;30%)
+            </div>
+          </div>
+        </div>
+      </dees-panel>
     </div>
 
     <script>

ts_web/elements/dees-statsgrid/dees-statsgrid.ts

@@ -24,12 +24,39 @@ declare global {
   }
 }
 
+export interface ICpuCore {
+  id: string | number;
+  usage: number; // 0-100
+  label?: string;
+}
+
+export interface IPartitionData {
+  used: number;        // bytes
+  total: number;       // bytes
+  filesystem: string;  // e.g., 'ext4', 'NTFS', 'btrfs'
+  mountPoint?: string; // e.g., '/', '/home', 'C:'
+}
+
+export interface IDiskData {
+  capacity: number;    // bytes
+  model?: string;      // e.g., 'Samsung 970 EVO Plus'
+  type?: 'ssd' | 'hdd' | 'nvme';
+  iops?: {
+    read: number;
+    write: number;
+  };
+  health?: number;     // 0-100 (100 = new, 0 = end of life)
+}
+
 export interface IStatsTile {
   id: string;
   title: string;
   value: number | string;
   unit?: string;
-  type: 'number' | 'gauge' | 'percentage' | 'trend' | 'text' | 'multiPercentage';
+  type: 'number' | 'gauge' | 'percentage' | 'trend' | 'text' | 'multiPercentage' | 'cpuCores' | 'partition' | 'disk';
+
+  // Layout options
+  columnSpan?: number; // Number of columns to span (default: 1)
 
   // For gauge type
   gaugeOptions?: {
@@ -48,6 +75,15 @@ export interface IStatsTile {
     color?: string;
   }>;
 
+  // For cpuCores type
+  coresData?: ICpuCore[];
+
+  // For partition type
+  partitionData?: IPartitionData;
+
+  // For disk type
+  diskData?: IDiskData;
+
   // Visual customization
   color?: string;
   icon?: string;
@@ -366,6 +402,326 @@ export class DeesStatsGrid extends DeesElement {
         border-radius: 2px;
       }
 
+      /* CPU Cores Styles */
+      .cpu-cores-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 80px;
+      }
+
+      .cpu-cores-header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        margin-bottom: 12px;
+      }
+
+      .cpu-cores-value {
+        font-size: var(--value-font-size);
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        line-height: 1.1;
+        letter-spacing: -0.025em;
+      }
+
+      .cpu-cores-unit {
+        font-size: var(--unit-font-size);
+        font-weight: 400;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        letter-spacing: -0.01em;
+      }
+
+      .cpu-cores-label {
+        font-size: var(--label-font-size);
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        letter-spacing: -0.01em;
+        margin-left: auto;
+      }
+
+      .cpu-cores-bars {
+        display: flex;
+        align-items: flex-end;
+        gap: 3px;
+        flex: 1;
+        min-height: 60px;
+        padding: 4px 0;
+      }
+
+      .cpu-cores-bars.centered {
+        justify-content: center;
+      }
+
+      .cpu-core-bar-container {
+        flex: 1;
+        min-width: 6px;
+        max-width: 24px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .cpu-core-bar-wrapper {
+        flex: 1;
+        width: 100%;
+        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        border-radius: 2px;
+        position: relative;
+        overflow: hidden;
+        min-height: 40px;
+      }
+
+      .cpu-core-bar-fill {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        background: ${cssManager.bdTheme('#666666', '#888888')};
+        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
+        border-radius: 2px 2px 0 0;
+      }
+
+      .cpu-core-bar-fill.low {
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+      }
+
+      .cpu-core-bar-fill.medium {
+        background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
+      }
+
+      .cpu-core-bar-fill.high {
+        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
+      }
+
+      .cpu-core-label {
+        font-size: 9px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+      }
+
+      /* Partition Styles */
+      .partition-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        gap: 8px;
+      }
+
+      .partition-header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+      }
+
+      .partition-percentage {
+        font-size: var(--value-font-size);
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        line-height: 1.1;
+        letter-spacing: -0.025em;
+      }
+
+      .partition-bar {
+        width: 100%;
+        height: 6px;
+        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        border-radius: 3px;
+        overflow: hidden;
+      }
+
+      .partition-bar-fill {
+        height: 100%;
+        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 3px;
+      }
+
+      .partition-bar-fill.warning {
+        background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
+      }
+
+      .partition-bar-fill.critical {
+        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
+      }
+
+      .partition-stats {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: auto;
+      }
+
+      .partition-stat {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .partition-stat-label {
+        font-size: 10px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+      }
+
+      .partition-stat-value {
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        letter-spacing: -0.01em;
+      }
+
+      .partition-meta {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-top: 4px;
+      }
+
+      .partition-filesystem {
+        font-size: 11px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+        padding: 2px 6px;
+        border-radius: 3px;
+      }
+
+      .partition-mountpoint {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+      }
+
+      /* Disk Styles */
+      .disk-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        gap: 8px;
+      }
+
+      .disk-capacity {
+        font-size: var(--value-font-size);
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        line-height: 1.1;
+        letter-spacing: -0.025em;
+      }
+
+      .disk-model {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .disk-type-badge {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+        padding: 2px 6px;
+        border-radius: 3px;
+      }
+
+      .disk-metrics {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-top: auto;
+      }
+
+      .disk-iops {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .disk-iops-item {
+        display: flex;
+        align-items: baseline;
+        gap: 4px;
+      }
+
+      .disk-iops-label {
+        font-size: 10px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        text-transform: uppercase;
+      }
+
+      .disk-iops-value {
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+      }
+
+      .disk-health {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .disk-health-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+      }
+
+      .disk-health-label {
+        font-size: 10px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        text-transform: uppercase;
+      }
+
+      .disk-health-value {
+        font-size: 12px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+      }
+
+      .disk-health-bar {
+        width: 100%;
+        height: 4px;
+        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        border-radius: 2px;
+        overflow: hidden;
+      }
+
+      .disk-health-fill {
+        height: 100%;
+        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 2px;
+      }
+
+      .disk-health-fill.good {
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+      }
+
+      .disk-health-fill.warning {
+        background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
+      }
+
+      .disk-health-fill.critical {
+        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
+      }
+
       /* Trend Styles */
       .trend-container {
         width: 100%;
@@ -488,10 +844,12 @@ export class DeesStatsGrid extends DeesElement {
   private renderTile(tile: IStatsTile): TemplateResult {
     const hasActions = tile.actions && tile.actions.length > 0;
     const clickable = hasActions && tile.actions.length === 1;
+    const columnSpan = tile.columnSpan && tile.columnSpan > 1 ? tile.columnSpan : undefined;
 
     return html`
       <div
         class="stats-tile ${clickable ? 'clickable' : ''}"
+        style="${columnSpan ? `grid-column: span ${columnSpan}` : ''}"
         @click=${clickable ? () => this.handleTileAction(tile.actions![0], tile) : undefined}
         @contextmenu=${hasActions ? (e: MouseEvent) => this.showContextMenu(e, tile) : undefined}
       >
@@ -535,6 +893,15 @@ export class DeesStatsGrid extends DeesElement {
       case 'multiPercentage':
         return this.renderMultiPercentage(tile);
 
+      case 'cpuCores':
+        return this.renderCpuCores(tile);
+
+      case 'partition':
+        return this.renderPartition(tile);
+
+      case 'disk':
+        return this.renderDisk(tile);
+
       case 'text':
         return html`
           <div class="text-value" style="${tile.color ? `color: ${tile.color}` : ''}">
@@ -699,6 +1066,167 @@ export class DeesStatsGrid extends DeesElement {
     `;
   }
 
+  private renderCpuCores(tile: IStatsTile): TemplateResult {
+    if (!tile.coresData || tile.coresData.length === 0) {
+      return html`<div class="tile-value">${tile.value}</div>`;
+    }
+
+    const cores = tile.coresData;
+    const avgUsage = Math.round(cores.reduce((sum, core) => sum + core.usage, 0) / cores.length);
+
+    // Determine color class based on usage
+    const getColorClass = (usage: number): string => {
+      if (usage < 50) return 'low';
+      if (usage < 80) return 'medium';
+      return 'high';
+    };
+
+    // Calculate if bars should be centered (when they take up less than 66.6% of available width)
+    // Max bar width = cores * 24px + (cores - 1) * 3px gap
+    const maxBarsWidth = cores.length * 24 + (cores.length - 1) * 3;
+    // Estimate tile content width based on columnSpan and minTileWidth (subtract padding)
+    const columnSpan = tile.columnSpan || 1;
+    const estimatedTileWidth = (this.minTileWidth * columnSpan) + ((columnSpan - 1) * this.gap) - 32; // 32px for padding
+    const shouldCenter = maxBarsWidth < estimatedTileWidth * 0.666;
+
+    return html`
+      <div class="cpu-cores-wrapper">
+        <div class="cpu-cores-header">
+          <span class="cpu-cores-value">${avgUsage}</span>
+          <span class="cpu-cores-unit">%</span>
+          <span class="cpu-cores-label">${cores.length} cores</span>
+        </div>
+        <div class="cpu-cores-bars ${shouldCenter ? 'centered' : ''}">
+          ${cores.map(core => {
+            const usage = Math.min(100, Math.max(0, core.usage));
+            const colorClass = getColorClass(usage);
+            return html`
+              <div class="cpu-core-bar-container" title="Core ${core.label || core.id}: ${usage}%">
+                <div class="cpu-core-bar-wrapper">
+                  <div
+                    class="cpu-core-bar-fill ${colorClass}"
+                    style="height: ${usage}%"
+                  ></div>
+                </div>
+                ${cores.length <= 16 ? html`
+                  <span class="cpu-core-label">${core.label || core.id}</span>
+                ` : ''}
+              </div>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  private formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  }
+
+  private renderPartition(tile: IStatsTile): TemplateResult {
+    if (!tile.partitionData) {
+      return html`<div class="tile-value">${tile.value}</div>`;
+    }
+
+    const { used, total, filesystem, mountPoint } = tile.partitionData;
+    const percentage = Math.min(100, Math.max(0, (used / total) * 100));
+    const free = total - used;
+
+    // Determine color class based on usage
+    const getColorClass = (): string => {
+      if (percentage >= 90) return 'critical';
+      if (percentage >= 75) return 'warning';
+      return '';
+    };
+
+    return html`
+      <div class="partition-wrapper">
+        <div class="partition-header">
+          <span class="partition-percentage">${Math.round(percentage)}%</span>
+        </div>
+        <div class="partition-bar">
+          <div
+            class="partition-bar-fill ${getColorClass()}"
+            style="width: ${percentage}%"
+          ></div>
+        </div>
+        <div class="partition-stats">
+          <div class="partition-stat">
+            <span class="partition-stat-label">Used</span>
+            <span class="partition-stat-value">${this.formatBytes(used)}</span>
+          </div>
+          <div class="partition-stat">
+            <span class="partition-stat-label">Free</span>
+            <span class="partition-stat-value">${this.formatBytes(free)}</span>
+          </div>
+        </div>
+        <div class="partition-meta">
+          <span class="partition-filesystem">${filesystem}</span>
+          ${mountPoint ? html`<span class="partition-mountpoint">${mountPoint}</span>` : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderDisk(tile: IStatsTile): TemplateResult {
+    if (!tile.diskData) {
+      return html`<div class="tile-value">${tile.value}</div>`;
+    }
+
+    const { capacity, model, type, iops, health } = tile.diskData;
+
+    // Determine health color class (inverted - high is good)
+    const getHealthClass = (value: number): string => {
+      if (value >= 70) return 'good';
+      if (value >= 30) return 'warning';
+      return 'critical';
+    };
+
+    return html`
+      <div class="disk-wrapper">
+        <div class="disk-capacity">${this.formatBytes(capacity)}</div>
+        ${model || type ? html`
+          <div class="disk-model">
+            ${model ? html`<span>${model}</span>` : ''}
+            ${type ? html`<span class="disk-type-badge">${type}</span>` : ''}
+          </div>
+        ` : ''}
+        <div class="disk-metrics">
+          ${iops ? html`
+            <div class="disk-iops">
+              <div class="disk-iops-item">
+                <span class="disk-iops-label">Read</span>
+                <span class="disk-iops-value">${iops.read.toLocaleString()}</span>
+              </div>
+              <div class="disk-iops-item">
+                <span class="disk-iops-label">Write</span>
+                <span class="disk-iops-value">${iops.write.toLocaleString()}</span>
+              </div>
+            </div>
+          ` : ''}
+          ${health !== undefined ? html`
+            <div class="disk-health">
+              <div class="disk-health-header">
+                <span class="disk-health-label">Health</span>
+                <span class="disk-health-value">${health}%</span>
+              </div>
+              <div class="disk-health-bar">
+                <div
+                  class="disk-health-fill ${getHealthClass(health)}"
+                  style="width: ${health}%"
+                ></div>
+              </div>
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `;
+  }
+
   private async handleGridAction(action: plugins.tsclass.website.IMenuItem) {
     if (action.action) {
       await action.action();

ts_web/services/DeesServiceLibLoader.ts

@@ -25,6 +25,24 @@ export interface IXtermFitAddonBundle {
   FitAddon: typeof FitAddon;
 }
 
+/**
+ * Bundle type for xterm-addon-search
+ * SearchAddon is loaded from CDN, so we use a minimal interface
+ */
+export interface IXtermSearchAddonBundle {
+  SearchAddon: new () => IXtermSearchAddon;
+}
+
+/**
+ * Minimal interface for xterm SearchAddon
+ */
+export interface IXtermSearchAddon {
+  activate(terminal: Terminal): void;
+  dispose(): void;
+  findNext(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
+  findPrevious(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
+}
+
 /**
  * Bundle type for Tiptap editor and extensions
  */
@@ -56,6 +74,7 @@ export class DeesServiceLibLoader {
   // Cached library references
   private xtermLib: IXtermBundle | null = null;
   private xtermFitAddonLib: IXtermFitAddonBundle | null = null;
+  private xtermSearchAddonLib: IXtermSearchAddonBundle | null = null;
   private highlightJsLib: HLJSApi | null = null;
   private apexChartsLib: typeof ApexChartsType | null = null;
   private tiptapLib: ITiptapBundle | null = null;
@@ -63,6 +82,7 @@ export class DeesServiceLibLoader {
   // Loading promises to prevent duplicate concurrent loads
   private xtermLoadingPromise: Promise<IXtermBundle> | null = null;
   private xtermFitAddonLoadingPromise: Promise<IXtermFitAddonBundle> | null = null;
+  private xtermSearchAddonLoadingPromise: Promise<IXtermSearchAddonBundle> | null = null;
   private highlightJsLoadingPromise: Promise<HLJSApi> | null = null;
   private apexChartsLoadingPromise: Promise<typeof ApexChartsType> | null = null;
   private tiptapLoadingPromise: Promise<ITiptapBundle> | null = null;
@@ -134,6 +154,32 @@ export class DeesServiceLibLoader {
     return this.xtermFitAddonLoadingPromise;
   }
 
+  /**
+   * Load xterm-addon-search from CDN
+   * @returns Promise resolving to SearchAddon class
+   */
+  public async loadXtermSearchAddon(): Promise<IXtermSearchAddonBundle> {
+    if (this.xtermSearchAddonLib) {
+      return this.xtermSearchAddonLib;
+    }
+
+    if (this.xtermSearchAddonLoadingPromise) {
+      return this.xtermSearchAddonLoadingPromise;
+    }
+
+    this.xtermSearchAddonLoadingPromise = (async () => {
+      const url = `${CDN_BASE}/xterm-addon-search@${CDN_VERSIONS.xtermAddonSearch}/+esm`;
+      const module = await import(/* @vite-ignore */ url);
+
+      this.xtermSearchAddonLib = {
+        SearchAddon: module.SearchAddon,
+      };
+      return this.xtermSearchAddonLib;
+    })();
+
+    return this.xtermSearchAddonLoadingPromise;
+  }
+
   /**
    * Inject xterm CSS styles into the document head
    */
@@ -257,6 +303,7 @@ export class DeesServiceLibLoader {
     await Promise.all([
       this.loadXterm(),
       this.loadXtermFitAddon(),
+      this.loadXtermSearchAddon(),
       this.loadHighlightJs(),
       this.loadApexCharts(),
       this.loadTiptap(),
@@ -266,12 +313,14 @@ export class DeesServiceLibLoader {
   /**
    * Check if a specific library is already loaded
    */
-  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
+  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'xtermSearchAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
     switch (library) {
       case 'xterm':
         return this.xtermLib !== null;
       case 'xtermFitAddon':
         return this.xtermFitAddonLib !== null;
+      case 'xtermSearchAddon':
+        return this.xtermSearchAddonLib !== null;
       case 'highlightJs':
         return this.highlightJsLib !== null;
       case 'apexCharts':

ts_web/services/index.ts

@@ -1,3 +1,3 @@
 export { DeesServiceLibLoader } from './DeesServiceLibLoader.js';
-export type { IXtermBundle, IXtermFitAddonBundle, ITiptapBundle } from './DeesServiceLibLoader.js';
+export type { IXtermBundle, IXtermFitAddonBundle, IXtermSearchAddonBundle, IXtermSearchAddon, ITiptapBundle } from './DeesServiceLibLoader.js';
 export { CDN_BASE, CDN_VERSIONS } from './versions.js';

ts_web/services/versions.ts

@@ -5,6 +5,7 @@
 export const CDN_VERSIONS = {
   xterm: '5.3.0',
   xtermAddonFit: '0.8.0',
+  xtermAddonSearch: '0.13.0',
   highlightJs: '11.11.1',
   apexcharts: '5.3.6',
   tiptap: '2.23.0',