@vibe-forge/client 0.7.4 → 0.8.0

package/src/components/benchmark-view/BenchmarkCasePanel.tsx

@@ -4,8 +4,8 @@ import { Button, Divider, Empty, Progress, Tag, Typography } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import type { BenchmarkCase, BenchmarkResult, BenchmarkRunSummary } from '@vibe-forge/core'
 import { MarkdownContent } from '#~/components/MarkdownContent'
+import type { BenchmarkCase, BenchmarkResult, BenchmarkRunSummary } from '@vibe-forge/types'
 
 import { formatTimestamp, getResultStatusMeta } from './utils.js'
 
@@ -85,10 +85,10 @@ export function BenchmarkCasePanel({
         </div>
         {displayDescription
           ? (
-              <Typography.Paragraph type='secondary' className='benchmark-view__case-desc'>
-                {displayDescription}
-              </Typography.Paragraph>
-            )
+            <Typography.Paragraph type='secondary' className='benchmark-view__case-desc'>
+              {displayDescription}
+            </Typography.Paragraph>
+          )
           : null}
         <div className='benchmark-view__case-meta'>
           <span className='benchmark-view__meta-item'>
@@ -184,29 +184,29 @@ function RunStateSection({
       />
       {activeRunId === ''
         ? (
-            <Typography.Text type='secondary' className='benchmark-view__hint'>
-              {t('benchmark.noActiveRun')}
-            </Typography.Text>
-          )
+          <Typography.Text type='secondary' className='benchmark-view__hint'>
+            {t('benchmark.noActiveRun')}
+          </Typography.Text>
+        )
         : (
-            <div className='benchmark-view__run-block'>
-              <div className='benchmark-view__run-metric'>
-                <label>{t('benchmark.progress')}</label>
-                <strong>{`${activeRun?.completedCount ?? 0}/${activeRun?.totalCount ?? '-'}`}</strong>
+          <div className='benchmark-view__run-block'>
+            <div className='benchmark-view__run-metric'>
+              <label>{t('benchmark.progress')}</label>
+              <strong>{`${activeRun?.completedCount ?? 0}/${activeRun?.totalCount ?? '-'}`}</strong>
+            </div>
+            <Progress percent={progressPercent} showInfo={false} />
+            <div className='benchmark-view__info-grid'>
+              <div className='benchmark-view__info-row'>
+                <label>{t('benchmark.runStatus')}</label>
+                <span>{activeRun?.status ?? '-'}</span>
               </div>
-              <Progress percent={progressPercent} showInfo={false} />
-              <div className='benchmark-view__info-grid'>
-                <div className='benchmark-view__info-row'>
-                  <label>{t('benchmark.runStatus')}</label>
-                  <span>{activeRun?.status ?? '-'}</span>
-                </div>
-                <div className='benchmark-view__info-row'>
-                  <label>{t('benchmark.lastMessage')}</label>
-                  <Typography.Text>{activeRun?.lastMessage ?? '-'}</Typography.Text>
-                </div>
+              <div className='benchmark-view__info-row'>
+                <label>{t('benchmark.lastMessage')}</label>
+                <Typography.Text>{activeRun?.lastMessage ?? '-'}</Typography.Text>
               </div>
             </div>
-          )}
+          </div>
+        )}
     </div>
   )
 }
@@ -227,83 +227,83 @@ function ResultSection({
       />
       {latestResult == null
         ? (
-            <Typography.Text type='secondary' className='benchmark-view__hint'>
-              {t('benchmark.noResult')}
-            </Typography.Text>
-          )
+          <Typography.Text type='secondary' className='benchmark-view__hint'>
+            {t('benchmark.noResult')}
+          </Typography.Text>
+        )
         : (
-            <div className='benchmark-view__result'>
-              <div className='benchmark-view__score-strip'>
-                <div className='benchmark-view__score-item'>
-                  <label>{t('benchmark.finalScore')}</label>
-                  <strong>{latestResult.finalScore}</strong>
-                </div>
-                <div className='benchmark-view__score-item'>
-                  <label>{t('benchmark.testScore')}</label>
-                  <strong>{latestResult.scores.testScore}</strong>
-                </div>
-                <div className='benchmark-view__score-item'>
-                  <label>{t('benchmark.goalScore')}</label>
-                  <strong>{latestResult.scores.goalScore}</strong>
-                </div>
-                <div className='benchmark-view__score-item'>
-                  <label>{t('benchmark.referenceScore')}</label>
-                  <strong>{latestResult.scores.referenceScore}</strong>
-                </div>
+          <div className='benchmark-view__result'>
+            <div className='benchmark-view__score-strip'>
+              <div className='benchmark-view__score-item'>
+                <label>{t('benchmark.finalScore')}</label>
+                <strong>{latestResult.finalScore}</strong>
               </div>
-              <div className='benchmark-view__info-grid'>
-                <div className='benchmark-view__info-row'>
-                  <label>
-                    <span className='material-symbols-rounded'>schedule</span>
-                    {t('benchmark.durationMs')}
-                  </label>
-                  <span>{latestResult.durationMs}</span>
-                </div>
-                <div className='benchmark-view__info-row'>
-                  <label>
-                    <span className='material-symbols-rounded'>monitoring</span>
-                    {t('benchmark.testExitCode')}
-                  </label>
-                  <span>{latestResult.testExitCode}</span>
-                </div>
+              <div className='benchmark-view__score-item'>
+                <label>{t('benchmark.testScore')}</label>
+                <strong>{latestResult.scores.testScore}</strong>
+              </div>
+              <div className='benchmark-view__score-item'>
+                <label>{t('benchmark.goalScore')}</label>
+                <strong>{latestResult.scores.goalScore}</strong>
+              </div>
+              <div className='benchmark-view__score-item'>
+                <label>{t('benchmark.referenceScore')}</label>
+                <strong>{latestResult.scores.referenceScore}</strong>
+              </div>
+            </div>
+            <div className='benchmark-view__info-grid'>
+              <div className='benchmark-view__info-row'>
+                <label>
+                  <span className='material-symbols-rounded'>schedule</span>
+                  {t('benchmark.durationMs')}
+                </label>
+                <span>{latestResult.durationMs}</span>
+              </div>
+              <div className='benchmark-view__info-row'>
+                <label>
+                  <span className='material-symbols-rounded'>monitoring</span>
+                  {t('benchmark.testExitCode')}
+                </label>
+                <span>{latestResult.testExitCode}</span>
               </div>
-              <Typography.Paragraph className='benchmark-view__judge-summary'>
-                {latestResult.judgeSummary}
-              </Typography.Paragraph>
-              <div className='benchmark-view__subgrid'>
-                <div className='benchmark-view__subpanel'>
-                  <div className='benchmark-view__subpanel-title'>
-                    <span className='material-symbols-rounded'>plagiarism</span>
-                    <span>{t('benchmark.changedFiles')}</span>
-                  </div>
-                  {latestResult.changedFiles != null && latestResult.changedFiles.length > 0
-                    ? (
-                        <div className='benchmark-view__file-list'>
-                          {latestResult.changedFiles.map(file => (
-                            <span key={file} className='benchmark-view__file-tag'>{file}</span>
-                          ))}
-                        </div>
-                      )
-                    : (
-                        <Typography.Text type='secondary'>{t('benchmark.noChangedFiles')}</Typography.Text>
-                      )}
+            </div>
+            <Typography.Paragraph className='benchmark-view__judge-summary'>
+              {latestResult.judgeSummary}
+            </Typography.Paragraph>
+            <div className='benchmark-view__subgrid'>
+              <div className='benchmark-view__subpanel'>
+                <div className='benchmark-view__subpanel-title'>
+                  <span className='material-symbols-rounded'>plagiarism</span>
+                  <span>{t('benchmark.changedFiles')}</span>
                 </div>
-                <div className='benchmark-view__subpanel'>
-                  <div className='benchmark-view__subpanel-title'>
-                    <span className='material-symbols-rounded'>report</span>
-                    <span>{t('benchmark.issues')}</span>
-                  </div>
-                  {latestResult.issues.length === 0
-                    ? <Typography.Text type='secondary'>{t('benchmark.noIssues')}</Typography.Text>
-                    : (
-                        <ul className='benchmark-view__issues-list'>
-                          {latestResult.issues.map(issue => <li key={issue}>{issue}</li>)}
-                        </ul>
-                      )}
+                {latestResult.changedFiles != null && latestResult.changedFiles.length > 0
+                  ? (
+                    <div className='benchmark-view__file-list'>
+                      {latestResult.changedFiles.map((file: string) => (
+                        <span key={file} className='benchmark-view__file-tag'>{file}</span>
+                      ))}
+                    </div>
+                  )
+                  : (
+                    <Typography.Text type='secondary'>{t('benchmark.noChangedFiles')}</Typography.Text>
+                  )}
+              </div>
+              <div className='benchmark-view__subpanel'>
+                <div className='benchmark-view__subpanel-title'>
+                  <span className='material-symbols-rounded'>report</span>
+                  <span>{t('benchmark.issues')}</span>
                 </div>
+                {latestResult.issues.length === 0
+                  ? <Typography.Text type='secondary'>{t('benchmark.noIssues')}</Typography.Text>
+                  : (
+                    <ul className='benchmark-view__issues-list'>
+                      {latestResult.issues.map((issue: string) => <li key={issue}>{issue}</li>)}
+                    </ul>
+                  )}
               </div>
             </div>
-          )}
+          </div>
+        )}
     </div>
   )
 }

package/src/components/benchmark-view/BenchmarkSidebar.scss

@@ -85,7 +85,7 @@
   &__switcher {
     font-size: 20px;
     display: block;
-    transition: transform 0.2s ease;
+    transition: transform .2s ease;
   }
 
   &__tree-shell .ant-tree-switcher_open &__switcher {
@@ -110,7 +110,7 @@
     padding: 5px 4px;
     border-radius: 6px;
     min-width: 0;
-    transition: background-color 0.15s;
+    transition: background-color .15s;
   }
 
   &__tree-category {
@@ -119,7 +119,8 @@
 
   &__tree-shell .ant-tree-node-content-wrapper:hover &__tree-category,
   &__tree-shell .ant-tree-node-content-wrapper:hover &__tree-case,
-  &__tree-shell .ant-tree-node-content-wrapper.ant-tree-node-selected &__tree-case {
+  &__tree-shell .ant-tree-node-content-wrapper.ant-tree-node-selected
+    &__tree-case {
     background: var(--sub-bg-color);
   }
 
@@ -145,7 +146,7 @@
   &__tree-run-btn {
     flex-shrink: 0;
     opacity: 0;
-    transition: opacity 0.15s;
+    transition: opacity .15s;
   }
 
   &__tree-run-btn--category {
@@ -153,7 +154,8 @@
   }
 
   &__tree-shell .ant-tree-node-content-wrapper:hover &__tree-run-btn,
-  &__tree-shell .ant-tree-node-content-wrapper.ant-tree-node-selected &__tree-run-btn {
+  &__tree-shell .ant-tree-node-content-wrapper.ant-tree-node-selected
+    &__tree-run-btn {
     opacity: 1;
   }
 
@@ -177,6 +179,6 @@
 
   &__status-icon--no-result {
     color: var(--sub-sub-text-color);
-    opacity: 0.5;
+    opacity: .5;
   }
 }

package/src/components/benchmark-view/BenchmarkSidebar.tsx

@@ -1,18 +1,29 @@
 import './BenchmarkSidebar.scss'
 
-import { Badge, Button, Divider, Empty, Input, Tooltip, Tree, Typography } from 'antd'
+import { Badge, Button, Empty, Input, Tooltip, Tree, Typography } from 'antd'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import type { BenchmarkCase, BenchmarkCategory } from '@vibe-forge/core'
+import type { BenchmarkCase, BenchmarkCategory, BenchmarkResult } from '@vibe-forge/types'
 
 import type { TreeNodeCase } from './types.js'
 import { getResultStatusMeta } from './utils.js'
 
-function ResultStatusIcon({ result }: { result: import('@vibe-forge/core').BenchmarkResult | null | undefined }) {
+interface BenchmarkTreeNode {
+  key: React.Key
+  title: React.ReactNode
+  selectable?: boolean
+  isLeaf?: boolean
+  children?: BenchmarkTreeNode[]
+  caseData?: TreeNodeCase
+}
+
+function ResultStatusIcon({ result }: { result: BenchmarkResult | null | undefined }) {
   const meta = getResultStatusMeta(result)
   return (
-    <span className={`material-symbols-rounded benchmark-view__status-icon benchmark-view__status-icon--${meta.statusKey}`}>
+    <span
+      className={`material-symbols-rounded benchmark-view__status-icon benchmark-view__status-icon--${meta.statusKey}`}
+    >
       {meta.icon}
     </span>
   )
@@ -31,7 +42,7 @@ function buildCaseTreeData(params: {
   const { categories, cases, query, t, onRunCase, onRunCategory } = params
   const keyword = query.trim().toLowerCase()
 
-  const categoriesOrder = categories.length > 0
+  const categoriesOrder: BenchmarkCategory[] = categories.length > 0
     ? categories
     : Array.from(new Set(cases.map(item => item.category))).map(category => ({
       category,
@@ -39,7 +50,7 @@ function buildCaseTreeData(params: {
       lastStatuses: { pass: 0, partial: 0, fail: 0 }
     }))
 
-  return categoriesOrder
+  const nodes = categoriesOrder
     .map((category) => {
       const categoryCases = cases.filter(item => item.category === category.category)
       const categoryMatches = keyword === '' || category.category.toLowerCase().includes(keyword)
@@ -60,7 +71,9 @@ function buildCaseTreeData(params: {
         selectable: true,
         title: (
           <div className='benchmark-view__tree-category'>
-            <span className='material-symbols-rounded benchmark-view__tree-icon benchmark-view__tree-icon--category'>folder_open</span>
+            <span className='material-symbols-rounded benchmark-view__tree-icon benchmark-view__tree-icon--category'>
+              folder_open
+            </span>
             <Typography.Text strong className='benchmark-view__tree-title'>
               {category.category}
             </Typography.Text>
@@ -108,7 +121,9 @@ function buildCaseTreeData(params: {
         })
       }
     })
-    .filter(Boolean)
+    .filter(node => node != null)
+
+  return nodes as BenchmarkTreeNode[]
 }
 
 // ─── Component ────────────────────────────────────────────────────────────────
@@ -148,7 +163,7 @@ export function BenchmarkSidebar({
 }: BenchmarkSidebarProps) {
   const { t } = useTranslation()
 
-  const treeData = useMemo(() =>
+  const treeData = useMemo<BenchmarkTreeNode[]>(() =>
     buildCaseTreeData({
       categories,
       cases,
@@ -156,9 +171,7 @@ export function BenchmarkSidebar({
       t,
       onRunCase,
       onRunCategory
-    }),
-    [cases, categories, query, t]
-  )
+    }), [cases, categories, query, t])
 
   const handleTreeCheck = (
     checked: React.Key[] | { checked: React.Key[]; halfChecked: React.Key[] }
@@ -237,25 +250,25 @@ export function BenchmarkSidebar({
       <div className='benchmark-view__tree-shell'>
         {treeData.length === 0
           ? (
-              <div className='benchmark-view__tree-empty'>
-                <Empty description={t('benchmark.emptyCases')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
-              </div>
-            )
+            <div className='benchmark-view__tree-empty'>
+              <Empty description={t('benchmark.emptyCases')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+            </div>
+          )
           : (
-              <Tree
-                blockNode
-                checkable
-                showIcon={false}
-                switcherIcon={<span className='material-symbols-rounded benchmark-view__switcher'>chevron_right</span>}
-                selectedKeys={selectedCase ? [`case:${selectedCase.category}/${selectedCase.title}`] : []}
-                expandedKeys={expandedKeys}
-                checkedKeys={checkedKeys}
-                treeData={treeData}
-                onExpand={(keys) => onExpandedKeysChange(keys.map(String))}
-                onSelect={handleTreeSelect}
-                onCheck={handleTreeCheck}
-              />
-            )}
+            <Tree
+              blockNode
+              checkable
+              showIcon={false}
+              switcherIcon={<span className='material-symbols-rounded benchmark-view__switcher'>chevron_right</span>}
+              selectedKeys={selectedCase ? [`case:${selectedCase.category}/${selectedCase.title}`] : []}
+              expandedKeys={expandedKeys}
+              checkedKeys={checkedKeys}
+              treeData={treeData}
+              onExpand={(keys) => onExpandedKeysChange(keys.map(String))}
+              onSelect={handleTreeSelect}
+              onCheck={handleTreeCheck}
+            />
+          )}
       </div>
     </div>
   )

package/src/components/benchmark-view/index.tsx

@@ -14,7 +14,7 @@ import {
   startBenchmarkRun
 } from '#~/api.js'
 import { useQueryParams } from '#~/hooks/useQueryParams.js'
-import type { BenchmarkCase } from '@vibe-forge/core'
+import type { BenchmarkCase } from '@vibe-forge/types'
 
 import { BenchmarkCasePanel } from './BenchmarkCasePanel.js'
 import { BenchmarkSidebar } from './BenchmarkSidebar.js'
@@ -109,7 +109,9 @@ export function BenchmarkView() {
     const casesToRun = cases.filter(item => caseKeys.includes(`case:${item.category}/${item.title}`))
     if (casesToRun.length === 0) {
       for (const item of cases) {
-        try { await startBenchmarkRun({ category: item.category, title: item.title }) } catch { /* continue */ }
+        try {
+          await startBenchmarkRun({ category: item.category, title: item.title })
+        } catch { /* continue */ }
       }
       void message.success(t('benchmark.runStarted'))
       return

package/src/components/benchmark-view/types.ts

@@ -1,10 +1,11 @@
-import type { BenchmarkCase } from '@vibe-forge/core'
+import type { BenchmarkCase, BenchmarkResult } from '@vibe-forge/types'
 
 export interface BenchmarkQueryParams extends Record<string, string> {
   category: string
   title: string
 }
 
-export interface TreeNodeCase extends BenchmarkCase {
+export interface TreeNodeCase extends Pick<BenchmarkCase, 'category' | 'title' | 'frontmatter'> {
   key: string
+  latestResult?: BenchmarkResult | null
 }

package/src/components/benchmark-view/utils.ts

@@ -1,4 +1,4 @@
-import type { BenchmarkResult, BenchmarkRunSummary } from '@vibe-forge/core'
+import type { BenchmarkResult, BenchmarkRunSummary } from '@vibe-forge/types'
 
 // ─── Formatting ───────────────────────────────────────────────────────────────
 
@@ -18,4 +18,3 @@ export const getResultStatusMeta = (result?: BenchmarkResult | null) => {
   if (result.status === 'partial') return { icon: 'rule', statusKey: 'partial' }
   return { icon: 'cancel', statusKey: 'fail' }
 }
-

package/src/components/chat/ChatHeader.tsx

@@ -1,6 +1,6 @@
 import './ChatHeader.scss'
 
-import type { SessionInfo } from '@vibe-forge/core'
+import type { SessionInfo } from '@vibe-forge/types'
 import { App, Button, Dropdown, Radio } from 'antd'
 import type { MenuProps } from 'antd'
 import { useAtomValue } from 'jotai'

package/src/components/chat/ChatHistoryView.tsx

@@ -4,11 +4,12 @@ import { useTranslation } from 'react-i18next'
 import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
 import { useChatScroll } from '#~/hooks/chat/use-chat-scroll'
 import { useChatSessionActions } from '#~/hooks/chat/use-chat-session-actions'
-import type { AskUserQuestionParams, ChatMessage, ChatMessageContent, Session, SessionInfo } from '@vibe-forge/core'
+import type { SessionInfo } from '@vibe-forge/types'
+import type { AskUserQuestionParams, ChatMessage, ChatMessageContent, Session } from '@vibe-forge/core'
 import { CurrentTodoList } from './CurrentTodoList'
+import { NewSessionGuide } from './NewSessionGuide'
 import { MessageItem } from './messages/MessageItem'
 import { processMessages } from './messages/message-utils'
-import { NewSessionGuide } from './NewSessionGuide'
 import { Sender } from './sender/Sender'
 import { ToolGroup } from './tools/core/ToolGroup'
 

package/src/components/chat/CurrentTodoList.tsx

@@ -1,8 +1,7 @@
 import './CurrentTodoList.scss'
+import type { ChatMessage, ChatMessageContent, ToolInputs } from '@vibe-forge/core'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import type { ChatMessage } from '@vibe-forge/core'
-import type { ToolInputs } from '@vibe-forge/core'
 
 type TodoItem = ToolInputs['adapter:claude-code:TodoWrite']['todos'][number]
 
@@ -16,7 +15,7 @@ export function CurrentTodoList({ messages }: { messages: ChatMessage[] }) {
   for (let i = messages.length - 1; i >= 0; i--) {
     const msg = messages[i]
     if (msg.role === 'assistant' && Array.isArray(msg.content)) {
-      const todoUse = msg.content.find(c =>
+      const todoUse = msg.content.find((c: ChatMessageContent) =>
         c != null && c.type === 'tool_use' && (
           c.name === 'TodoWrite' ||
           c.name === 'todo_write' ||

package/src/components/chat/messages/MessageItem.tsx

@@ -1,11 +1,11 @@
 import './MessageItem.scss'
-import type { ChatMessage } from '@vibe-forge/core'
-import React from 'react'
-import { MessageFooter } from './MessageFooter'
 import { MarkdownContent } from '#~/components/MarkdownContent'
+import type { ChatMessage, ChatMessageContent } from '@vibe-forge/core'
+import React from 'react'
 import { ToolRenderer } from '../tools/core/ToolRenderer'
+import { MessageFooter } from './MessageFooter'
 
-type MessageItemProps = {
+interface MessageItemProps {
   msg: ChatMessage
   isFirstInGroup: boolean
 }
@@ -27,12 +27,13 @@ function MessageItemComponent({
 
     if (!Array.isArray(msg.content)) return null
 
-    const hasContent = msg.content.some(c => c.type === 'text' || c.type === 'image') || msg.toolCall != null
+    const hasContent = msg.content.some((c: ChatMessageContent) => c.type === 'text' || c.type === 'image') ||
+      msg.toolCall != null
     if (!hasContent) return null
 
     return (
       <div className='message-contents'>
-        {msg.content.map((item, i) => {
+        {msg.content.map((item: ChatMessageContent, i: number) => {
           if (item.type === 'text') {
             return (
               <MarkdownContent key={i} content={item.text} />
@@ -87,14 +88,14 @@ function MessageItemComponent({
 }
 
 const areMessageItemPropsEqual = (prev: MessageItemProps, next: MessageItemProps) => {
-  return prev.isFirstInGroup === next.isFirstInGroup
-    && prev.msg.id === next.msg.id
-    && prev.msg.role === next.msg.role
-    && prev.msg.createdAt === next.msg.createdAt
-    && prev.msg.model === next.msg.model
-    && prev.msg.content === next.msg.content
-    && prev.msg.toolCall === next.msg.toolCall
-    && prev.msg.usage === next.msg.usage
+  return prev.isFirstInGroup === next.isFirstInGroup &&
+    prev.msg.id === next.msg.id &&
+    prev.msg.role === next.msg.role &&
+    prev.msg.createdAt === next.msg.createdAt &&
+    prev.msg.model === next.msg.model &&
+    prev.msg.content === next.msg.content &&
+    prev.msg.toolCall === next.msg.toolCall &&
+    prev.msg.usage === next.msg.usage
 }
 
 export const MessageItem = React.memo(MessageItemComponent, areMessageItemPropsEqual)

package/src/components/chat/messages/message-utils.ts

@@ -35,7 +35,7 @@ export function processMessages(messages: ChatMessage[]): ChatRenderItem[] {
       const msg = allMsgs[i]
       if (Array.isArray(msg.content)) {
         const found = msg.content.find(
-          c => c.type === 'tool_result' && c.tool_use_id === toolId
+          (c: ChatMessageContent) => c.type === 'tool_result' && c.tool_use_id === toolId
         )
         if (found) {
           return found as Extract<ChatMessageContent, { type: 'tool_result' }>

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

@@ -170,7 +170,11 @@
         min-height: 28px;
         font-size: 12px;
         color: var(--sub-text-color, #9ca3af);
-        background: linear-gradient(180deg, var(--bg-color), var(--tag-hover-bg, #f3f4f6));
+        background: linear-gradient(
+          180deg,
+          var(--bg-color),
+          var(--tag-hover-bg, #f3f4f6)
+        );
         border: 1px solid var(--border-color);
         padding: 0 6px 0 8px;
         border-radius: 10px;
@@ -438,8 +442,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 12px;
-    font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-      'Courier New', monospace;
+    font-family:
+      ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
     letter-spacing: .01em;
   }
 }