@yuva-devlab/ui 2.0.0 → 2.1.0

package/dist/styles/components.css

@@ -278,40 +278,44 @@
     border-color: var(--border);
   }
 
-  .dl-status-badge {
+  .dl-badge-wrapper {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    flex-shrink: 0;
+  }
+
+  .dl-badge-count {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0%;
+    z-index: 10;
     display: inline-flex;
     align-items: center;
-    gap: 0.375rem;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 0.375rem;
     border-radius: 9999px;
-    padding: 0.25rem 0.625rem;
-    font-size: 0.75rem;
-    font-weight: 500;
+    background-color: var(--destructive);
+    color: var(--destructive-foreground);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    box-shadow: 0 0 0 2px var(--background);
   }
-  .dl-status-badge__dot {
+
+  .dl-badge-dot {
+    min-width: 0.5rem;
     width: 0.5rem;
     height: 0.5rem;
+    padding: 0;
     border-radius: 9999px;
-    flex-shrink: 0;
-  }
-  .dl-status-badge--success {
-    background-color: color-mix(in oklch, var(--success) 15%, transparent);
-    color: var(--success);
-  }
-  .dl-status-badge--destructive {
-    background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
-    color: var(--destructive);
-  }
-  .dl-status-badge--warning {
-    background-color: color-mix(in oklch, var(--warning) 15%, transparent);
-    color: var(--warning);
-  }
-  .dl-status-badge--info {
-    background-color: color-mix(in oklch, var(--info) 15%, transparent);
-    color: var(--info);
-  }
-  .dl-status-badge--muted {
-    background-color: var(--muted);
-    color: var(--muted-foreground);
+    background-color: var(--destructive);
+    box-shadow: 0 0 0 2px var(--background);
   }
 
   /* ── breadcrumb/breadcrumb.css ── */
@@ -886,6 +890,80 @@
     transform: translateX(-50%) rotate(90deg);
   }
 
+  /* ── chain-of-thought/chain-of-thought.css ── */
+  .dl-cot {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--secondary, var(--card));
+    font-size: 0.8125rem;
+    overflow: hidden;
+    transition: border-color 0.15s ease;
+  }
+
+  .dl-cot:hover {
+    border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
+  }
+
+  .dl-cot__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    font: inherit;
+    color: var(--foreground);
+  }
+
+  .dl-cot__summary {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 500;
+  }
+
+  .dl-cot__chevron {
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--muted-foreground);
+    transition: transform 0.2s ease;
+  }
+
+  .dl-cot[data-state="open"] .dl-cot__chevron {
+    transform: rotate(180deg);
+  }
+
+  .dl-cot__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem 0.75rem;
+    border-top: 1px solid var(--border);
+    background-color: var(--background);
+  }
+
+  .dl-cot__step {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+  }
+
+  .dl-cot__step--running {
+    color: var(--foreground);
+  }
+
+  .dl-cot__step--error {
+    color: var(--destructive);
+  }
+
   /* ── chart/chart.css ── */
   .dl-chart-container {
     display: flex;
@@ -1052,6 +1130,148 @@
     height: 0.75rem;
   }
 
+  /* ── checkpoint/checkpoint.css ── */
+  .dl-checkpoint {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 1.25rem 0;
+  }
+
+  .dl-checkpoint::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 1px;
+    background-color: var(--border);
+    z-index: 1;
+  }
+
+  .dl-checkpoint__content {
+    position: relative;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+  }
+
+  .dl-checkpoint__restore-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: transparent;
+    border: none;
+    font: inherit;
+    font-weight: 500;
+    font-size: 0.6875rem;
+    color: var(--primary);
+    cursor: pointer;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    transition: all 0.15s ease;
+  }
+
+  .dl-checkpoint__restore-btn:hover {
+    background-color: color-mix(in oklch, var(--primary) 10%, transparent);
+  }
+
+  /* ── code-block/code-block.css ── */
+  .dl-code-block {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--secondary, #0d1117);
+    color: var(--foreground);
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+    font-size: 0.8125rem;
+    overflow: hidden;
+  }
+
+  .dl-code-block__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.375rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+    background-color: var(--background);
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+  }
+
+  .dl-code-block__filename {
+    font-weight: 500;
+    color: var(--foreground);
+  }
+
+  .dl-code-block__language {
+    text-transform: uppercase;
+    font-size: 0.6875rem;
+    letter-spacing: 0.05em;
+    opacity: 0.8;
+  }
+
+  .dl-code-block__copy-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.625rem;
+    height: 1.625rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .dl-code-block__copy-btn:hover {
+    background-color: var(--accent);
+    color: var(--foreground);
+    border-color: var(--border);
+  }
+
+  .dl-code-block__content {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    overflow-x: auto;
+    line-height: 1.5;
+    tab-size: 2;
+  }
+
+  .dl-code-block__content--wrap {
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  .dl-code-block__line {
+    display: flex;
+    min-height: 1.25rem;
+  }
+
+  .dl-code-block__line-num {
+    display: inline-block;
+    width: 2rem;
+    padding-right: 0.75rem;
+    text-align: right;
+    color: var(--muted-foreground);
+    opacity: 0.5;
+    user-select: none;
+  }
+
   /* ── command/command.css ── */
   .dl-command {
     display: flex;
@@ -1179,40 +1399,199 @@
     color: var(--muted-foreground);
   }
 
-  /* ── context-menu/context-menu.css ── */
-  .dl-context-menu-content {
-    z-index: 50;
-    min-width: 8rem;
-    overflow: hidden;
+  /* ── confirmation/confirmation.css ── */
+  .dl-confirmation {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    width: 100%;
     border-radius: var(--radius-md, 0.375rem);
+    padding: 0.75rem 1rem;
     border: 1px solid var(--border);
-    background-color: var(--popover);
-    color: var(--popover-foreground);
-    padding: 0.25rem;
-    box-shadow: 0 4px 24px rgb(0 0 0 / 0.12);
+    background-color: var(--card, var(--background));
+    color: var(--card-foreground, var(--foreground));
+    font-size: 0.875rem;
   }
 
-  .dl-context-menu-content[data-state="open"] {
-    animation: dl-fade-in 100ms ease;
+  .dl-confirmation--sm {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
   }
 
-  .dl-context-menu-content[data-state="closed"] {
-    animation: dl-fade-out 100ms ease;
+  .dl-confirmation--destructive {
+    border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
+    background-color: color-mix(in oklch, var(--destructive) 5%, transparent);
   }
 
-  /* ── copy-button/copy-button.css ── */
-  .dl-copy-button {
+  .dl-confirmation__body {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .dl-confirmation__media {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.375rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    border-radius: var(--radius, 0.375rem);
-    border: 1px solid var(--border);
-    background: var(--card);
-    color: var(--foreground);
-    padding: 0.25rem 0.625rem;
+    width: 2rem;
+    height: 2rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    flex-shrink: 0;
+  }
+
+  .dl-confirmation--destructive .dl-confirmation__media {
+    background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
+    color: var(--destructive);
+  }
+
+  .dl-confirmation__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .dl-confirmation__title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+    color: var(--foreground);
+  }
+
+  .dl-confirmation__description {
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+    line-height: 1.35;
+  }
+
+  .dl-confirmation__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  /* ── context/context.css ── */
+  .dl-context-usage {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.75rem;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--card, var(--background));
+    font-size: 0.8125rem;
+  }
+
+  .dl-context-usage--sm {
+    padding: 0.5rem;
+    font-size: 0.75rem;
+  }
+
+  .dl-context-usage__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+
+  .dl-context-usage__title {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-weight: 600;
+    color: var(--foreground);
+  }
+
+  .dl-context-usage__fraction {
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+  }
+
+  .dl-context-usage__bar-bg {
+    position: relative;
+    width: 100%;
+    height: 0.375rem;
+    border-radius: 9999px;
+    background-color: var(--muted);
+    overflow: hidden;
+  }
+
+  .dl-context-usage__bar-fill {
+    height: 100%;
+    border-radius: 9999px;
+    transition: width 0.3s ease;
+    background-color: var(--primary);
+  }
+
+  .dl-context-usage__bar-fill--warning {
+    background-color: var(--warning);
+  }
+
+  .dl-context-usage__bar-fill--danger {
+    background-color: var(--destructive);
+  }
+
+  .dl-context-usage__breakdown {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    font-size: 0.6875rem;
+    color: var(--muted-foreground);
+    margin-top: 0.25rem;
+  }
+
+  .dl-context-usage__pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    background-color: var(--muted);
+  }
+
+  /* ── context-menu/context-menu.css ── */
+  .dl-context-menu-content {
+    z-index: 50;
+    min-width: 8rem;
+    overflow: hidden;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    padding: 0.25rem;
+    box-shadow: 0 4px 24px rgb(0 0 0 / 0.12);
+  }
+
+  .dl-context-menu-content[data-state="open"] {
+    animation: dl-fade-in 100ms ease;
+  }
+
+  .dl-context-menu-content[data-state="closed"] {
+    animation: dl-fade-out 100ms ease;
+  }
+
+  /* ── copy-button/copy-button.css ── */
+  .dl-copy-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: var(--radius, 0.375rem);
+    border: 1px solid var(--border);
+    background: var(--card);
+    color: var(--foreground);
+    padding: 0.25rem 0.625rem;
     cursor: pointer;
     transition: all 0.15s ease;
     user-select: none;
@@ -1236,6 +1615,79 @@
     flex-shrink: 0;
   }
 
+  /* ── data-table/data-table.css ── */
+  .dl-data-table-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--card, var(--background));
+    overflow: hidden;
+  }
+
+  .dl-data-table-wrapper {
+    overflow-x: auto;
+    width: 100%;
+  }
+
+  .dl-data-table-sort-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    background: transparent;
+    border: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    user-select: none;
+  }
+
+  .dl-data-table-sort-btn:hover {
+    color: var(--foreground);
+  }
+
+  .dl-data-table-sort-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--muted-foreground);
+    transition: color 0.15s ease;
+  }
+
+  .dl-data-table-sort-btn:hover .dl-data-table-sort-icon {
+    color: var(--foreground);
+  }
+
+  .dl-data-table-row--clickable {
+    cursor: pointer;
+  }
+
+  .dl-data-table-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+    border-top: 1px solid var(--border);
+    background-color: var(--background);
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+  }
+
+  .dl-data-table-summary {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .dl-data-table-empty {
+    padding: 3rem 1rem;
+    text-align: center;
+    color: var(--muted-foreground);
+  }
+
   /* ── date-picker/date-picker.css ── */
   .dl-date-picker-trigger {
     width: 100%;
@@ -1659,6 +2111,66 @@
     margin-top: var(--space-4, 1rem);
   }
 
+  /* ── file-tree/file-tree.css ── */
+  .dl-file-tree {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    font-size: 0.8125rem;
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+    user-select: none;
+    background-color: var(--card, var(--background));
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md, 0.375rem);
+    padding: 0.375rem;
+  }
+
+  .dl-file-tree__node {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    cursor: pointer;
+    color: var(--muted-foreground);
+    transition: all 0.12s ease;
+  }
+
+  .dl-file-tree__node:hover {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  .dl-file-tree__node--active {
+    background-color: var(--accent);
+    color: var(--foreground);
+    font-weight: 500;
+  }
+
+  .dl-file-tree__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  .dl-file-tree__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dl-file-tree__children {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    margin-left: 0.75rem;
+    padding-left: 0.5rem;
+    border-left: 1px solid var(--border);
+  }
+
   /* ── form/form.css ── */
   .dl-form-item {
     display: flex;
@@ -1794,16 +2306,113 @@
     -webkit-appearance: none;
   }
 
-  /* ── input-otp/input-otp.css ── */
-  .dl-input-otp-container {
-    display: flex;
+  /* ── input-number/input-number.css ── */
+  .dl-input-number {
+    position: relative;
+    display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
+    width: 100%;
+    max-width: 10rem;
+    height: var(--control-height-md, 2.25rem);
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--input, var(--border));
+    background-color: var(--background);
+    color: var(--foreground);
+    font-size: 0.875rem;
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
+    overflow: hidden;
   }
 
-  .dl-input-otp-container:has(:disabled) {
-    opacity: 0.5;
-  }
+  .dl-input-number:focus-within {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 1px var(--ring);
+  }
+
+  .dl-input-number--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--muted);
+  }
+
+  .dl-input-number__input {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    padding: 0 0.75rem;
+    background: transparent;
+    border: none;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    text-align: left;
+  }
+
+  .dl-input-number__input:focus {
+    outline: none;
+  }
+
+  .dl-input-number__controls {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 1.5rem;
+    border-left: 1px solid var(--border);
+    background-color: var(--secondary);
+  }
+
+  .dl-input-number__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50%;
+    width: 100%;
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--muted-foreground);
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+  }
+
+  .dl-input-number__btn:hover:not(:disabled) {
+    background-color: var(--accent);
+    color: var(--foreground);
+  }
+
+  .dl-input-number__btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+
+  .dl-input-number__btn--up {
+    border-bottom: 1px solid var(--border);
+  }
+
+  .dl-input-number__prefix,
+  .dl-input-number__suffix {
+    display: flex;
+    align-items: center;
+    padding: 0 0.5rem;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    user-select: none;
+  }
+
+  /* ── input-otp/input-otp.css ── */
+  .dl-input-otp-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .dl-input-otp-container:has(:disabled) {
+    opacity: 0.5;
+  }
 
   .dl-input-otp {
     cursor: default;
@@ -1866,6 +2475,86 @@
     animation: dl-pulse 1s infinite;
   }
 
+  /* ── kbd/kbd.css ── */
+  .dl-kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(
+      --font-mono,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      monospace
+    );
+    font-weight: 500;
+    user-select: none;
+    pointer-events: none;
+    white-space: nowrap;
+    vertical-align: baseline;
+    box-sizing: border-box;
+  }
+
+  /* ── Sizes ── */
+  .dl-kbd--sm {
+    min-width: 1.125rem;
+    height: 1.125rem;
+    padding: 0 0.25rem;
+    font-size: 0.625rem;
+    border-radius: var(--radius-sm, 0.25rem);
+  }
+
+  .dl-kbd--md {
+    min-width: 1.375rem;
+    height: 1.375rem;
+    padding: 0 0.375rem;
+    font-size: 0.6875rem;
+    border-radius: var(--radius-sm, 0.25rem);
+  }
+
+  .dl-kbd--lg {
+    min-width: 1.625rem;
+    height: 1.625rem;
+    padding: 0 0.5rem;
+    font-size: 0.75rem;
+    border-radius: var(--radius-md, 0.375rem);
+  }
+
+  /* ── Variants ── */
+  .dl-kbd--default {
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    border: 1px solid var(--border);
+    box-shadow: 0 1px 0 0 var(--border);
+  }
+
+  .dl-kbd--outline {
+    background-color: transparent;
+    color: var(--foreground);
+    border: 1px solid var(--border);
+  }
+
+  .dl-kbd--ghost {
+    background-color: transparent;
+    color: var(--muted-foreground);
+    border: none;
+  }
+
+  /* ── KbdGroup ── */
+  .dl-kbd-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .dl-kbd-separator {
+    color: var(--muted-foreground);
+    font-size: 0.6875rem;
+    user-select: none;
+  }
+
   /* ── label/label.css ── */
   .dl-label {
     font-size: 0.75rem;
@@ -1958,6 +2647,97 @@
     color: var(--accent-foreground);
   }
 
+  /* ── message/message.css ── */
+  .dl-message {
+    display: flex;
+    gap: 0.75rem;
+    width: 100%;
+    padding: 0.75rem 0;
+    color: var(--foreground);
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+
+  .dl-message--user {
+    flex-direction: row-reverse;
+  }
+
+  .dl-message__avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 9999px;
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    font-weight: 600;
+    font-size: 0.75rem;
+    flex-shrink: 0;
+    border: 1px solid var(--border);
+  }
+
+  .dl-message--assistant .dl-message__avatar {
+    background-color: color-mix(in oklch, var(--primary) 12%, transparent);
+    color: var(--primary);
+    border-color: color-mix(in oklch, var(--primary) 25%, transparent);
+  }
+
+  .dl-message__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    max-width: 80%;
+  }
+
+  .dl-message--user .dl-message__body {
+    align-items: flex-end;
+  }
+
+  .dl-message__content {
+    border-radius: var(--radius-lg, 0.5rem);
+    padding: 0.625rem 0.875rem;
+    background-color: var(--card, var(--background));
+    border: 1px solid var(--border);
+  }
+
+  .dl-message--user .dl-message__content {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--primary);
+  }
+
+  .dl-message__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    opacity: 0.8;
+    transition: opacity 0.15s ease;
+  }
+
+  .dl-message:hover .dl-message__actions {
+    opacity: 1;
+  }
+
+  .dl-message__action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    border: none;
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .dl-message__action-btn:hover {
+    background-color: var(--secondary);
+    color: var(--foreground);
+  }
+
   /* ── metric-card/metric-card.css ── */
   .dl-metrics-grid {
     display: grid;
@@ -2028,261 +2808,961 @@
     color: var(--destructive);
   }
 
-  /* ── navigation-menu/navigation-menu.css ── */
-  .dl-navigation-menu {
+  /* ── model-selector/model-selector.css ── */
+  .dl-model-selector {
     position: relative;
-    z-index: 10;
-    display: flex;
-    max-width: max-content;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .dl-navigation-menu-list {
-    display: flex;
-    flex: 1;
-    list-style: none;
-    align-items: center;
-    justify-content: center;
-    gap: 0.25rem;
-    margin: 0;
-    padding: 0;
+    display: inline-flex;
   }
 
-  .dl-navigation-menu-trigger {
+  .dl-model-selector__trigger {
     display: inline-flex;
-    height: var(--control-height-md, 2.25rem);
-    width: max-content;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.375rem 0.625rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
     border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
     background-color: var(--background);
-    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
-    font-size: 0.875rem;
-    font-weight: 500;
+    color: var(--foreground);
     cursor: pointer;
-    border: none;
-    color: inherit;
+    transition: all 0.15s ease;
+    user-select: none;
     font-family: inherit;
-    transition:
-      background-color 0.15s ease,
-      color 0.15s ease;
-    outline: none;
   }
 
-  .dl-navigation-menu-trigger:hover,
-  .dl-navigation-menu-trigger:focus,
-  .dl-navigation-menu-trigger[data-state="open"] {
+  .dl-model-selector__trigger:hover:not(:disabled) {
     background-color: var(--accent);
     color: var(--accent-foreground);
   }
 
-  .dl-navigation-menu-trigger:disabled {
-    pointer-events: none;
-    opacity: 0.5;
-    cursor: not-allowed;
+  .dl-model-selector__trigger:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
   }
 
-  .dl-navigation-menu-chevron {
-    position: relative;
-    top: 1px;
-    margin-left: 0.25rem;
-    width: 0.75rem;
-    height: 0.75rem;
-    transition: transform 0.2s ease;
+  .dl-model-selector__trigger:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
 
-  .dl-navigation-menu-trigger[data-state="open"] .dl-navigation-menu-chevron {
-    transform: rotate(180deg);
+  .dl-model-selector__trigger--sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
   }
 
-  .dl-navigation-menu-content {
+  .dl-model-selector__content {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 50;
+    min-width: 16rem;
+    max-width: 22rem;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--popover, var(--background));
+    color: var(--popover-foreground, var(--foreground));
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 0.375rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    max-height: 20rem;
+    overflow-y: auto;
+  }
+
+  .dl-model-selector__search {
+    padding: 0.375rem 0.5rem;
+    margin-bottom: 0.25rem;
+    font-size: 0.75rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    border: 1px solid var(--border);
+    background-color: var(--input);
+    color: var(--foreground);
+    outline: none;
+  }
+
+  .dl-model-selector__search:focus {
+    border-color: var(--ring);
+  }
+
+  .dl-model-selector__item {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    cursor: pointer;
+    transition: background-color 0.12s ease;
+    user-select: none;
+  }
+
+  .dl-model-selector__item:hover:not([data-disabled="true"]) {
+    background-color: var(--accent);
+  }
+
+  .dl-model-selector__item--active {
+    background-color: var(--accent);
+  }
+
+  .dl-model-selector__item-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .dl-model-selector__item-title {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-weight: 500;
+    font-size: 0.8125rem;
+  }
+
+  .dl-model-selector__item-desc {
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+    line-height: 1.3;
+  }
+
+  .dl-model-selector__item-tags {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-top: 0.25rem;
+    flex-wrap: wrap;
+  }
+
+  .dl-model-selector__tag {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.6875rem;
+    padding: 0.0625rem 0.375rem;
+    border-radius: 9999px;
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    font-weight: 500;
+  }
+
+  /* ── multi-select/multi-select.css ── */
+  .dl-multi-select-trigger {
+    display: flex;
+    width: 100%;
+    min-height: var(--control-height-md, 2.25rem);
+    height: auto;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--input, var(--border));
+    background-color: var(--background);
+    padding: 0.25rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: var(--foreground);
+    cursor: pointer;
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
+    gap: 0.5rem;
+  }
+
+  .dl-multi-select-trigger:focus-visible {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 1px var(--ring);
+  }
+
+  .dl-multi-select-trigger--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--muted);
+  }
+
+  .dl-multi-select-tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .dl-multi-select-placeholder {
+    color: var(--muted-foreground);
+    user-select: none;
+  }
+
+  .dl-multi-select-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    border-radius: var(--radius-sm, 0.25rem);
+    padding: 0.125rem 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1;
+    max-width: 100%;
+  }
+
+  .dl-multi-select-chip__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dl-multi-select-chip__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    color: var(--muted-foreground);
+    transition: color 0.15s ease;
+  }
+
+  .dl-multi-select-chip__remove:hover {
+    color: var(--foreground);
+  }
+
+  .dl-multi-select-content {
+    width: var(--radix-popover-trigger-width);
+    min-width: 14rem;
+    padding: 0.25rem;
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md, 0.375rem);
+    box-shadow: 0 4px 16px rgb(0 0 0 / 0.1);
+    z-index: 50;
+  }
+
+  .dl-multi-select-search {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.5rem 0.5rem;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .dl-multi-select-search-icon {
+    position: absolute;
+    left: 0.875rem;
+    top: 50%;
+    transform: translateY(-60%);
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--muted-foreground);
+    pointer-events: none;
+  }
+
+  .dl-multi-select-search-input {
+    width: 100%;
+    height: 1.875rem;
+    padding-left: 1.75rem;
+    padding-right: 0.5rem;
+    font-size: 0.8125rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    border: 1px solid var(--border);
+    background: var(--background);
+  }
+
+  .dl-multi-select-search-input:focus {
+    outline: none;
+    border-color: var(--ring);
+  }
+
+  .dl-multi-select-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.375rem 0.5rem;
+    border-bottom: 1px solid var(--border);
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+  }
+
+  .dl-multi-select-action-btn {
+    background: transparent;
+    border: none;
+    color: var(--primary);
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    padding: 0.125rem 0.25rem;
+    border-radius: var(--radius-sm, 0.25rem);
+  }
+
+  .dl-multi-select-action-btn:hover {
+    text-decoration: underline;
+  }
+
+  .dl-multi-select-list {
+    max-height: 14rem;
+    overflow-y: auto;
+    padding: 0.25rem 0;
+  }
+
+  .dl-multi-select-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    font-size: 0.8125rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.15s ease;
+  }
+
+  .dl-multi-select-item:hover:not(.dl-multi-select-item--disabled) {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  .dl-multi-select-item--selected {
+    font-weight: 500;
+  }
+
+  .dl-multi-select-item--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .dl-multi-select-checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 0.1875rem;
+    border: 1px solid var(--input, var(--border));
+    background-color: var(--background);
+    color: var(--primary-foreground);
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+  }
+
+  .dl-multi-select-item--selected .dl-multi-select-checkbox {
+    background-color: var(--primary);
+    border-color: var(--primary);
+  }
+
+  .dl-multi-select-empty {
+    padding: 1.25rem 0.5rem;
+    text-align: center;
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+  }
+
+  /* ── navigation-menu/navigation-menu.css ── */
+  .dl-navigation-menu {
+    position: relative;
+    z-index: 10;
+    display: flex;
+    max-width: max-content;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .dl-navigation-menu-list {
+    display: flex;
+    flex: 1;
+    list-style: none;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+  }
+
+  .dl-navigation-menu-trigger {
+    display: inline-flex;
+    height: var(--control-height-md, 2.25rem);
+    width: max-content;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md, 0.375rem);
+    background-color: var(--background);
+    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+    color: inherit;
+    font-family: inherit;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+    outline: none;
+  }
+
+  .dl-navigation-menu-trigger:hover,
+  .dl-navigation-menu-trigger:focus,
+  .dl-navigation-menu-trigger[data-state="open"] {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  .dl-navigation-menu-trigger:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .dl-navigation-menu-chevron {
+    position: relative;
+    top: 1px;
+    margin-left: 0.25rem;
+    width: 0.75rem;
+    height: 0.75rem;
+    transition: transform 0.2s ease;
+  }
+
+  .dl-navigation-menu-trigger[data-state="open"] .dl-navigation-menu-chevron {
+    transform: rotate(180deg);
+  }
+
+  .dl-navigation-menu-content {
     left: 0;
     top: 0;
     width: 100%;
   }
 
-  @media (min-width: 768px) {
-    .dl-navigation-menu-content {
-      position: absolute;
-      width: auto;
-    }
+  @media (min-width: 768px) {
+    .dl-navigation-menu-content {
+      position: absolute;
+      width: auto;
+    }
+  }
+
+  .dl-navigation-menu-viewport-wrapper {
+    position: absolute;
+    left: 0;
+    top: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .dl-navigation-menu-viewport {
+    position: relative;
+    margin-top: 0.375rem;
+    height: var(--radix-navigation-menu-viewport-height);
+    width: 100%;
+    overflow: hidden;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    box-shadow: 0 4px 20px rgb(0 0 0 / 0.12);
+    transform-origin: top center;
+  }
+
+  @media (min-width: 768px) {
+    .dl-navigation-menu-viewport {
+      width: var(--radix-navigation-menu-viewport-width);
+    }
+  }
+
+  .dl-navigation-menu-viewport[data-state="open"] {
+    animation: dl-zoom-in 150ms ease;
+  }
+
+  .dl-navigation-menu-viewport[data-state="closed"] {
+    animation: dl-zoom-out 150ms ease;
+  }
+
+  .dl-navigation-menu-indicator {
+    top: 100%;
+    z-index: 1;
+    display: flex;
+    height: 0.375rem;
+    align-items: flex-end;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .dl-navigation-menu-indicator__arrow {
+    position: relative;
+    top: 60%;
+    width: 0.5rem;
+    height: 0.5rem;
+    transform: rotate(45deg);
+    border-top-left-radius: 0.125rem;
+    background-color: var(--border);
+    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
+  }
+
+  /* ── pagination/pagination.css ── */
+  .dl-pagination {
+    margin-inline: auto;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .dl-pagination-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.25rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .dl-pagination-item {
+    display: inline-flex;
+  }
+
+  .dl-pagination-prev {
+    gap: 0.25rem;
+    padding-inline-start: 0.625rem;
+  }
+
+  .dl-pagination-next {
+    gap: 0.25rem;
+    padding-inline-end: 0.625rem;
+  }
+
+  .dl-pagination-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  .dl-pagination-ellipsis {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--control-height-md, 2.25rem);
+    height: var(--control-height-md, 2.25rem);
+  }
+
+  .dl-pagination-ellipsis svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  /* ── panel/panel.css ── */
+  .dl-panel {
+    border-radius: var(--radius-lg, 0.5rem);
+    border: 1px solid var(--border);
+    background-color: var(--card);
+    padding: 1rem;
+  }
+  .dl-panel__header {
+    margin-bottom: 0.75rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .dl-panel__title {
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin: 0;
+  }
+  .dl-panel__meta {
+    margin-left: auto;
+    font-family: monospace;
+    font-size: 0.625rem;
+    color: var(--muted-foreground);
+  }
+
+  /* ── password-input/password-input.css ── */
+  .dl-password-toggle-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    color: var(--muted-foreground);
+    transition: color 0.15s ease;
+  }
+
+  .dl-password-toggle-btn:hover {
+    color: var(--foreground);
+  }
+
+  .dl-password-toggle-btn:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm, 0.25rem);
+  }
+
+  /* ── plan/plan.css ── */
+  .dl-plan {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--card, var(--background));
+    overflow: hidden;
+  }
+
+  .dl-plan__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.625rem 0.875rem;
+    border-bottom: 1px solid var(--border);
+    background-color: var(--muted);
+    font-size: 0.8125rem;
+  }
+
+  .dl-plan__header-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    color: var(--foreground);
+  }
+
+  .dl-plan__header-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+  }
+
+  .dl-plan__tasks {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0;
+  }
+
+  .dl-plan__task {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0.875rem;
+    transition: background-color 0.12s ease;
+  }
+
+  .dl-plan__task:hover {
+    background-color: var(--accent);
+  }
+
+  .dl-plan__task-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.625rem;
+    cursor: pointer;
+    user-select: none;
   }
 
-  .dl-navigation-menu-viewport-wrapper {
-    position: absolute;
-    left: 0;
-    top: 100%;
+  .dl-plan__task-icon {
+    margin-top: 0.125rem;
     display: flex;
+    align-items: center;
     justify-content: center;
+    shrink: 0;
   }
 
-  .dl-navigation-menu-viewport {
-    position: relative;
-    margin-top: 0.375rem;
-    height: var(--radix-navigation-menu-viewport-height);
-    width: 100%;
-    overflow: hidden;
-    border-radius: var(--radius-md, 0.375rem);
-    border: 1px solid var(--border);
-    background-color: var(--popover);
-    color: var(--popover-foreground);
-    box-shadow: 0 4px 20px rgb(0 0 0 / 0.12);
-    transform-origin: top center;
+  .dl-plan__task-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
   }
 
-  @media (min-width: 768px) {
-    .dl-navigation-menu-viewport {
-      width: var(--radix-navigation-menu-viewport-width);
-    }
+  .dl-plan__task-title {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--foreground);
   }
 
-  .dl-navigation-menu-viewport[data-state="open"] {
-    animation: dl-zoom-in 150ms ease;
+  .dl-plan__task--completed .dl-plan__task-title {
+    color: var(--muted-foreground);
   }
 
-  .dl-navigation-menu-viewport[data-state="closed"] {
-    animation: dl-zoom-out 150ms ease;
+  .dl-plan__task-desc {
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+    margin-top: 0.125rem;
+    line-height: 1.4;
   }
 
-  .dl-navigation-menu-indicator {
-    top: 100%;
-    z-index: 1;
+  .dl-plan__task-details {
+    margin-top: 0.5rem;
+    padding-left: 1.5rem;
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+  }
+
+  .dl-plan__subtask-item {
     display: flex;
-    height: 0.375rem;
-    align-items: flex-end;
-    justify-content: center;
-    overflow: hidden;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.125rem 0;
   }
 
-  .dl-navigation-menu-indicator__arrow {
+  /* ── popover/popover.css ── */
+  .dl-popover {
+    z-index: 50;
+    width: 18rem;
+    border-radius: var(--radius, 0.5rem);
+    border: 1px solid var(--border);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    padding: var(--space-4, 1rem);
+    box-shadow: 0 4px 24px rgb(0 0 0/0.12);
+    outline: none;
+  }
+  .dl-popover[data-state="open"] {
+    animation: dl-fade-in 150ms ease;
+  }
+  .dl-popover[data-state="closed"] {
+    animation: dl-fade-out 150ms ease;
+  }
+
+  /* ── progress/progress.css ── */
+  .dl-progress {
     position: relative;
-    top: 60%;
-    width: 0.5rem;
     height: 0.5rem;
-    transform: rotate(45deg);
-    border-top-left-radius: 0.125rem;
-    background-color: var(--border);
-    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
+    width: 100%;
+    overflow: hidden;
+    border-radius: 9999px;
+    background-color: var(--secondary);
+  }
+  .dl-progress__indicator {
+    height: 100%;
+    width: 100%;
+    background-color: var(--primary);
+    transition: transform 0.3s ease;
+    transform-origin: left;
   }
 
-  /* ── pagination/pagination.css ── */
-  .dl-pagination {
-    margin-inline: auto;
+  /* ── prompt-input/prompt-input.css ── */
+  .dl-prompt-input {
     display: flex;
+    flex-direction: column;
     width: 100%;
-    justify-content: center;
+    border-radius: var(--radius-lg, 0.5rem);
+    border: 1px solid var(--border);
+    background-color: var(--card, var(--background));
+    box-shadow: 0 2px 8px rgb(0 0 0 / 0.05);
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
+    overflow: hidden;
   }
 
-  .dl-pagination-content {
+  .dl-prompt-input:focus-within {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 1px var(--ring);
+  }
+
+  .dl-prompt-input--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .dl-prompt-input__attachments {
     display: flex;
-    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem 0;
+  }
+
+  .dl-prompt-input__chip {
+    display: inline-flex;
     align-items: center;
-    gap: 0.25rem;
-    list-style: none;
-    margin: 0;
-    padding: 0;
+    gap: 0.375rem;
+    padding: 0.1875rem 0.5rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    font-size: 0.75rem;
+    border: 1px solid var(--border);
   }
 
-  .dl-pagination-item {
+  .dl-prompt-input__chip-name {
+    max-width: 10rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dl-prompt-input__chip-remove {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    color: var(--muted-foreground);
     display: inline-flex;
+    align-items: center;
   }
 
-  .dl-pagination-prev {
-    gap: 0.25rem;
-    padding-inline-start: 0.625rem;
+  .dl-prompt-input__chip-remove:hover {
+    color: var(--foreground);
   }
 
-  .dl-pagination-next {
-    gap: 0.25rem;
-    padding-inline-end: 0.625rem;
+  .dl-prompt-input__textarea {
+    width: 100%;
+    min-height: 3.5rem;
+    max-height: 14rem;
+    padding: 0.75rem 0.875rem;
+    border: none;
+    background: transparent;
+    color: var(--foreground);
+    font-family: inherit;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    resize: none;
+    outline: none;
+    box-sizing: border-box;
   }
 
-  .dl-pagination-icon {
-    width: 1rem;
-    height: 1rem;
-    flex-shrink: 0;
+  .dl-prompt-input__textarea::placeholder {
+    color: var(--muted-foreground);
   }
 
-  .dl-pagination-ellipsis {
+  .dl-prompt-input__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.375rem 0.75rem 0.625rem;
+    gap: 0.5rem;
+  }
+
+  .dl-prompt-input__left-actions,
+  .dl-prompt-input__right-actions {
     display: flex;
     align-items: center;
+    gap: 0.375rem;
+  }
+
+  .dl-prompt-input__btn {
+    display: inline-flex;
+    align-items: center;
     justify-content: center;
-    width: var(--control-height-md, 2.25rem);
-    height: var(--control-height-md, 2.25rem);
+    width: 1.875rem;
+    height: 1.875rem;
+    border-radius: 9999px;
+    border: 1px solid var(--border);
+    background-color: transparent;
+    color: var(--muted-foreground);
+    cursor: pointer;
+    transition: all 0.15s ease;
   }
 
-  .dl-pagination-ellipsis svg {
-    width: 1rem;
-    height: 1rem;
+  .dl-prompt-input__btn:hover:not(:disabled) {
+    background-color: var(--accent);
+    color: var(--foreground);
   }
 
-  /* ── panel/panel.css ── */
-  .dl-panel {
-    border-radius: var(--radius-lg, 0.5rem);
+  .dl-prompt-input__btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .dl-prompt-input__btn--send {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--primary);
+  }
+
+  .dl-prompt-input__btn--send:hover:not(:disabled) {
+    opacity: 0.9;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  .dl-prompt-input__btn--stop {
+    background-color: var(--destructive);
+    color: var(--destructive-foreground);
+    border-color: var(--destructive);
+  }
+
+  /* ── queue/queue.css ── */
+  .dl-queue {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: var(--radius-md, 0.375rem);
     border: 1px solid var(--border);
-    background-color: var(--card);
-    padding: 1rem;
+    background-color: var(--card, var(--background));
+    overflow: hidden;
+    font-size: 0.8125rem;
   }
-  .dl-panel__header {
-    margin-bottom: 0.75rem;
+
+  .dl-queue__header {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-  }
-  .dl-panel__title {
-    font-family: inherit;
-    font-size: 0.875rem;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    background-color: var(--muted);
+    border-bottom: 1px solid var(--border);
     font-weight: 600;
-    margin: 0;
+    color: var(--foreground);
   }
-  .dl-panel__meta {
-    margin-left: auto;
-    font-family: monospace;
-    font-size: 0.625rem;
-    color: var(--muted-foreground);
+
+  .dl-queue__list {
+    display: flex;
+    flex-direction: column;
+    divide-y: 1px solid var(--border);
   }
 
-  /* ── popover/popover.css ── */
-  .dl-popover {
-    z-index: 50;
-    width: 18rem;
-    border-radius: var(--radius, 0.5rem);
-    border: 1px solid var(--border);
-    background-color: var(--popover);
-    color: var(--popover-foreground);
-    padding: var(--space-4, 1rem);
-    box-shadow: 0 4px 24px rgb(0 0 0/0.12);
-    outline: none;
+  .dl-queue-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    gap: 0.5rem;
+    transition: background-color 0.12s ease;
   }
-  .dl-popover[data-state="open"] {
-    animation: dl-fade-in 150ms ease;
+
+  .dl-queue-item:hover {
+    background-color: var(--accent);
   }
-  .dl-popover[data-state="closed"] {
-    animation: dl-fade-out 150ms ease;
+
+  .dl-queue-item__info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
   }
 
-  .dl-popover.dl-date-picker-content {
-    width: auto;
-    padding: 0;
+  .dl-queue-item__index {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    background-color: var(--muted);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    color: var(--muted-foreground);
+    shrink: 0;
   }
 
-  /* ── progress/progress.css ── */
-  .dl-progress {
-    position: relative;
-    height: 0.5rem;
-    width: 100%;
+  .dl-queue-item__title {
     overflow: hidden;
-    border-radius: 9999px;
-    background-color: var(--secondary);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+    color: var(--foreground);
   }
-  .dl-progress__indicator {
-    height: 100%;
-    width: 100%;
-    background-color: var(--primary);
-    transition: transform 0.3s ease;
-    transform-origin: left;
+
+  .dl-queue-item__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    shrink: 0;
   }
 
   /* ── radio-group/radio-group.css ── */
@@ -2427,6 +3907,29 @@
     background-color: var(--border);
   }
 
+  /* ── search-input/search-input.css ── */
+  .dl-search-clear-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    color: var(--muted-foreground);
+    transition: color 0.15s ease;
+  }
+
+  .dl-search-clear-btn:hover {
+    color: var(--foreground);
+  }
+
+  .dl-search-clear-btn:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm, 0.25rem);
+  }
+
   /* ── searchable-select/searchable-select.css ── */
   .dl-searchable-select-trigger {
     width: 100%;
@@ -2701,7 +4204,7 @@
     max-height: 24rem;
     min-width: var(--radix-select-trigger-width, 8rem);
     width: var(--radix-select-trigger-width, max-content);
-    max-width: var(--radix-select-content-available-width, 100vw);
+    max-width: max-content;
     overflow: hidden;
     border-radius: var(--radius-md, 0.375rem);
     border: 1px solid var(--border);
@@ -3367,34 +4870,34 @@
   /* ── sonner/sonner.css ── */
   .dl-toaster {
     font-family: inherit;
-    --normal-bg: var(--card, var(--background));
-    --normal-text: var(--card-foreground, var(--foreground));
-    --normal-border: var(--border);
+    --normal-bg: var(--toast-bg, var(--card, var(--background)));
+    --normal-text: var(--toast-fg, var(--card-foreground, var(--foreground)));
+    --normal-border: var(--toast-border, var(--border));
   }
 
   [data-sonner-toaster][data-sonner-theme="dark"],
   .dark [data-sonner-toaster],
   [data-theme*="dark"] [data-sonner-toaster] {
-    --normal-bg: var(--card, var(--background));
-    --normal-text: var(--card-foreground, var(--foreground));
-    --normal-border: var(--border);
+    --normal-bg: var(--toast-bg, var(--card, var(--background)));
+    --normal-text: var(--toast-fg, var(--card-foreground, var(--foreground)));
+    --normal-border: var(--toast-border, var(--border));
   }
 
   [data-sonner-toaster][data-sonner-theme="light"],
   .light [data-sonner-toaster],
   [data-theme*="light"] [data-sonner-toaster] {
-    --normal-bg: var(--card, var(--background));
-    --normal-text: var(--card-foreground, var(--foreground));
-    --normal-border: var(--border);
+    --normal-bg: var(--toast-bg, var(--card, var(--background)));
+    --normal-text: var(--toast-fg, var(--card-foreground, var(--foreground)));
+    --normal-border: var(--toast-border, var(--border));
   }
 
   .dl-toaster .dl-toast,
   [data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
-    border-radius: var(--radius-md, 0.375rem);
-    border: 1px solid var(--border);
-    background-color: var(--card, var(--background));
-    color: var(--card-foreground, var(--foreground));
-    box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
+    border-radius: var(--toast-radius, var(--radius-md, 0.375rem));
+    border: 1px solid var(--toast-border, var(--border));
+    background-color: var(--toast-bg, var(--card, var(--background)));
+    color: var(--toast-fg, var(--card-foreground, var(--foreground)));
+    box-shadow: var(--toast-shadow, 0 8px 32px rgb(0 0 0 / 0.15));
   }
 
   .dl-toaster .dl-toast__desc,
@@ -3415,9 +4918,276 @@
   }
 
   [data-sonner-toaster] [data-sonner-toast] [data-close-button] {
+    background-color: var(--toast-bg, var(--card, var(--background)));
+    border-color: var(--toast-border, var(--border));
+    color: var(--toast-fg, var(--card-foreground, var(--foreground)));
+  }
+
+  /* ── FinAI Semantic Feedback (Text & Icon Colors, Subtle Borders via CSS Variables) ── */
+  [data-sonner-toaster] [data-sonner-toast][data-type="success"] {
+    border-color: color-mix(
+      in oklch,
+      var(--toast-success, var(--success)) 35%,
+      transparent
+    );
+  }
+
+  [data-sonner-toaster] [data-sonner-toast][data-type="success"] [data-icon] {
+    color: var(--toast-success, var(--success));
+  }
+
+  [data-sonner-toaster] [data-sonner-toast][data-type="error"],
+  [data-sonner-toaster] [data-sonner-toast][data-type="destructive"] {
+    border-color: color-mix(
+      in oklch,
+      var(--toast-destructive, var(--destructive)) 35%,
+      transparent
+    );
+  }
+
+  [data-sonner-toaster] [data-sonner-toast][data-type="error"] [data-icon],
+  [data-sonner-toaster]
+    [data-sonner-toast][data-type="destructive"]
+    [data-icon] {
+    color: var(--toast-destructive, var(--destructive));
+  }
+
+  [data-sonner-toaster] [data-sonner-toast][data-type="warning"] {
+    border-color: color-mix(
+      in oklch,
+      var(--toast-warning, var(--warning)) 35%,
+      transparent
+    );
+  }
+
+  [data-sonner-toaster] [data-sonner-toast][data-type="warning"] [data-icon] {
+    color: var(--toast-warning, var(--warning));
+  }
+
+  [data-sonner-toaster] [data-sonner-toast][data-type="info"] {
+    border-color: color-mix(
+      in oklch,
+      var(--toast-info, var(--info)) 35%,
+      transparent
+    );
+  }
+
+  [data-sonner-toaster] [data-sonner-toast][data-type="info"] [data-icon] {
+    color: var(--toast-info, var(--info));
+  }
+
+  /* ── sources/sources.css ── */
+  .dl-citation {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.125rem;
+    height: 1.125rem;
+    padding: 0 0.25rem;
+    margin: 0 0.125rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    line-height: 1;
+    border-radius: var(--radius-sm, 0.25rem);
+    background-color: var(--muted);
+    color: var(--primary);
+    border: 1px solid var(--border);
+    cursor: pointer;
+    vertical-align: baseline;
+    transition: all 0.12s ease;
+    text-decoration: none;
+  }
+
+  .dl-citation:hover {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+    border-color: var(--ring);
+  }
+
+  .dl-sources {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+    margin-top: 0.75rem;
+  }
+
+  .dl-sources__header {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--muted-foreground);
+  }
+
+  .dl-sources__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+    gap: 0.5rem;
+  }
+
+  .dl-source-card {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0.625rem;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
     background-color: var(--card, var(--background));
-    border-color: var(--border);
-    color: var(--card-foreground, var(--foreground));
+    text-decoration: none;
+    color: var(--foreground);
+    transition: all 0.15s ease;
+  }
+
+  .dl-source-card:hover {
+    border-color: var(--ring);
+    background-color: var(--accent);
+  }
+
+  .dl-source-card__meta {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.6875rem;
+    color: var(--muted-foreground);
+  }
+
+  .dl-source-card__index {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: 9999px;
+    background-color: var(--muted);
+    font-weight: 600;
+    font-size: 0.625rem;
+  }
+
+  .dl-source-card__domain {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dl-source-card__title {
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* ── stack-trace/stack-trace.css ── */
+  .dl-stack-trace {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--card, var(--background));
+    overflow: hidden;
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+    font-size: 0.8125rem;
+  }
+
+  .dl-stack-trace__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0.625rem 0.875rem;
+    background-color: color-mix(
+      in oklch,
+      var(--destructive) 10%,
+      var(--background)
+    );
+    border-bottom: 1px solid var(--border);
+    gap: 0.75rem;
+  }
+
+  .dl-stack-trace__title {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .dl-stack-trace__error-type {
+    font-weight: 700;
+    color: var(--destructive);
+    font-size: 0.875rem;
+  }
+
+  .dl-stack-trace__message {
+    color: var(--foreground);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    word-break: break-word;
+  }
+
+  .dl-stack-trace__frames {
+    display: flex;
+    flex-direction: column;
+    divide-y: 1px solid var(--border);
+    max-height: 22rem;
+    overflow-y: auto;
+  }
+
+  .dl-stack-frame {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0.875rem;
+    border-bottom: 1px solid var(--border);
+    transition: background-color 0.12s ease;
+  }
+
+  .dl-stack-frame:last-child {
+    border-bottom: none;
+  }
+
+  .dl-stack-frame:hover {
+    background-color: var(--accent);
+  }
+
+  .dl-stack-frame--internal {
+    opacity: 0.65;
+  }
+
+  .dl-stack-frame__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .dl-stack-frame__fn {
+    font-weight: 600;
+    color: var(--primary);
+  }
+
+  .dl-stack-frame__location {
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dl-stack-frame__snippet {
+    margin-top: 0.375rem;
+    padding: 0.375rem 0.5rem;
+    background-color: var(--muted);
+    border-radius: var(--radius-sm, 0.25rem);
+    font-size: 0.75rem;
+    line-height: 1.4;
+    white-space: pre-wrap;
+    color: var(--foreground);
   }
 
   /* ── status-badge/status-badge.css ── */
@@ -3521,6 +5291,132 @@
     color: var(--muted-foreground);
   }
 
+  /* ── subagent/subagent.css ── */
+  .dl-subagent {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--card, var(--background));
+    overflow: hidden;
+    font-size: 0.8125rem;
+  }
+
+  .dl-subagent__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    background-color: var(--muted);
+    border-bottom: 1px solid var(--border);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .dl-subagent__title-area {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .dl-subagent__avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 9999px;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    font-size: 0.6875rem;
+    font-weight: 700;
+  }
+
+  .dl-subagent__meta {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dl-subagent__name {
+    font-weight: 600;
+    color: var(--foreground);
+    line-height: 1.2;
+  }
+
+  .dl-subagent__role {
+    font-size: 0.6875rem;
+    color: var(--muted-foreground);
+  }
+
+  .dl-subagent__badges {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .dl-subagent__content {
+    padding: 0.75rem;
+    background-color: var(--background);
+    font-size: 0.75rem;
+    line-height: 1.5;
+    color: var(--foreground);
+  }
+
+  /* ── suggestion/suggestion.css ── */
+  .dl-suggestion-list {
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .dl-suggestion-list--wrap {
+    flex-wrap: wrap;
+  }
+
+  .dl-suggestion-list--scroll {
+    overflow-x: auto;
+    padding-bottom: 0.25rem;
+  }
+
+  .dl-suggestion {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    border-radius: 9999px;
+    border: 1px solid var(--border);
+    background-color: var(--secondary, var(--background));
+    color: var(--foreground);
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    text-align: left;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+  }
+
+  .dl-suggestion:hover {
+    background-color: var(--accent);
+    border-color: color-mix(in oklch, var(--primary) 30%, var(--border));
+  }
+
+  .dl-suggestion__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted-foreground);
+  }
+
+  .dl-suggestion:hover .dl-suggestion__icon {
+    color: var(--primary);
+  }
+
+  .dl-suggestion__description {
+    color: var(--muted-foreground);
+    font-weight: 400;
+  }
+
   /* ── switch/switch.css ── */
   .dl-switch {
     display: inline-flex;
@@ -3594,76 +5490,248 @@
     border-top: 1px solid var(--border);
     font-weight: 500;
   }
-  .dl-table__row {
-    border-bottom: 1px solid var(--border);
-    transition: background-color 0.1s;
+  .dl-table__row {
+    border-bottom: 1px solid var(--border);
+    transition: background-color 0.1s;
+  }
+  .dl-table__head-cell {
+    height: var(--control-height-md, 2.5rem);
+    padding: var(--table-row-padding-y, 0.5rem)
+      var(--table-row-padding-x, 0.75rem);
+    text-align: left;
+    font-weight: 500;
+    color: var(--muted-foreground);
+    white-space: nowrap;
+  }
+  .dl-table__cell {
+    padding: var(--table-row-padding-y, 0.75rem)
+      var(--table-row-padding-x, 0.75rem);
+    vertical-align: middle;
+  }
+  .dl-table__caption {
+    margin-top: 1rem;
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+  }
+
+  /* ── tabs/tabs.css ── */
+  .dl-tabs-list {
+    display: inline-flex;
+    height: var(--control-height-md, 2.25rem);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius, 0.5rem);
+    background-color: var(--muted);
+    padding: 0.25rem;
+    color: var(--muted-foreground);
+  }
+  .dl-tabs-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    border-radius: calc(var(--radius, 0.5rem) - 2px);
+    padding: 0.25rem 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    font-family: inherit;
+    transition: all 0.15s ease;
+    border: none;
+    background: transparent;
+    color: inherit;
+  }
+  .dl-tabs-trigger:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+  .dl-tabs-trigger:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .dl-tabs-trigger[data-state="active"] {
+    background-color: var(--background);
+    color: var(--foreground);
+    box-shadow: 0 1px 3px rgb(0 0 0/0.1);
+  }
+  .dl-tabs-content {
+    margin-top: 0.5rem;
+  }
+  .dl-tabs-content:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  /* ── terminal/terminal.css ── */
+  .dl-terminal {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--secondary, #0d1117);
+    color: var(--foreground);
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+    font-size: 0.8125rem;
+    overflow: hidden;
+  }
+
+  .dl-terminal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.375rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+    background-color: var(--background);
+    font-size: 0.75rem;
+  }
+
+  .dl-terminal__dots {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .dl-terminal__dot {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 9999px;
+    background-color: var(--muted-foreground);
+    opacity: 0.4;
+  }
+
+  .dl-terminal__title {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-weight: 500;
+    color: var(--muted-foreground);
+  }
+
+  .dl-terminal__output {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    overflow-y: auto;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-all;
+    color: var(--foreground);
+  }
+
+  .dl-terminal__prompt-line {
+    color: var(--primary);
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+  }
+
+  /* ── test-results/test-results.css ── */
+  .dl-test-results {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--card, var(--background));
+    overflow: hidden;
+    font-size: 0.8125rem;
+  }
+
+  .dl-test-results__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.625rem 0.875rem;
+    background-color: var(--muted);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .dl-test-results__summary {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .dl-test-results__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-weight: 600;
+    font-size: 0.75rem;
+  }
+
+  .dl-test-results__badge--passed {
+    color: var(--success);
   }
-  .dl-table__head-cell {
-    height: var(--control-height-md, 2.5rem);
-    padding: var(--table-row-padding-y, 0.5rem)
-      var(--table-row-padding-x, 0.75rem);
-    text-align: left;
-    font-weight: 500;
+
+  .dl-test-results__badge--failed {
+    color: var(--destructive);
+  }
+
+  .dl-test-results__badge--skipped {
     color: var(--muted-foreground);
-    white-space: nowrap;
   }
-  .dl-table__cell {
-    padding: var(--table-row-padding-y, 0.75rem)
-      var(--table-row-padding-x, 0.75rem);
-    vertical-align: middle;
+
+  .dl-test-results__list {
+    display: flex;
+    flex-direction: column;
+    divide-y: 1px solid var(--border);
+    max-height: 20rem;
+    overflow-y: auto;
   }
-  .dl-table__caption {
-    margin-top: 1rem;
-    font-size: 0.875rem;
-    color: var(--muted-foreground);
+
+  .dl-test-case {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0.875rem;
+    transition: background-color 0.12s ease;
   }
 
-  /* ── tabs/tabs.css ── */
-  .dl-tabs-list {
-    display: inline-flex;
-    height: var(--control-height-md, 2.25rem);
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius, 0.5rem);
-    background-color: var(--muted);
-    padding: 0.25rem;
-    color: var(--muted-foreground);
+  .dl-test-case:hover {
+    background-color: var(--accent);
   }
-  .dl-tabs-trigger {
-    display: inline-flex;
+
+  .dl-test-case__row {
+    display: flex;
     align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    border-radius: calc(var(--radius, 0.5rem) - 2px);
-    padding: 0.25rem 0.75rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    font-family: inherit;
-    transition: all 0.15s ease;
-    border: none;
-    background: transparent;
-    color: inherit;
-  }
-  .dl-tabs-trigger:focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
+    justify-content: space-between;
+    gap: 0.5rem;
   }
-  .dl-tabs-trigger:disabled {
-    pointer-events: none;
-    opacity: 0.5;
+
+  .dl-test-case__info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
   }
-  .dl-tabs-trigger[data-state="active"] {
-    background-color: var(--background);
+
+  .dl-test-case__name {
+    font-weight: 500;
     color: var(--foreground);
-    box-shadow: 0 1px 3px rgb(0 0 0/0.1);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-  .dl-tabs-content {
-    margin-top: 0.5rem;
+
+  .dl-test-case__duration {
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+    font-size: 0.6875rem;
+    color: var(--muted-foreground);
+    shrink: 0;
   }
-  .dl-tabs-content:focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
+
+  .dl-test-case__error {
+    margin-top: 0.375rem;
+    padding: 0.375rem 0.5rem;
+    background-color: color-mix(
+      in oklch,
+      var(--destructive) 10%,
+      var(--background)
+    );
+    border-radius: var(--radius-sm, 0.25rem);
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+    font-size: 0.75rem;
+    color: var(--destructive);
+    white-space: pre-wrap;
   }
 
   /* ── textarea/textarea.css ── */
@@ -3791,6 +5859,119 @@
     gap: 0.25rem;
   }
 
+  /* ── tool-call/tool-call.css ── */
+  .dl-tool-call {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    background-color: var(--card, var(--background));
+    font-size: 0.8125rem;
+    overflow: hidden;
+  }
+
+  .dl-tool-call__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    font: inherit;
+    color: var(--foreground);
+  }
+
+  .dl-tool-call__title-wrap {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .dl-tool-call__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--muted-foreground);
+  }
+
+  .dl-tool-call__name {
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+    font-weight: 600;
+    font-size: 0.75rem;
+  }
+
+  .dl-tool-call__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .dl-tool-call__status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--radius-sm, 0.25rem);
+  }
+
+  .dl-tool-call__status-badge--running {
+    background-color: color-mix(in oklch, var(--primary) 12%, transparent);
+    color: var(--primary);
+  }
+
+  .dl-tool-call__status-badge--success {
+    background-color: color-mix(in oklch, var(--success) 12%, transparent);
+    color: var(--success);
+  }
+
+  .dl-tool-call__status-badge--error {
+    background-color: color-mix(in oklch, var(--destructive) 12%, transparent);
+    color: var(--destructive);
+  }
+
+  .dl-tool-call__chevron {
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--muted-foreground);
+    transition: transform 0.2s ease;
+  }
+
+  .dl-tool-call[data-state="open"] .dl-tool-call__chevron {
+    transform: rotate(180deg);
+  }
+
+  .dl-tool-call__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem 0.75rem;
+    border-top: 1px solid var(--border);
+    background-color: var(--secondary, var(--background));
+  }
+
+  .dl-tool-call__args {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+    font-size: 0.6875rem;
+  }
+
+  .dl-tool-call__arg-pill {
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    background-color: var(--background);
+    border: 1px solid var(--border);
+  }
+
   /* ── tooltip/tooltip.css ── */
   .dl-tooltip {
     z-index: 50;
@@ -3810,6 +5991,108 @@
     animation: dl-fade-out 100ms ease;
   }
 
+  /* ── trace/trace.css ── */
+  .dl-trace {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    font-size: 0.8125rem;
+  }
+
+  .dl-trace-line {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.375rem 0;
+    color: var(--foreground);
+  }
+
+  .dl-trace-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    flex-shrink: 0;
+  }
+
+  .dl-trace-icon--running {
+    background-color: transparent;
+    color: var(--primary);
+    animation: dl-spin 1s linear infinite;
+  }
+
+  .dl-trace-icon--success {
+    background-color: color-mix(in oklch, var(--success) 15%, transparent);
+    color: var(--success);
+  }
+
+  .dl-trace-icon--error {
+    background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
+    color: var(--destructive);
+  }
+
+  .dl-trace-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    color: var(--foreground);
+  }
+
+  .dl-trace-content {
+    margin-left: 1.875rem;
+    padding: 0.25rem 0 0.5rem;
+    color: var(--muted-foreground);
+  }
+
+  .dl-trace-collapsible-trigger {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-align: left;
+    font: inherit;
+    color: inherit;
+  }
+
+  .dl-trace-collapsible-trigger:hover .dl-trace-title {
+    color: var(--primary);
+  }
+
+  /* ── Shimmer Animation Utility for AI Streaming ── */
+  @keyframes dl-shimmer-sweep {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
+  .dl-shimmer {
+    background: linear-gradient(
+      90deg,
+      var(--muted-foreground) 0%,
+      var(--foreground) 50%,
+      var(--muted-foreground) 100%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: dl-shimmer-sweep 2.2s infinite linear;
+  }
+
   /* ── typography/typography.css ── */
   /**
    * @file typography.css