@vibe-forge/client 0.8.4 → 0.10.0

package/src/components/chat/ChatHeader.scss

@@ -1,10 +1,8 @@
 .chat-header {
-  padding: 8px 24px;
+  padding: 8px 12px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: var(--sub-bg-color);
-  border-bottom: 1px solid var(--sub-border-color);
   transition: padding-left .3s cubic-bezier(.4, 0, .2, 1);
 
   &.is-resizing {
@@ -12,85 +10,107 @@
   }
 
   &.is-collapsed {
-    padding-left: 110px;
+    padding-left: 72px;
   }
 
   &-info {
     width: 100%;
+    flex: 1;
+    min-width: 0;
     display: flex;
     flex-direction: column;
+    gap: 4px;
   }
 
-  &-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--text-color);
-  }
-
-  &-subtitle {
+  &-main {
     display: flex;
     align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    color: var(--sub-text-color, #6b7280);
+    gap: 12px;
+    flex: 1;
+    min-width: 0;
   }
 
-  &-session-id {
-    font-size: 12px;
-    color: var(--sub-text-color, #9ca3af);
-    background-color: var(--tag-bg, #f9fafb);
-    padding: 2px 10px;
-    border-radius: 12px;
-    border: 1px solid var(--border-color);
-    cursor: pointer;
-    user-select: none;
-    transition: all .2s;
-    font-family:
-      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    flex-shrink: 0;
-
-    &:hover {
-      background-color: var(--tag-hover-bg, #f3f4f6);
-      color: var(--sub-text-color, #6b7280);
-      border-color: var(--border-color-hover, #e5e7eb);
-    }
+  &-title {
+    font-weight: 600;
+    color: var(--text-color);
+    cursor: default;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
+.chat-header-icon.material-symbols-rounded {
+  font-size: 18px;
+}
+
 .chat-header-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
 }
 
-.chat-header-view-group {
-  .ant-radio-button-wrapper .ant-radio-button-label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
+.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;
+    }
   }
-}
 
-.chat-header-view-option.material-symbols-rounded {
-  font-size: 16px;
+  &.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;
 }
 
-.chat-header-divider {
-  width: 1px;
-  height: 18px;
-  background-color: var(--sub-border-color);
-  opacity: .8;
+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: 32px;
+  gap: 12px;
   height: 100%;
 
   &__form {
@@ -332,6 +352,240 @@
   }
 }
 
+.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;
+}
+
 html.dark {
   .session-settings-drawer {
     .settings-footer {
@@ -384,6 +638,11 @@ html.dark {
       }
     }
   }
+
+  .session-info-note code {
+    background: rgba(255, 255, 255, .08);
+  }
+
   --sub-text-color: #8c8c8c;
   --tag-bg: #1f1f1f;
   --tag-hover-bg: #262626;