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

package/src/components/chat/sender/Sender.scss

@@ -1,299 +0,0 @@
-.sender-container {
-  flex: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-width: 0;
-  justify-content: flex-end;
-  transition:
-    flex .4s cubic-bezier(.4, 0, .2, 1),
-    padding-bottom .4s cubic-bezier(.4, 0, .2, 1);
-}
-
-.chat-input-wrapper {
-  width: 100%;
-  margin: 0;
-  border-top: none;
-  position: relative;
-  background-color: var(--bg-color);
-}
-
-.chat-input-wrapper--inline-edit {
-  width: 100%;
-  margin: 0;
-}
-
-.chat-input-container {
-  --chat-input-container-padding: 12px;
-  --chat-input-header-toggle-size: 24px;
-  --chat-input-header-tab-height: 22px;
-  --chat-input-header-transition: .24s cubic-bezier(.4, 0, .2, 1);
-  --chat-input-header-toggle-offset-top: 6px;
-  --chat-input-session-header-max-height: 52px;
-  --chat-input-top-actions-max-height: 30px;
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--input-bg, #f9fafb);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: var(--chat-input-container-padding);
-  transition: all .2s;
-
-  &:focus-within {
-    background-color: var(--input-focus-bg, #f9fafb);
-    box-shadow: none;
-  }
-
-  .chat-input-monaco {
-    color: var(--text-color);
-  }
-}
-
-.chat-input-container--inline-edit {
-  width: 100%;
-}
-
-.chat-input-top-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 6px;
-  margin-bottom: 6px;
-  min-width: 0;
-}
-
-.chat-input-header-block {
-  visibility: visible;
-  transform-origin: top right;
-  transition:
-    max-height var(--chat-input-header-transition),
-    opacity .18s ease,
-    transform var(--chat-input-header-transition),
-    margin var(--chat-input-header-transition),
-    padding-top var(--chat-input-header-transition),
-    padding-bottom var(--chat-input-header-transition),
-    visibility 0s linear 0s;
-}
-
-.sender-session-target.chat-input-header-block,
-.chat-input-top-actions.chat-input-header-block {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.sender-session-target.chat-input-header-block {
-  max-height: var(--chat-input-session-header-max-height);
-  overflow: hidden;
-
-  &.is-collapsed {
-    max-height: 0;
-    margin: 0 -12px 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    opacity: 0;
-    transform: translateY(-8px);
-    pointer-events: none;
-    visibility: hidden;
-    transition:
-      max-height var(--chat-input-header-transition),
-      opacity .18s ease,
-      transform var(--chat-input-header-transition),
-      margin var(--chat-input-header-transition),
-      padding-top var(--chat-input-header-transition),
-      padding-bottom var(--chat-input-header-transition),
-      visibility 0s linear .24s;
-  }
-}
-
-.chat-input-top-actions.chat-input-header-block {
-  max-height: var(--chat-input-top-actions-max-height);
-  overflow: clip;
-
-  &.is-collapsed {
-    max-height: 0;
-    margin-bottom: 0;
-    opacity: 0;
-    transform: translateY(-8px);
-    pointer-events: none;
-    visibility: hidden;
-    transition:
-      max-height var(--chat-input-header-transition),
-      opacity .18s ease,
-      transform var(--chat-input-header-transition),
-      margin var(--chat-input-header-transition),
-      padding-top var(--chat-input-header-transition),
-      padding-bottom var(--chat-input-header-transition),
-      visibility 0s linear .24s;
-  }
-}
-
-.chat-input-header-actions {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 6px;
-  min-width: 0;
-  max-width: 100%;
-  min-height: var(--chat-input-header-toggle-size);
-  padding-inline-end: calc(var(--chat-input-header-toggle-size) + 6px);
-}
-
-.chat-input-header-toggle-shell {
-  --sender-permission-default-color: var(--primary-color);
-  --sender-permission-accept-edits-color: var(--success-color);
-  --sender-permission-plan-color: var(--warning-color);
-  --sender-permission-dont-ask-color: #ca8a04;
-  --sender-permission-bypass-color: var(--danger-color);
-
-  position: absolute;
-  top: 0;
-  right: 9px;
-  z-index: 2;
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 4px;
-  pointer-events: none;
-}
-
-.chat-input-header-toggle-tab {
-  width: var(--chat-input-header-toggle-size);
-  min-width: var(--chat-input-header-toggle-size);
-  height: var(--chat-input-header-toggle-size);
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  color: var(--sub-text-color);
-  cursor: pointer;
-  pointer-events: auto;
-  transform: translateY(var(--chat-input-header-toggle-offset-top));
-  transition:
-    background-color .2s ease,
-    border-color .2s ease,
-    color .2s ease,
-    border-radius var(--chat-input-header-transition),
-    height var(--chat-input-header-transition),
-    transform var(--chat-input-header-transition);
-
-  .material-symbols-rounded {
-    font-size: 16px;
-    line-height: 1;
-    transition: transform var(--chat-input-header-transition);
-  }
-
-  &:hover,
-  &:focus-visible {
-    color: var(--text-color);
-    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
-    border-color: color-mix(in srgb, var(--primary-color) 18%, transparent);
-  }
-
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.chat-input-header-toggle-mode-indicator {
-  min-width: var(--chat-input-header-tab-height);
-  height: var(--chat-input-header-tab-height);
-  padding: 0 5px;
-  border: 1px solid transparent;
-  border-bottom-color: transparent;
-  border-radius: 10px 10px 0 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: auto;
-  background: color-mix(
-    in srgb,
-    var(--sub-bg-color, #f3f4f6) 88%,
-    var(--input-bg, #f9fafb) 12%
-  );
-  color: var(--sub-text-color);
-  opacity: 0;
-  transform: translateY(calc(-100% + 1px)) translateX(6px);
-  transition:
-    opacity .18s ease,
-    transform var(--chat-input-header-transition),
-    border-color .2s ease,
-    background-color .2s ease;
-
-  .chat-input-header-toggle-mode-icon {
-    font-size: 14px;
-    line-height: 1;
-  }
-}
-
-.chat-input-header-toggle-shell.is-collapsed {
-  .chat-input-header-toggle-mode-indicator {
-    border-color: var(--border-color);
-    opacity: 1;
-    transform: translateY(calc(-100% + 1px)) translateX(0);
-  }
-
-  .chat-input-header-toggle-tab {
-    height: var(--chat-input-header-tab-height);
-    border-color: var(--border-color);
-    border-bottom-color: transparent;
-    border-radius: 10px 10px 0 0;
-    transform: translateY(calc(-100% + 1px));
-    background: color-mix(
-      in srgb,
-      var(--sub-bg-color, #f3f4f6) 88%,
-      var(--input-bg, #f9fafb) 12%
-    );
-  }
-
-  .chat-input-header-toggle-tab:hover,
-  .chat-input-header-toggle-tab:focus-visible {
-    background: color-mix(
-      in srgb,
-      var(--primary-color) 10%,
-      var(--input-bg, #f9fafb) 90%
-    );
-    border-color: color-mix(
-      in srgb,
-      var(--primary-color) 24%,
-      var(--border-color) 76%
-    );
-    border-bottom-color: transparent;
-  }
-
-  .chat-input-header-toggle-tab:active {
-    transform: translateY(calc(-100%));
-  }
-}
-
-html.dark {
-  .chat-input-container {
-    --input-bg: #1f1f1f;
-    --input-focus-bg: #141414;
-  }
-
-  .chat-input-header-toggle-shell {
-    --sender-permission-dont-ask-color: #facc15;
-  }
-}
-
-@media (max-width: 720px) {
-  .chat-input-container {
-    --chat-input-header-toggle-offset-top: 4px;
-  }
-
-  .chat-input-header-actions {
-    gap: 4px;
-    padding-inline-end: calc(var(--chat-input-header-toggle-size) + 4px);
-  }
-
-  .chat-input-header-toggle-shell {
-    right: 7px;
-  }
-
-  .chat-input-header-toggle-mode-indicator {
-    padding: 0 4px;
-  }
-}

package/src/components/chat/sender/Sender.tsx

@@ -1,55 +0,0 @@
-import './Sender.scss'
-
-import { useSenderController } from '#~/components/chat/sender/@hooks/use-sender-controller'
-
-import { SenderBody } from './@components/sender-body/SenderBody'
-import type { SenderProps } from './@types/sender-props'
-
-export function Sender(props: SenderProps) {
-  const controller = useSenderController(props)
-
-  return (
-    <div
-      className={[
-        'chat-input-wrapper',
-        controller.hideSender ? 'chat-input-wrapper--permission' : '',
-        controller.isInlineEdit ? 'chat-input-wrapper--inline-edit' : ''
-      ].filter(Boolean).join(' ')}
-    >
-      {!controller.hideSender && (
-        <SenderBody
-          isInlineEdit={controller.isInlineEdit}
-          isBusy={controller.isBusy}
-          modelUnavailable={controller.modelUnavailable}
-          pendingImages={controller.composer.pendingImages}
-          pendingFiles={controller.composer.pendingFiles}
-          onRemovePendingImage={(id) =>
-            controller.composer.setPendingImages(prev => prev.filter(image => image.id !== id))}
-          onRemovePendingFile={(path) =>
-            controller.composer.setPendingFiles(prev => prev.filter(file => file.path !== path))}
-          editorRef={controller.editorRef}
-          sessionId={props.sessionId}
-          sessionInfo={props.sessionInfo}
-          placeholder={controller.placeholder}
-          input={controller.composer.input}
-          onInputChange={controller.onInputChange}
-          onCursorChange={controller.onCursorChange}
-          onKeyDown={controller.handleKeyDown}
-          onPaste={controller.attachments.handlePaste}
-          secondarySendShortcut={controller.secondarySendShortcut}
-          onSecondarySendShortcut={controller.onSecondarySendShortcut}
-          resolveCompletionMatch={controller.completion.resolveCompletionMatch}
-          resolveTokenDecorations={controller.completion.resolveTokenDecorations}
-          toolbarState={controller.toolbar.toolbarState}
-          toolbarData={controller.toolbar.toolbarData}
-          toolbarRefs={controller.toolbar.toolbarRefs}
-          toolbarHandlers={controller.toolbar.toolbarHandlers}
-          sessionTarget={props.sessionTarget}
-          showContextPicker={controller.attachments.showContextPicker}
-          onCancelContextPicker={controller.onCancelContextPicker}
-          onConfirmContextPicker={controller.onConfirmContextPicker}
-        />
-      )}
-    </div>
-  )
-}

package/src/components/chat/session-metadata.ts

@@ -1,55 +0,0 @@
-import type { SessionInfo } from '@vibe-forge/types'
-
-export type SessionAssetDiagnostic = NonNullable<Extract<SessionInfo, { type: 'init' }>['assetDiagnostics']>[number]
-export type SessionSelectionWarning = NonNullable<Extract<SessionInfo, { type: 'init' }>['selectionWarnings']>[number]
-
-export interface SessionToolGroup {
-  key: 'chrome-devtools' | 'system'
-  labelKey: 'chat.toolGroupChromeDevtools' | 'chat.toolGroupSystem'
-  icon: string
-  tools: string[]
-}
-
-export const formatToolLabel = (tool: string) => {
-  const parts = tool.split('__')
-  return parts[parts.length - 1] || tool
-}
-
-export const getSessionToolGroups = (sessionInfo: SessionInfo | null): SessionToolGroup[] => {
-  if (sessionInfo == null || sessionInfo.type !== 'init') {
-    return []
-  }
-
-  return [
-    {
-      key: 'chrome-devtools',
-      labelKey: 'chat.toolGroupChromeDevtools',
-      icon: 'web_traffic',
-      tools: sessionInfo.tools.filter((tool: string) => tool.startsWith('mcp__ChromeDevtools__'))
-    },
-    {
-      key: 'system',
-      labelKey: 'chat.toolGroupSystem',
-      icon: 'memory',
-      tools: sessionInfo.tools.filter((tool: string) => !tool.startsWith('mcp__ChromeDevtools__'))
-    }
-  ].filter((group): group is SessionToolGroup => group.tools.length > 0)
-}
-
-export const getSessionAssetWarnings = (sessionInfo: SessionInfo | null): SessionAssetDiagnostic[] => {
-  if (sessionInfo == null || sessionInfo.type !== 'init') {
-    return []
-  }
-
-  return (sessionInfo.assetDiagnostics ?? []).filter((diagnostic: SessionAssetDiagnostic) =>
-    diagnostic.status === 'skipped'
-  )
-}
-
-export const getSessionSelectionWarnings = (sessionInfo: SessionInfo | null): SessionSelectionWarning[] => {
-  if (sessionInfo == null || sessionInfo.type !== 'init') {
-    return []
-  }
-
-  return sessionInfo.selectionWarnings ?? []
-}

package/src/components/chat/session-timeline-panel/EventList.scss

@@ -1,146 +0,0 @@
-.session-timeline-event-table {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-top: 12px;
-  height: 100%;
-  min-height: 0;
-}
-
-.session-timeline-event-table__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-width: 0;
-}
-
-.session-timeline-event-table__title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-color);
-  min-width: 0;
-}
-
-.session-timeline-event-table__search {
-  width: 240px;
-  max-width: 40%;
-}
-
-.session-timeline-event-table__table {
-  flex: 1 1 auto;
-  min-height: 0;
-  min-width: 0;
-}
-
-.session-timeline-event-table__table .ant-table {
-  height: 100%;
-}
-
-.session-timeline-event-table__table .ant-table-container {
-  height: 100%;
-}
-
-.session-timeline-event-table__table .ant-table-body {
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
-}
-
-.session-timeline-event-table__table .ant-table-pagination {
-  margin: 8px 0 0;
-}
-
-.session-timeline-event-table__time {
-  color: var(--secondary-text-color);
-  font-variant-numeric: tabular-nums;
-}
-
-.session-timeline-event-table__label {
-  display: inline-flex;
-  align-items: center;
-  color: var(--text-color);
-}
-
-.session-timeline-event-table__value {
-  color: var(--sub-text-color);
-  overflow-wrap: anywhere;
-}
-
-.session-timeline-event-table__summary {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-}
-
-.session-timeline-event-table__detail-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.session-timeline-event-table__detail-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  min-width: 0;
-}
-
-.session-timeline-event-table__detail-key {
-  flex: 0 0 auto;
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--sub-text-color);
-}
-
-.session-timeline-event-table__detail-text {
-  min-width: 0;
-  color: var(--sub-text-color);
-  font-size: 11px;
-  overflow-wrap: anywhere;
-}
-
-.session-timeline-event-table__cell-timing {
-  display: inline-flex;
-  justify-content: flex-end;
-  width: 100%;
-}
-
-@media (max-width: 960px) {
-  .session-timeline-event-table {
-    gap: 10px;
-    padding-top: 8px;
-  }
-
-  .session-timeline-event-table__header {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-  }
-
-  .session-timeline-event-table__search {
-    width: 100%;
-    max-width: none;
-  }
-
-  .session-timeline-event-table__table .ant-table-thead > tr > th,
-  .session-timeline-event-table__table .ant-table-tbody > tr > td {
-    padding: 8px;
-    font-size: 12px;
-  }
-
-  .session-timeline-event-table__table .ant-table-pagination {
-    row-gap: 6px;
-  }
-
-  .session-timeline-event-table__label {
-    line-height: 1.4;
-  }
-
-  .session-timeline-event-table__time {
-    font-size: 11px;
-    white-space: nowrap;
-  }
-}