@vibe-forge/client 3.0.0-alpha.6 → 3.0.0-alpha.7

package/src/components/chat/ChatHeader.scss

@@ -1,865 +0,0 @@
-.chat-header {
-  padding: 8px 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: padding-left .3s cubic-bezier(.4, 0, .2, 1);
-
-  &.is-resizing {
-    transition: none !important;
-  }
-
-  &.is-collapsed {
-    padding-left: 72px;
-  }
-
-  &-info {
-    width: 100%;
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  &-main {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    flex: 1;
-    min-width: 0;
-  }
-
-  &-leading-actions {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex-shrink: 0;
-  }
-
-  &-title {
-    font-weight: 600;
-    color: var(--text-color);
-    cursor: default;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.chat-header.is-compact {
-  padding: 10px 12px 8px;
-  align-items: center;
-  gap: 8px;
-
-  .chat-header-main {
-    align-items: center;
-    gap: 8px;
-  }
-
-  .chat-header-leading-actions {
-    gap: 4px;
-  }
-
-  .chat-header-title {
-    line-height: 1.3;
-    white-space: nowrap;
-    display: block;
-  }
-
-  .chat-header-actions {
-    flex-shrink: 0;
-    margin-left: auto;
-    justify-content: flex-end;
-    flex-wrap: nowrap;
-  }
-
-  .chat-header-action-button.ant-btn.ant-btn-text {
-    width: 36px;
-    min-width: 36px;
-    height: 36px;
-    border-radius: 8px;
-
-    .chat-header-view-option.material-symbols-rounded {
-      font-size: 18px;
-    }
-  }
-}
-
-.chat-header-icon.material-symbols-rounded {
-  font-size: 18px;
-}
-
-.chat-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-}
-
-.chat-header-action-button.ant-btn.ant-btn-text {
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  border-radius: 6px;
-  color: var(--sub-text-color, #6b7280);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color .2s ease, color .2s ease;
-
-  .chat-header-view-option.material-symbols-rounded {
-    font-size: 14px;
-    line-height: 1;
-  }
-
-  &:hover {
-    background-color: var(--nav-hover-bg, #f3f4f6);
-    color: var(--text-color, #111827);
-  }
-
-  &.is-active {
-    background-color: var(--nav-active-bg, #eff6ff);
-    color: var(--nav-active-text, #2563eb);
-
-    .material-symbols-rounded {
-      font-variation-settings: 'FILL' 1;
-    }
-  }
-
-  &.is-debug-active {
-    background-color: #fff7e6;
-    color: #d97706;
-
-    .material-symbols-rounded {
-      font-variation-settings: 'FILL' 1;
-    }
-  }
-}
-
-.material-symbols-rounded.is-filled {
-  font-variation-settings: 'FILL' 1;
-}
-
-html.dark .chat-header-action-button.ant-btn.ant-btn-text {
-  --nav-hover-bg: #1a1a1a;
-  --nav-active-bg: #111b26;
-  --nav-active-text: #3b82f6;
-
-  &.is-debug-active {
-    background-color: #2d2516;
-    color: #fbbf24;
-  }
-}
-
-.session-settings-drawer {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  height: 100%;
-
-  &__form {
-    .config-view__card {
-      margin: 0;
-      padding: 0;
-      overflow: visible;
-    }
-  }
-
-  .settings-section {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    .section-header {
-      font-size: 12px;
-      font-weight: 700;
-      color: var(--sub-text-color);
-      text-transform: uppercase;
-      letter-spacing: .1em;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-
-      .material-symbols-rounded {
-        font-size: 16px;
-        color: var(--primary-color, #2563eb);
-      }
-    }
-
-    .settings-input {
-      background-color: var(--input-bg, #f8fafc);
-      border: 1px solid var(--border-color);
-      border-radius: 10px;
-      transition: all .2s;
-
-      &:hover, &:focus {
-        background-color: var(--bg-color);
-        border-color: var(--primary-color, #2563eb);
-        box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
-      }
-    }
-
-    .tag-input-container {
-      display: flex;
-      gap: 8px;
-
-      .add-tag-btn {
-        width: 40px;
-        height: 40px;
-        padding: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 10px;
-
-        .material-symbols-rounded {
-          font-size: 20px;
-        }
-      }
-    }
-
-    .tags-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-      padding: 12px;
-      background-color: var(--tag-list-bg, #f8fafc);
-      border-radius: 12px;
-      border: 1px solid var(--border-color);
-      min-height: 48px;
-
-      &.empty {
-        justify-content: center;
-        align-items: center;
-        border-style: dashed;
-        color: var(--sub-text-color);
-        font-style: italic;
-        font-size: 12px;
-      }
-
-      .settings-tag {
-        margin: 0;
-        padding: 4px 10px;
-        border-radius: 6px;
-        background-color: var(--tag-item-bg, #eff6ff);
-        color: var(--tag-item-text, #2563eb);
-        border: 1px solid transparent;
-        font-size: 12px;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        transition: all .2s;
-
-        &:hover {
-          background-color: var(--tag-item-hover-bg, #dbeafe);
-          border-color: var(--tag-item-text, #2563eb);
-        }
-
-        .ant-tag-close-icon {
-          font-size: 10px;
-          margin-left: 4px;
-          color: inherit;
-          &:hover {
-            color: #ef4444;
-          }
-        }
-      }
-    }
-  }
-
-  .settings-footer {
-    margin-top: auto;
-    padding-top: 24px;
-    border-top: 1px solid var(--border-color);
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-
-    .actions-section {
-      gap: 12px;
-
-      .actions-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 12px;
-
-        .action-card {
-          height: 44px;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: center;
-          gap: 8px;
-          border-radius: 10px;
-          background-color: var(--bg-color);
-          border: 1px solid var(--border-color);
-          transition: all .2s;
-          padding: 0 12px;
-
-          .material-symbols-rounded {
-            font-size: 20px;
-          }
-
-          span:not(.material-symbols-rounded) {
-            font-size: 13px;
-            font-weight: 500;
-          }
-
-          &:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
-          }
-
-          &.star-action {
-            &:hover {
-              border-color: #f59e0b;
-              background-color: #fffbeb;
-              color: #b45309;
-            }
-            &.active {
-              background-color: #fef3c7;
-              border-color: #f59e0b;
-              color: #b45309;
-              &:hover {
-                background-color: #fde68a;
-              }
-            }
-          }
-
-          &.archive-action {
-            &:hover {
-              border-color: var(--danger-color);
-              background-color: color-mix(
-                in srgb,
-                var(--danger-color) 12%,
-                transparent
-              );
-              color: var(--danger-color);
-            }
-            &.active {
-              background-color: color-mix(
-                in srgb,
-                var(--danger-color) 18%,
-                transparent
-              );
-              border-color: var(--danger-color);
-              color: var(--danger-color);
-              &:hover {
-                background-color: color-mix(
-                  in srgb,
-                  var(--danger-color) 24%,
-                  transparent
-                );
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .danger-zone {
-      .delete-session-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 16px;
-        padding: 16px;
-        border-radius: 12px;
-        border: 1px solid var(--border-color);
-        background-color: var(--sub-bg-color);
-      }
-
-      .delete-session-meta {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-      }
-
-      .delete-session-title {
-        font-size: 14px;
-        font-weight: 600;
-        color: var(--text-color);
-      }
-
-      .delete-session-desc {
-        font-size: 12px;
-        color: var(--sub-text-color);
-      }
-
-      .delete-session-btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        border-radius: 10px;
-      }
-    }
-  }
-}
-
-.session-runtime-section {
-  gap: 12px !important;
-}
-
-.session-info-note-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  &__title {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--sub-text-color);
-  }
-}
-
-.session-info-note {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 12px 14px;
-  border-radius: 12px;
-  border: 1px solid var(--border-color);
-  background: var(--sub-bg-color);
-  color: var(--text-color);
-  font-size: 12px;
-  line-height: 1.5;
-
-  .material-symbols-rounded {
-    margin-top: 1px;
-    font-size: 16px;
-    color: #d97706;
-    flex-shrink: 0;
-  }
-
-  code {
-    width: fit-content;
-    max-width: 100%;
-    padding: 2px 8px;
-    border-radius: 999px;
-    background: rgba(15, 23, 42, .06);
-    overflow-wrap: anywhere;
-  }
-}
-
-.session-info-note--warning {
-  background: linear-gradient(
-    180deg,
-    rgba(255, 251, 235, .92),
-    rgba(255, 255, 255, .98)
-  );
-  border-color: rgba(245, 158, 11, .2);
-}
-
-.session-info-note__content {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.session-tool-groups {
-  display: grid;
-  gap: 14px;
-}
-
-.session-tool-group-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 14px 14px 0;
-  border-radius: 14px;
-  border: 1px solid var(--border-color);
-  background: var(--bg-color);
-}
-
-.session-tool-group-card__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  padding: 0 0 12px;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-}
-
-.session-tool-group-card__title {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--text-color);
-  font-size: 13px;
-  font-weight: 600;
-
-  .material-symbols-rounded {
-    width: 28px;
-    height: 28px;
-    border-radius: 10px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(37, 99, 235, .12);
-    color: var(--primary-color, #2563eb);
-    font-size: 16px;
-  }
-}
-
-.session-tool-group-card__meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.session-tool-group-card__count {
-  padding: 2px 8px;
-  border-radius: 999px;
-  border: 1px solid var(--border-color);
-  background: var(--bg-color);
-  color: var(--sub-text-color);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.session-tool-group-card__expand {
-  font-size: 18px;
-  color: var(--sub-text-color);
-}
-
-.session-tool-group-card__list {
-  display: flex;
-  flex-direction: column;
-  max-height: 220px;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  margin: 0 -14px;
-  padding: 0 14px;
-  border-top: 1px solid var(--border-color);
-}
-
-.session-tool-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  height: 36px;
-
-  code {
-    min-width: 0;
-    font-size: 12px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &:not(:first-child) {
-    border-top: 1px solid var(--border-color);
-  }
-}
-
-.session-tool-row__dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  background: var(--primary-color, #2563eb);
-  flex-shrink: 0;
-}
-
-.session-settings-empty {
-  padding: 18px 16px;
-  border-radius: 12px;
-  border: 1px dashed var(--border-color);
-  background: var(--sub-bg-color);
-  color: var(--sub-text-color);
-  font-size: 12px;
-}
-
-.session-debug-section {
-  gap: 10px !important;
-}
-
-.session-debug-panel {
-  padding: 0 12px;
-  border-radius: 12px;
-  border: 1px solid var(--border-color);
-  background: var(--sub-bg-color);
-  overflow: hidden;
-}
-
-.session-debug-list {
-  display: flex;
-  flex-direction: column;
-  max-height: calc(36px * 5);
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-}
-
-.session-debug-row {
-  display: grid;
-  grid-template-columns: 84px minmax(0, 1fr);
-  gap: 12px;
-  align-items: center;
-  box-sizing: border-box;
-  height: 36px;
-  padding: 0;
-
-  &:not(:first-child) {
-    border-top: 1px solid var(--border-color);
-  }
-}
-
-.session-debug-row__label {
-  font-size: 12px;
-  color: var(--sub-text-color);
-  font-weight: 600;
-}
-
-.session-debug-row__value {
-  min-width: 0;
-  color: var(--text-color);
-  font-size: 12px;
-  line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.session-debug-row__value.is-mono {
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-}
-
-@media (max-width: 768px) {
-  .session-settings-drawer {
-    gap: 10px;
-
-    .settings-section {
-      gap: 10px;
-
-      .section-header {
-        font-size: 11px;
-        letter-spacing: .08em;
-      }
-    }
-
-    &__form {
-      .config-view__field-row {
-        gap: 10px;
-        padding: 10px 12px;
-      }
-
-      .config-view__field-meta {
-        gap: 8px;
-      }
-
-      .config-view__field-title,
-      .config-view__field-desc {
-        white-space: normal;
-      }
-
-      .config-view__field-control {
-        min-width: 0;
-        width: 100%;
-      }
-
-      .config-view__array-list {
-        gap: 6px;
-      }
-
-      .config-view__array-item {
-        align-items: flex-start;
-      }
-
-      .config-view__icon-button--compact {
-        width: 30px;
-        min-width: 30px;
-        height: 30px;
-      }
-
-      .config-view__icon-button--full {
-        width: 100%;
-        min-width: 100%;
-        height: 36px;
-        justify-content: flex-start;
-        gap: 6px;
-        padding: 0 12px;
-        border-radius: 8px;
-        border: 1px dashed var(--border-color) !important;
-        background: var(--sub-bg-color) !important;
-        color: var(--sub-text-color) !important;
-        align-self: stretch;
-
-        &::after {
-          content: attr(aria-label);
-          font-size: 12px;
-          font-weight: 500;
-        }
-      }
-    }
-  }
-
-  .session-tool-groups {
-    gap: 10px;
-  }
-
-  .session-tool-group-card {
-    padding: 12px 12px 0;
-    border-radius: 12px;
-  }
-
-  .session-tool-group-card__header {
-    align-items: flex-start;
-    padding-bottom: 10px;
-  }
-
-  .session-tool-group-card__title {
-    gap: 8px;
-    font-size: 12px;
-
-    .material-symbols-rounded {
-      width: 24px;
-      height: 24px;
-      border-radius: 8px;
-      font-size: 14px;
-    }
-  }
-
-  .session-tool-group-card__meta {
-    gap: 6px;
-  }
-
-  .session-tool-group-card__count {
-    padding: 1px 6px;
-    font-size: 11px;
-  }
-
-  .session-tool-group-card__list {
-    max-height: none;
-    margin: 0 -12px;
-    padding: 0 12px;
-  }
-
-  .session-tool-row {
-    height: 34px;
-  }
-
-  .session-debug-panel {
-    padding: 0 10px;
-  }
-
-  .session-debug-row {
-    grid-template-columns: 72px minmax(0, 1fr);
-    gap: 8px;
-    height: auto;
-    min-height: 34px;
-    padding: 6px 0;
-  }
-
-  .settings-footer {
-    gap: 16px;
-    padding-top: 16px;
-
-    .danger-zone {
-      .delete-session-row {
-        flex-direction: column;
-        align-items: stretch;
-        padding: 12px;
-      }
-    }
-  }
-}
-
-html.dark {
-  .session-settings-drawer {
-    .settings-footer {
-      .actions-section {
-        .actions-grid {
-          .action-card {
-            &.star-action {
-              &:hover {
-                background-color: #2d2516;
-                color: #fbbf24;
-              }
-              &.active {
-                background-color: #2d2516;
-                border-color: #fbbf24;
-                color: #fbbf24;
-                &:hover {
-                  background-color: #3d321d;
-                }
-              }
-            }
-
-            &.archive-action {
-              &:hover {
-                background-color: color-mix(
-                  in srgb,
-                  var(--danger-color) 22%,
-                  transparent
-                );
-                color: var(--danger-color);
-              }
-              &.active {
-                background-color: color-mix(
-                  in srgb,
-                  var(--danger-color) 26%,
-                  transparent
-                );
-                border-color: var(--danger-color);
-                color: var(--danger-color);
-                &:hover {
-                  background-color: color-mix(
-                    in srgb,
-                    var(--danger-color) 32%,
-                    transparent
-                  );
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .session-info-note code {
-    background: rgba(255, 255, 255, .08);
-  }
-
-  --sub-text-color: #8c8c8c;
-  --tag-bg: #1f1f1f;
-  --tag-hover-bg: #262626;
-  --border-color-hover: #434343;
-  --input-bg: #1f1f1f;
-  --input-focus-bg: #141414;
-  --tag-list-bg: #1f1f1f;
-  --tag-item-bg: #111b26;
-  --tag-item-text: #3b82f6;
-  --tag-item-hover-bg: #152535;
-}
-
-.session-info-badge {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-
-  .info-item {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    color: #6b7280;
-    background-color: #f3f4f6;
-    padding: 2px 8px;
-    border-radius: 4px;
-    white-space: nowrap;
-
-    .material-symbols-rounded {
-      font-size: 14px;
-    }
-  }
-}