fix(ui): standardize tile-based layouts across input, product card, and terminal preview components

ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts

@@ -11,6 +11,7 @@ import type { Terminal } from 'xterm';
 import type { FitAddon } from 'xterm-addon-fit';
 import { themeDefaultStyles } from '../../00theme.js';
 import { DeesServiceLibLoader } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -68,27 +69,19 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
         height: 200px;
       }
 
-      .terminal-preview {
+      dees-tile {
         height: 100%;
-        border-radius: 8px;
-        overflow: hidden;
-        background: ${cssManager.bdTheme('#ffffff', '#000000')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
-        display: flex;
-        flex-direction: column;
       }
 
       .terminal-header {
         display: flex;
         align-items: center;
         gap: 8px;
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 10%)')};
+        padding: 0 12px;
+        height: 32px;
         font-size: 12px;
         font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
         color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
-        flex-shrink: 0;
       }
 
       .terminal-header-icon {
@@ -262,15 +255,15 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="terminal-preview">
-        <div class="terminal-header">
+      <dees-tile>
+        <div slot="header" class="terminal-header">
           <span class="terminal-header-icon">$</span>
           <span class="terminal-header-command">${this.command || 'Waiting...'}</span>
         </div>
         <div class="terminal-container">
           <div id="xterm-container"></div>
         </div>
-      </div>
+      </dees-tile>
     `;
   }