[codex] 修复 Coding Agents 的 Codex 启动和代理隔离 (#1123)
* feat: add coding agent install status * chore: add latest claude opus model preset * feat: add coding agent config editing * Add scoped coding agent launch proxy * Add Codex proxy plan * fix coding agents codex launch proxy * fix codex catalog context test --------- Co-authored-by: Codex <codex@openai.com>
This commit is contained in:
ekko
@@ -0,0 +1,133 @@
|
||||
import { request } from './client'
|
||||
|
||||
export type CodingAgentId = 'claude-code' | 'codex'
|
||||
export type CodingAgentApiMode = 'chat_completions' | 'codex_responses' | 'anthropic_messages'
|
||||
export type CodingAgentLaunchMode = 'scoped' | 'global'
|
||||
|
||||
export interface CodingAgentToolStatus {
|
||||
id: CodingAgentId
|
||||
name: string
|
||||
provider: string
|
||||
command: string
|
||||
packageName: string
|
||||
installed: boolean
|
||||
version: string
|
||||
rawVersion: string
|
||||
error?: string
|
||||
}
|
||||
|
||||
export interface CodingAgentsStatus {
|
||||
tools: CodingAgentToolStatus[]
|
||||
}
|
||||
|
||||
export interface CodingAgentMutationResult extends CodingAgentsStatus {
|
||||
success: boolean
|
||||
tool: CodingAgentToolStatus
|
||||
message?: string
|
||||
}
|
||||
|
||||
export interface CodingAgentConfigFileContent {
|
||||
key: string
|
||||
path: string
|
||||
absolutePath: string
|
||||
language: string
|
||||
content: string
|
||||
exists: boolean
|
||||
size: number
|
||||
profile: string
|
||||
provider: string
|
||||
rootDir: string
|
||||
}
|
||||
|
||||
export interface CodingAgentConfigScope {
|
||||
profile?: string | null
|
||||
provider?: string | null
|
||||
}
|
||||
|
||||
export interface CodingAgentLaunchRequest {
|
||||
mode?: CodingAgentLaunchMode
|
||||
profile?: string | null
|
||||
provider?: string
|
||||
model?: string
|
||||
baseUrl?: string
|
||||
apiKey?: string
|
||||
apiMode?: CodingAgentApiMode
|
||||
}
|
||||
|
||||
export interface CodingAgentLaunchResult {
|
||||
agentId: CodingAgentId
|
||||
mode: CodingAgentLaunchMode
|
||||
profile: string
|
||||
provider: string
|
||||
model: string
|
||||
rootDir: string
|
||||
workspaceDir: string
|
||||
command: string
|
||||
args: string[]
|
||||
env: Record<string, string>
|
||||
shellCommand: string
|
||||
files: Array<{ key: string; path: string; absolutePath: string }>
|
||||
}
|
||||
|
||||
export interface CodingAgentNativeLaunchResult extends CodingAgentLaunchResult {
|
||||
nativeTerminal: true
|
||||
terminal: string
|
||||
}
|
||||
|
||||
export async function fetchCodingAgentsStatus(): Promise<CodingAgentsStatus> {
|
||||
return request<CodingAgentsStatus>('/api/coding-agents')
|
||||
}
|
||||
|
||||
export async function installCodingAgent(id: CodingAgentId): Promise<CodingAgentMutationResult> {
|
||||
return request<CodingAgentMutationResult>(`/api/coding-agents/${id}/install`, { method: 'POST' })
|
||||
}
|
||||
|
||||
export async function deleteCodingAgent(id: CodingAgentId): Promise<CodingAgentMutationResult> {
|
||||
return request<CodingAgentMutationResult>(`/api/coding-agents/${id}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
export async function readCodingAgentConfigFile(
|
||||
id: CodingAgentId,
|
||||
key: string,
|
||||
scope: CodingAgentConfigScope = {},
|
||||
): Promise<CodingAgentConfigFileContent> {
|
||||
const params = new URLSearchParams()
|
||||
if (scope.profile) params.set('profile', scope.profile)
|
||||
if (scope.provider) params.set('provider', scope.provider)
|
||||
const query = params.toString()
|
||||
return request<CodingAgentConfigFileContent>(
|
||||
`/api/coding-agents/${id}/config-files/${encodeURIComponent(key)}${query ? `?${query}` : ''}`,
|
||||
)
|
||||
}
|
||||
|
||||
export async function writeCodingAgentConfigFile(
|
||||
id: CodingAgentId,
|
||||
key: string,
|
||||
content: string,
|
||||
scope: CodingAgentConfigScope = {},
|
||||
): Promise<CodingAgentConfigFileContent> {
|
||||
return request<CodingAgentConfigFileContent>(`/api/coding-agents/${id}/config-files/${encodeURIComponent(key)}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ content, profile: scope.profile, provider: scope.provider }),
|
||||
})
|
||||
}
|
||||
|
||||
export async function prepareCodingAgentLaunch(
|
||||
id: CodingAgentId,
|
||||
data: CodingAgentLaunchRequest,
|
||||
): Promise<CodingAgentLaunchResult> {
|
||||
return request<CodingAgentLaunchResult>(`/api/coding-agents/${id}/launch/prepare`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
}
|
||||
|
||||
export async function launchCodingAgentNativeTerminal(
|
||||
id: CodingAgentId,
|
||||
data: CodingAgentLaunchRequest,
|
||||
): Promise<CodingAgentNativeLaunchResult> {
|
||||
return request<CodingAgentNativeLaunchResult>(`/api/coding-agents/${id}/launch/native`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
}
|
||||
@@ -12,7 +12,7 @@ import type { ITheme } from "@xterm/xterm";
|
||||
const { t } = useI18n();
|
||||
const message = useMessage();
|
||||
|
||||
const props = defineProps<{ visible?: boolean }>();
|
||||
const props = defineProps<{ visible?: boolean; initialCommand?: string }>();
|
||||
|
||||
// ─── Terminal themes ────────────────────────────────────────────
|
||||
|
||||
@@ -106,6 +106,7 @@ const MAX_RECONNECT_ATTEMPTS = 3;
|
||||
let touchScrollLastY: number | null = null;
|
||||
let touchScrollRemainder = 0;
|
||||
const TOUCH_SCROLL_LINE_PX = 18;
|
||||
const initialCommandSent = ref(false);
|
||||
|
||||
// ─── Computed ──────────────────────────────────────────────────
|
||||
|
||||
@@ -224,6 +225,7 @@ function handleControl(msg: any) {
|
||||
exited: false,
|
||||
});
|
||||
switchSession(msg.id);
|
||||
runInitialCommand();
|
||||
break;
|
||||
|
||||
case "exited": {
|
||||
@@ -251,6 +253,15 @@ function createSession() {
|
||||
send({ type: "create" });
|
||||
}
|
||||
|
||||
function runInitialCommand() {
|
||||
const command = props.initialCommand?.trim();
|
||||
if (!command || initialCommandSent.value) return;
|
||||
initialCommandSent.value = true;
|
||||
setTimeout(() => {
|
||||
send(`${command}\r`);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function getOrCreateTerm(id: string): { term: Terminal; fitAddon: FitAddon } {
|
||||
let entry = termMap.get(id);
|
||||
if (!entry) {
|
||||
@@ -570,8 +581,11 @@ onUnmounted(() => {
|
||||
.terminal-panel-drawer {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
@@ -764,9 +778,11 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
flex-shrink: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header-session-title {
|
||||
@@ -783,6 +799,7 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
@@ -800,12 +817,15 @@ onUnmounted(() => {
|
||||
margin: 8px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.terminal-xterm {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
border-radius: $radius-md;
|
||||
overflow: hidden;
|
||||
border: 1px solid $border-color;
|
||||
@@ -842,19 +862,46 @@ onUnmounted(() => {
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
.terminal-panel-drawer {
|
||||
height: calc(100 * var(--vh));
|
||||
max-height: calc(100 * var(--vh));
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.terminal-main {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
padding: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.header-session-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
.terminal-container {
|
||||
margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
|
||||
margin: 6px;
|
||||
margin-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.terminal-xterm {
|
||||
border-radius: $radius-sm;
|
||||
|
||||
:deep(.xterm) {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
:deep(.xterm-viewport),
|
||||
:deep(.xterm-scrollable-element) {
|
||||
touch-action: pan-y;
|
||||
|
||||
@@ -263,6 +263,14 @@ function openChangelog() {
|
||||
</svg>
|
||||
</div>
|
||||
<div v-show="!isGroupCollapsed('tools')" class="nav-group-items">
|
||||
<RouteLinkItem class="nav-item" :to="{ name: 'hermes.codingAgents' }" :active="selectedKey === 'hermes.codingAgents'">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="16 18 22 12 16 6" />
|
||||
<polyline points="8 6 2 12 8 18" />
|
||||
<line x1="12" y1="20" x2="14" y2="4" />
|
||||
</svg>
|
||||
<span>{{ t("sidebar.codingAgents") }}</span>
|
||||
</RouteLinkItem>
|
||||
<RouteLinkItem v-if="isSuperAdmin && !isVersionPreview" class="nav-item" :to="{ name: 'hermes.versionPreview' }" :active="selectedKey === 'hermes.versionPreview'">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
|
||||
|
||||
@@ -138,6 +138,7 @@ export default {
|
||||
groupMonitoringShort: 'Mon',
|
||||
groupTools: 'Tools',
|
||||
groupToolsShort: "Tools",
|
||||
codingAgents: "Coding Agents",
|
||||
versionPreview: "Version Preview",
|
||||
settings: 'Settings',
|
||||
connected: 'Connected',
|
||||
@@ -1065,6 +1066,82 @@ export default {
|
||||
stopSuccess: "Preview stopped",
|
||||
},
|
||||
|
||||
codingAgents: {
|
||||
title: "Coding Agents",
|
||||
notice: "Unified setup checklist for coding CLIs that Hermes can delegate to through terminal or provider flows.",
|
||||
claudeDescription: "Anthropic CLI for one-shot print mode and interactive coding sessions.",
|
||||
codexDescription: "OpenAI CLI and Hermes openai-codex provider flow for repository tasks.",
|
||||
copyCommand: "Copy",
|
||||
commandCopied: "Command copied",
|
||||
commandCopyFailed: "Copy failed",
|
||||
refresh: "Refresh",
|
||||
checking: "Checking",
|
||||
installStatus: "Install status",
|
||||
installed: "Installed",
|
||||
notInstalled: "Not installed",
|
||||
installNow: "Install",
|
||||
installing: "Installing",
|
||||
installSuccess: "Installed",
|
||||
installFailed: "Install failed",
|
||||
deleteNow: "Delete",
|
||||
deleting: "Deleting",
|
||||
deleteSuccess: "Deleted",
|
||||
deleteFailed: "Delete failed",
|
||||
configFiles: "Config files",
|
||||
profileScope: "Profile",
|
||||
providerScope: "Provider",
|
||||
providerPlaceholder: "e.g. custom:glm",
|
||||
modelScope: "Model",
|
||||
modelPlaceholder: "Select model",
|
||||
launchModeScope: "Launch mode",
|
||||
launchModeGlobal: "Global config",
|
||||
launchModeScoped: "Provider and model",
|
||||
protocolScope: "Protocol",
|
||||
protocolOpenAiChat: "OpenAI Chat Completions (/v1/chat/completions)",
|
||||
protocolOpenAiResponses: "OpenAI Responses (/v1/responses)",
|
||||
protocolAnthropicMessages: "Anthropic Messages (/v1/messages)",
|
||||
reloadConfig: "Reload config",
|
||||
configFileNotCreated: "Not created",
|
||||
configLoadFailed: "Failed to read config file",
|
||||
loadFailed: "Failed to inspect coding agents",
|
||||
launch: "Launch",
|
||||
launchTitle: "Launch Coding Agent",
|
||||
nativeTerminal: "Native Terminal",
|
||||
builtInTerminal: "Built-in Terminal",
|
||||
launchPrepared: "Launch config prepared",
|
||||
launchPrepareFailed: "Failed to prepare launch config",
|
||||
nativeLaunchStarted: "Native terminal opened",
|
||||
nativeLaunchFailed: "Failed to open native terminal",
|
||||
terminalTitle: "Coding Agent Terminal",
|
||||
loadProvidersFailed: "Failed to load providers for the current profile",
|
||||
selectProviderModel: "Select a provider and model",
|
||||
launchConfigDir: "Launch config directory",
|
||||
launchCommand: "Launch command",
|
||||
table: {
|
||||
tool: "Tool",
|
||||
kind: "Step",
|
||||
command: "Command",
|
||||
note: "Note",
|
||||
action: "Action",
|
||||
},
|
||||
kinds: {
|
||||
install: "Install",
|
||||
auth: "Auth",
|
||||
health: "Health",
|
||||
run: "Run",
|
||||
},
|
||||
notes: {
|
||||
claudeInstall: "Installs the Claude Code CLI globally.",
|
||||
codexInstall: "Installs the Codex CLI globally.",
|
||||
claudeAuth: "Checks Claude Code login state; run claude once if login is missing.",
|
||||
codexAuth: "Adds Hermes-managed OpenAI Codex OAuth credentials.",
|
||||
claudeHealth: "Checks updater and local CLI health.",
|
||||
codexHealth: "Confirms the Codex CLI is available on PATH.",
|
||||
claudeRun: "Print mode is the cleanest path for API-driven one-shot tasks.",
|
||||
codexRun: "Codex one-shot tasks must run inside a git repository.",
|
||||
},
|
||||
},
|
||||
|
||||
// Platform channel settings
|
||||
platform: {
|
||||
requireMention: "Require {'@'}Mention",
|
||||
|
||||
@@ -138,6 +138,7 @@ export default {
|
||||
groupMonitoringShort: '监控',
|
||||
groupTools: '工具',
|
||||
groupToolsShort: "工具",
|
||||
codingAgents: "编程工具",
|
||||
versionPreview: "版本预览",
|
||||
settings: '设置',
|
||||
connected: '已连接',
|
||||
@@ -1057,6 +1058,82 @@ export default {
|
||||
stopSuccess: "预览已停止",
|
||||
},
|
||||
|
||||
codingAgents: {
|
||||
title: "编程工具",
|
||||
notice: "统一展示 Hermes 可通过终端或 provider 流程委托的编程 CLI 配置清单。",
|
||||
claudeDescription: "Anthropic CLI，适合 print mode 单次任务和交互式编程会话。",
|
||||
codexDescription: "OpenAI CLI，以及 Hermes openai-codex provider 的仓库任务流程。",
|
||||
copyCommand: "复制",
|
||||
commandCopied: "命令已复制",
|
||||
commandCopyFailed: "复制失败",
|
||||
refresh: "刷新",
|
||||
checking: "检测中",
|
||||
installStatus: "安装情况",
|
||||
installed: "已安装",
|
||||
notInstalled: "未安装",
|
||||
installNow: "一键安装",
|
||||
installing: "安装中",
|
||||
installSuccess: "安装完成",
|
||||
installFailed: "安装失败",
|
||||
deleteNow: "删除",
|
||||
deleting: "删除中",
|
||||
deleteSuccess: "删除完成",
|
||||
deleteFailed: "删除失败",
|
||||
configFiles: "配置文件",
|
||||
profileScope: "Profile",
|
||||
providerScope: "Provider",
|
||||
providerPlaceholder: "例如 custom:glm",
|
||||
modelScope: "模型",
|
||||
modelPlaceholder: "选择模型",
|
||||
launchModeScope: "启动方式",
|
||||
launchModeGlobal: "全局默认配置",
|
||||
launchModeScoped: "选择 Provider 和模型",
|
||||
protocolScope: "协议",
|
||||
protocolOpenAiChat: "OpenAI Chat Completions (/v1/chat/completions)",
|
||||
protocolOpenAiResponses: "OpenAI Responses (/v1/responses)",
|
||||
protocolAnthropicMessages: "Anthropic Messages (/v1/messages)",
|
||||
reloadConfig: "重新读取配置",
|
||||
configFileNotCreated: "未创建",
|
||||
configLoadFailed: "读取配置文件失败",
|
||||
loadFailed: "检测编程工具失败",
|
||||
launch: "启动",
|
||||
launchTitle: "启动编程工具",
|
||||
nativeTerminal: "原生终端",
|
||||
builtInTerminal: "内置终端",
|
||||
launchPrepared: "启动配置已生成",
|
||||
launchPrepareFailed: "生成启动配置失败",
|
||||
nativeLaunchStarted: "已打开原生终端",
|
||||
nativeLaunchFailed: "打开原生终端失败",
|
||||
terminalTitle: "编程工具终端",
|
||||
loadProvidersFailed: "读取当前 Profile 的 Provider 失败",
|
||||
selectProviderModel: "请选择 Provider 和模型",
|
||||
launchConfigDir: "启动配置目录",
|
||||
launchCommand: "启动命令",
|
||||
table: {
|
||||
tool: "工具",
|
||||
kind: "步骤",
|
||||
command: "命令",
|
||||
note: "说明",
|
||||
action: "操作",
|
||||
},
|
||||
kinds: {
|
||||
install: "安装",
|
||||
auth: "认证",
|
||||
health: "检查",
|
||||
run: "运行",
|
||||
},
|
||||
notes: {
|
||||
claudeInstall: "全局安装 Claude Code CLI。",
|
||||
codexInstall: "全局安装 Codex CLI。",
|
||||
claudeAuth: "检查 Claude Code 登录状态；未登录时先运行 claude。",
|
||||
codexAuth: "添加 Hermes 管理的 OpenAI Codex OAuth 凭证。",
|
||||
claudeHealth: "检查自动更新器和本地 CLI 健康状态。",
|
||||
codexHealth: "确认 Codex CLI 已在 PATH 中可用。",
|
||||
claudeRun: "Print mode 最适合 API 驱动的单次任务。",
|
||||
codexRun: "Codex 单次任务需要在 git 仓库中运行。",
|
||||
},
|
||||
},
|
||||
|
||||
// 平台频道设置
|
||||
platform: {
|
||||
requireMention: "需要 {'@'}提及",
|
||||
|
||||
@@ -117,6 +117,11 @@ const router = createRouter({
|
||||
name: 'hermes.files',
|
||||
component: () => import('@/views/hermes/FilesView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/hermes/coding-agents',
|
||||
name: 'hermes.codingAgents',
|
||||
component: () => import('@/views/hermes/CodingAgentsView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/hermes/version-preview',
|
||||
name: 'hermes.versionPreview',
|
||||
|
||||
@@ -0,0 +1,953 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { NAlert, NButton, NForm, NFormItem, NInput, NModal, NRadioButton, NRadioGroup, NSelect, NSpace, NSpin, NTag, useMessage } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {
|
||||
deleteCodingAgent,
|
||||
fetchCodingAgentsStatus,
|
||||
installCodingAgent,
|
||||
launchCodingAgentNativeTerminal,
|
||||
prepareCodingAgentLaunch,
|
||||
readCodingAgentConfigFile,
|
||||
writeCodingAgentConfigFile,
|
||||
type CodingAgentApiMode,
|
||||
type CodingAgentId,
|
||||
type CodingAgentLaunchMode,
|
||||
type CodingAgentLaunchResult,
|
||||
type CodingAgentToolStatus,
|
||||
} from '@/api/coding-agents'
|
||||
import { fetchAvailableModelsForProfile, type AvailableModelGroup } from '@/api/hermes/system'
|
||||
import { useProfilesStore } from '@/stores/hermes/profiles'
|
||||
import TerminalPanel from '@/components/hermes/chat/TerminalPanel.vue'
|
||||
|
||||
type CodingAgentBlock = {
|
||||
id: CodingAgentId
|
||||
tool: 'Claude Code' | 'Codex'
|
||||
provider: 'Anthropic' | 'OpenAI'
|
||||
}
|
||||
|
||||
type ConfigFileEntry = {
|
||||
key: string
|
||||
path: string
|
||||
language: string
|
||||
}
|
||||
|
||||
type ConfigEditorState = {
|
||||
selectedKey: string
|
||||
content: string
|
||||
originalContent: string
|
||||
loading: boolean
|
||||
saving: boolean
|
||||
absolutePath?: string
|
||||
exists?: boolean
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
const profilesStore = useProfilesStore()
|
||||
const loading = ref(false)
|
||||
const loadError = ref('')
|
||||
const tools = ref<CodingAgentToolStatus[]>([])
|
||||
const installing = ref<Record<CodingAgentId, boolean>>({
|
||||
'claude-code': false,
|
||||
codex: false,
|
||||
})
|
||||
const deleting = ref<Record<CodingAgentId, boolean>>({
|
||||
'claude-code': false,
|
||||
codex: false,
|
||||
})
|
||||
const launchModalVisible = ref(false)
|
||||
const launchLoading = ref(false)
|
||||
const launchPreparing = ref(false)
|
||||
const nativeLaunchPreparing = ref(false)
|
||||
const launchAgentId = ref<CodingAgentId>('claude-code')
|
||||
const launchProviders = ref<AvailableModelGroup[]>([])
|
||||
const launchMode = ref<CodingAgentLaunchMode>('scoped')
|
||||
const launchProvider = ref('')
|
||||
const launchModel = ref('')
|
||||
const launchApiMode = ref<CodingAgentApiMode>('codex_responses')
|
||||
const launchResult = ref<CodingAgentLaunchResult | null>(null)
|
||||
const terminalVisible = ref(false)
|
||||
const terminalCommand = ref('')
|
||||
const terminalKey = ref(0)
|
||||
|
||||
const agentLogos: Record<CodingAgentBlock['tool'], string> = {
|
||||
'Claude Code': '/coding-agents/claude-code.svg',
|
||||
Codex: '/coding-agents/codex-openai.png',
|
||||
}
|
||||
|
||||
const agentBlocks: CodingAgentBlock[] = [
|
||||
{
|
||||
id: 'claude-code',
|
||||
tool: 'Claude Code',
|
||||
provider: 'Anthropic',
|
||||
},
|
||||
{
|
||||
id: 'codex',
|
||||
tool: 'Codex',
|
||||
provider: 'OpenAI',
|
||||
},
|
||||
]
|
||||
|
||||
const configFiles: Record<CodingAgentId, ConfigFileEntry[]> = {
|
||||
'claude-code': [
|
||||
{ key: 'settings', path: '~/.claude/settings.json', language: 'json' },
|
||||
{ key: 'mcp', path: '~/.claude.json', language: 'json' },
|
||||
{ key: 'prompt', path: '~/.claude/CLAUDE.md', language: 'markdown' },
|
||||
],
|
||||
codex: [
|
||||
{ key: 'auth', path: '~/.codex/auth.json', language: 'json' },
|
||||
{ key: 'config', path: '~/.codex/config.toml', language: 'ini' },
|
||||
{ key: 'agents', path: '~/.codex/AGENTS.md', language: 'markdown' },
|
||||
],
|
||||
}
|
||||
|
||||
const configEditorStates = ref<Record<CodingAgentId, ConfigEditorState>>({
|
||||
'claude-code': {
|
||||
selectedKey: 'settings',
|
||||
content: '',
|
||||
originalContent: '',
|
||||
loading: false,
|
||||
saving: false,
|
||||
},
|
||||
codex: {
|
||||
selectedKey: 'config',
|
||||
content: '',
|
||||
originalContent: '',
|
||||
loading: false,
|
||||
saving: false,
|
||||
},
|
||||
})
|
||||
|
||||
const statusById = computed(() => {
|
||||
return tools.value.reduce((acc, tool) => {
|
||||
acc[tool.id] = tool
|
||||
return acc
|
||||
}, {} as Partial<Record<CodingAgentId, CodingAgentToolStatus>>)
|
||||
})
|
||||
|
||||
const activeProfileName = computed(() => profilesStore.activeProfileName || 'default')
|
||||
|
||||
const launchProviderOptions = computed(() => launchProviders.value.map(provider => ({
|
||||
label: provider.label && provider.label !== provider.provider
|
||||
? `${provider.label} (${provider.provider})`
|
||||
: provider.provider,
|
||||
value: provider.provider,
|
||||
})))
|
||||
|
||||
const selectedLaunchProvider = computed(() => (
|
||||
launchProviders.value.find(provider => provider.provider === launchProvider.value) || null
|
||||
))
|
||||
|
||||
const launchModelOptions = computed(() => (
|
||||
selectedLaunchProvider.value?.models.map(model => ({ label: model, value: model })) || []
|
||||
))
|
||||
|
||||
const launchProtocolOptions = computed(() => [
|
||||
{ label: t('codingAgents.protocolOpenAiChat'), value: 'chat_completions' },
|
||||
{ label: t('codingAgents.protocolOpenAiResponses'), value: 'codex_responses' },
|
||||
{ label: t('codingAgents.protocolAnthropicMessages'), value: 'anthropic_messages' },
|
||||
])
|
||||
|
||||
const launchModeOptions = computed(() => [
|
||||
{ label: t('codingAgents.launchModeGlobal'), value: 'global' },
|
||||
{ label: t('codingAgents.launchModeScoped'), value: 'scoped' },
|
||||
])
|
||||
|
||||
const launchModeThemeOverrides = {
|
||||
buttonColorActive: '#111827',
|
||||
buttonTextColorActive: '#fff',
|
||||
buttonBorderColorActive: '#111827',
|
||||
buttonBoxShadow: 'inset 0 0 0 1px var(--border-color)',
|
||||
buttonBoxShadowHover: 'inset 0 0 0 1px #111827',
|
||||
}
|
||||
|
||||
const useGlobalLaunchConfig = computed(() => (
|
||||
launchMode.value === 'global'
|
||||
))
|
||||
|
||||
function statusFor(id: CodingAgentId) {
|
||||
return statusById.value[id]
|
||||
}
|
||||
|
||||
function configFilesFor(id: CodingAgentId) {
|
||||
return configFiles[id]
|
||||
}
|
||||
|
||||
function selectedConfigFile(id: CodingAgentId) {
|
||||
return configFiles[id].find(file => file.key === configEditorStates.value[id].selectedKey) || configFiles[id][0]
|
||||
}
|
||||
|
||||
function hasConfigUnsavedChanges(id: CodingAgentId) {
|
||||
const state = configEditorStates.value[id]
|
||||
return state.content !== state.originalContent
|
||||
}
|
||||
|
||||
async function loadStatus() {
|
||||
loading.value = true
|
||||
loadError.value = ''
|
||||
try {
|
||||
const data = await fetchCodingAgentsStatus()
|
||||
tools.value = data.tools
|
||||
} catch (err: any) {
|
||||
loadError.value = err?.message || t('codingAgents.loadFailed')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadConfigFile(agentId: CodingAgentId, file: ConfigFileEntry) {
|
||||
const state = configEditorStates.value[agentId]
|
||||
state.selectedKey = file.key
|
||||
state.loading = true
|
||||
try {
|
||||
const result = await readCodingAgentConfigFile(agentId, file.key)
|
||||
state.content = result.content
|
||||
state.originalContent = result.content
|
||||
state.absolutePath = result.absolutePath
|
||||
state.exists = result.exists
|
||||
} catch (err: any) {
|
||||
message.error(err?.message || t('codingAgents.configLoadFailed'))
|
||||
} finally {
|
||||
state.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveConfigFile(agentId: CodingAgentId) {
|
||||
const state = configEditorStates.value[agentId]
|
||||
const file = selectedConfigFile(agentId)
|
||||
if (!file) return
|
||||
state.saving = true
|
||||
try {
|
||||
const result = await writeCodingAgentConfigFile(
|
||||
agentId,
|
||||
file.key,
|
||||
state.content,
|
||||
)
|
||||
state.originalContent = result.content
|
||||
state.absolutePath = result.absolutePath
|
||||
state.exists = result.exists
|
||||
message.success(t('files.saved'))
|
||||
} catch (err: any) {
|
||||
message.error(err?.message || t('files.saveFailed'))
|
||||
} finally {
|
||||
state.saving = false
|
||||
}
|
||||
}
|
||||
|
||||
function resetLaunchSelection() {
|
||||
const firstProvider = launchProviders.value[0]
|
||||
launchProvider.value = firstProvider?.provider || ''
|
||||
launchModel.value = firstProvider?.models[0] || ''
|
||||
launchApiMode.value = defaultLaunchApiMode(firstProvider)
|
||||
}
|
||||
|
||||
function handleLaunchProviderChange(value: string) {
|
||||
const provider = launchProviders.value.find(item => item.provider === value)
|
||||
launchModel.value = provider?.models[0] || ''
|
||||
launchApiMode.value = defaultLaunchApiMode(provider)
|
||||
}
|
||||
|
||||
function defaultLaunchApiMode(provider?: AvailableModelGroup | null): CodingAgentApiMode {
|
||||
const providerKey = String(provider?.provider || '').toLowerCase()
|
||||
const baseUrl = String(provider?.base_url || '').toLowerCase()
|
||||
if (
|
||||
providerKey.includes('claude') ||
|
||||
providerKey === 'anthropic' ||
|
||||
baseUrl.includes('anthropic') ||
|
||||
baseUrl.includes('/anthropic')
|
||||
) {
|
||||
return 'anthropic_messages'
|
||||
}
|
||||
if (
|
||||
providerKey === 'deepseek' ||
|
||||
providerKey === 'lmstudio' ||
|
||||
baseUrl.includes('deepseek') ||
|
||||
baseUrl.includes('127.0.0.1') ||
|
||||
baseUrl.includes('localhost')
|
||||
) {
|
||||
return 'chat_completions'
|
||||
}
|
||||
return 'codex_responses'
|
||||
}
|
||||
|
||||
async function openLaunchModal(agentId: CodingAgentId) {
|
||||
launchAgentId.value = agentId
|
||||
launchMode.value = 'scoped'
|
||||
launchModalVisible.value = true
|
||||
launchResult.value = null
|
||||
launchLoading.value = true
|
||||
try {
|
||||
const result = await fetchAvailableModelsForProfile(activeProfileName.value)
|
||||
launchProviders.value = result.groups || []
|
||||
resetLaunchSelection()
|
||||
} catch (err: any) {
|
||||
message.error(err?.message || t('codingAgents.loadProvidersFailed'))
|
||||
} finally {
|
||||
launchLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function currentLaunchRequest() {
|
||||
if (useGlobalLaunchConfig.value) {
|
||||
return {
|
||||
mode: 'global' as const,
|
||||
profile: activeProfileName.value,
|
||||
}
|
||||
}
|
||||
const provider = selectedLaunchProvider.value
|
||||
return {
|
||||
mode: 'scoped' as const,
|
||||
profile: activeProfileName.value,
|
||||
provider: launchProvider.value,
|
||||
model: launchModel.value,
|
||||
baseUrl: provider?.base_url || '',
|
||||
apiKey: provider?.api_key || '',
|
||||
apiMode: launchApiMode.value,
|
||||
}
|
||||
}
|
||||
|
||||
async function launchBuiltInTerminal() {
|
||||
if (!useGlobalLaunchConfig.value && (!launchProvider.value || !launchModel.value)) {
|
||||
message.error(t('codingAgents.selectProviderModel'))
|
||||
return
|
||||
}
|
||||
launchPreparing.value = true
|
||||
try {
|
||||
launchResult.value = await prepareCodingAgentLaunch(launchAgentId.value, currentLaunchRequest())
|
||||
terminalCommand.value = launchResult.value.shellCommand
|
||||
terminalKey.value += 1
|
||||
launchModalVisible.value = false
|
||||
terminalVisible.value = true
|
||||
message.success(t('codingAgents.launchPrepared'))
|
||||
} catch (err: any) {
|
||||
message.error(err?.message || t('codingAgents.launchPrepareFailed'))
|
||||
} finally {
|
||||
launchPreparing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function launchNativeTerminal() {
|
||||
if (!useGlobalLaunchConfig.value && (!launchProvider.value || !launchModel.value)) {
|
||||
message.error(t('codingAgents.selectProviderModel'))
|
||||
return
|
||||
}
|
||||
nativeLaunchPreparing.value = true
|
||||
try {
|
||||
await launchCodingAgentNativeTerminal(launchAgentId.value, currentLaunchRequest())
|
||||
launchModalVisible.value = false
|
||||
message.success(t('codingAgents.nativeLaunchStarted'))
|
||||
} catch (err: any) {
|
||||
message.error(err?.message || t('codingAgents.nativeLaunchFailed'))
|
||||
} finally {
|
||||
nativeLaunchPreparing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInstall(id: CodingAgentId) {
|
||||
installing.value[id] = true
|
||||
try {
|
||||
const result = await installCodingAgent(id)
|
||||
tools.value = result.tools
|
||||
if (result.success) {
|
||||
message.success(t('codingAgents.installSuccess'))
|
||||
} else {
|
||||
message.error(result.message || t('codingAgents.installFailed'))
|
||||
}
|
||||
} catch (err: any) {
|
||||
message.error(err?.message || t('codingAgents.installFailed'))
|
||||
} finally {
|
||||
installing.value[id] = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(id: CodingAgentId) {
|
||||
deleting.value[id] = true
|
||||
try {
|
||||
const result = await deleteCodingAgent(id)
|
||||
tools.value = result.tools
|
||||
if (result.success) {
|
||||
message.success(t('codingAgents.deleteSuccess'))
|
||||
} else {
|
||||
message.error(result.message || t('codingAgents.deleteFailed'))
|
||||
}
|
||||
} catch (err: any) {
|
||||
message.error(err?.message || t('codingAgents.deleteFailed'))
|
||||
} finally {
|
||||
deleting.value[id] = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadStatus()
|
||||
void loadConfigFile('claude-code', configFiles['claude-code'][0])
|
||||
void loadConfigFile('codex', configFiles.codex[1])
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="coding-agents-view">
|
||||
<header class="page-header">
|
||||
<h2 class="header-title">{{ t('codingAgents.title') }}</h2>
|
||||
<NButton size="small" quaternary :loading="loading" @click="loadStatus">
|
||||
{{ t('codingAgents.refresh') }}
|
||||
</NButton>
|
||||
</header>
|
||||
|
||||
<div class="coding-agents-content">
|
||||
<NAlert v-if="loadError" type="error" class="status-alert">
|
||||
{{ loadError }}
|
||||
</NAlert>
|
||||
|
||||
<div class="agent-blocks">
|
||||
<section v-for="block in agentBlocks" :key="block.tool" class="agent-block">
|
||||
<header class="agent-block-header">
|
||||
<img class="agent-logo" :src="agentLogos[block.tool]" alt="" />
|
||||
<div>
|
||||
<h3>{{ block.tool }}</h3>
|
||||
<NTag class="provider-tag" size="small">{{ block.provider }}</NTag>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="agent-install-state">
|
||||
<div class="install-state-main">
|
||||
<div class="install-state-title">{{ t('codingAgents.installStatus') }}</div>
|
||||
<div class="install-state-value">
|
||||
<NTag v-if="loading && !statusFor(block.id)" size="small">
|
||||
{{ t('codingAgents.checking') }}
|
||||
</NTag>
|
||||
<template v-else-if="statusFor(block.id)?.installed">
|
||||
<NTag size="small" type="success">{{ t('codingAgents.installed') }}</NTag>
|
||||
<span class="version-text">
|
||||
{{ statusFor(block.id)?.version || statusFor(block.id)?.rawVersion }}
|
||||
</span>
|
||||
</template>
|
||||
<NTag v-else size="small" type="warning">{{ t('codingAgents.notInstalled') }}</NTag>
|
||||
</div>
|
||||
</div>
|
||||
<NButton
|
||||
v-if="statusFor(block.id)?.installed"
|
||||
size="small"
|
||||
type="error"
|
||||
secondary
|
||||
:loading="deleting[block.id]"
|
||||
@click="handleDelete(block.id)"
|
||||
>
|
||||
{{ deleting[block.id] ? t('codingAgents.deleting') : t('codingAgents.deleteNow') }}
|
||||
</NButton>
|
||||
<NButton
|
||||
v-else
|
||||
size="small"
|
||||
type="primary"
|
||||
secondary
|
||||
:loading="installing[block.id]"
|
||||
:disabled="loading && !statusFor(block.id)"
|
||||
@click="handleInstall(block.id)"
|
||||
>
|
||||
{{ installing[block.id] ? t('codingAgents.installing') : t('codingAgents.installNow') }}
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
<div class="config-file-section">
|
||||
<div class="config-file-title">{{ t('codingAgents.configFiles') }}</div>
|
||||
<div class="config-file-list">
|
||||
<button
|
||||
v-for="file in configFilesFor(block.id)"
|
||||
:key="file.key"
|
||||
class="config-file-cell"
|
||||
:class="{ active: configEditorStates[block.id].selectedKey === file.key }"
|
||||
type="button"
|
||||
@click="loadConfigFile(block.id, file)"
|
||||
>
|
||||
{{ file.path }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inline-config-editor">
|
||||
<div class="config-editor-meta">
|
||||
<span class="config-editor-path">
|
||||
{{ selectedConfigFile(block.id)?.path }}
|
||||
</span>
|
||||
<NTag v-if="configEditorStates[block.id].exists === false" size="small" type="warning">
|
||||
{{ t('codingAgents.configFileNotCreated') }}
|
||||
</NTag>
|
||||
</div>
|
||||
<NSpin :show="configEditorStates[block.id].loading">
|
||||
<NInput
|
||||
v-model:value="configEditorStates[block.id].content"
|
||||
type="textarea"
|
||||
class="config-textarea"
|
||||
:disabled="configEditorStates[block.id].loading"
|
||||
/>
|
||||
</NSpin>
|
||||
<div class="config-editor-actions">
|
||||
<NSpace justify="end">
|
||||
<NButton
|
||||
size="small"
|
||||
type="primary"
|
||||
:loading="configEditorStates[block.id].saving"
|
||||
:disabled="configEditorStates[block.id].loading || !hasConfigUnsavedChanges(block.id)"
|
||||
@click="saveConfigFile(block.id)"
|
||||
>
|
||||
{{ t('files.saveFile') }}
|
||||
</NButton>
|
||||
<NButton
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="!statusFor(block.id)?.installed"
|
||||
@click="openLaunchModal(block.id)"
|
||||
>
|
||||
{{ t('codingAgents.launch') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NModal
|
||||
v-model:show="launchModalVisible"
|
||||
preset="card"
|
||||
class="launch-modal"
|
||||
:style="{ width: '620px', maxWidth: 'calc(100vw - 32px)' }"
|
||||
:title="t('codingAgents.launchTitle')"
|
||||
:bordered="false"
|
||||
>
|
||||
<NSpin :show="launchLoading">
|
||||
<NForm label-placement="top">
|
||||
<NFormItem :label="t('codingAgents.profileScope')">
|
||||
<NTag size="small">{{ activeProfileName }}</NTag>
|
||||
</NFormItem>
|
||||
<NFormItem :label="t('codingAgents.launchModeScope')">
|
||||
<NRadioGroup
|
||||
v-model:value="launchMode"
|
||||
name="coding-agent-launch-mode"
|
||||
:theme-overrides="launchModeThemeOverrides"
|
||||
>
|
||||
<NRadioButton
|
||||
v-for="option in launchModeOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</NRadioButton>
|
||||
</NRadioGroup>
|
||||
</NFormItem>
|
||||
<NFormItem v-if="!useGlobalLaunchConfig" :label="t('codingAgents.providerScope')">
|
||||
<NSelect
|
||||
v-model:value="launchProvider"
|
||||
:options="launchProviderOptions"
|
||||
:placeholder="t('codingAgents.providerPlaceholder')"
|
||||
filterable
|
||||
@update:value="handleLaunchProviderChange"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem v-if="!useGlobalLaunchConfig" :label="t('codingAgents.modelScope')">
|
||||
<NSelect
|
||||
v-model:value="launchModel"
|
||||
:options="launchModelOptions"
|
||||
:placeholder="t('codingAgents.modelPlaceholder')"
|
||||
filterable
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem v-if="!useGlobalLaunchConfig" :label="t('codingAgents.protocolScope')">
|
||||
<NSelect
|
||||
v-model:value="launchApiMode"
|
||||
:options="launchProtocolOptions"
|
||||
/>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
</NSpin>
|
||||
<template #footer>
|
||||
<NSpace justify="end">
|
||||
<NButton
|
||||
secondary
|
||||
:loading="launchPreparing"
|
||||
:disabled="nativeLaunchPreparing"
|
||||
@click="launchBuiltInTerminal"
|
||||
>
|
||||
{{ t('codingAgents.builtInTerminal') }}
|
||||
</NButton>
|
||||
<NButton
|
||||
type="primary"
|
||||
:loading="nativeLaunchPreparing"
|
||||
:disabled="launchPreparing"
|
||||
@click="launchNativeTerminal"
|
||||
>
|
||||
{{ t('codingAgents.nativeTerminal') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NModal>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="terminalVisible" class="drawer-overlay" @click="terminalVisible = false"></div>
|
||||
<div :class="['drawer-panel', { show: terminalVisible }]">
|
||||
<div class="drawer-header">
|
||||
<div class="drawer-tabs">
|
||||
<button class="tab-button active" type="button">
|
||||
{{ t('codingAgents.terminalTitle') }}
|
||||
</button>
|
||||
</div>
|
||||
<button class="close-button" type="button" @click="terminalVisible = false">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="drawer-content">
|
||||
<div class="drawer-pane">
|
||||
<TerminalPanel
|
||||
:key="terminalKey"
|
||||
:visible="terminalVisible"
|
||||
:initial-command="terminalCommand"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.coding-agents-view {
|
||||
height: calc(100 * var(--vh));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.coding-agents-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
background: $bg-secondary;
|
||||
}
|
||||
|
||||
.agent-blocks {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.agent-block {
|
||||
border: 1px solid $border-light;
|
||||
border-radius: $radius-md;
|
||||
background: $bg-card;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-alert {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.agent-block-header {
|
||||
padding: 14px;
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(0, 1fr);
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid $border-light;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.provider-tag {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.agent-logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
background: $bg-secondary;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.agent-install-state {
|
||||
min-height: 58px;
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid $border-light;
|
||||
}
|
||||
|
||||
.install-state-main {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.install-state-title {
|
||||
color: $text-secondary;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.install-state-value {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.version-text {
|
||||
min-width: 0;
|
||||
color: $text-secondary;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.config-file-section {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid $border-light;
|
||||
}
|
||||
|
||||
.config-file-title {
|
||||
margin-bottom: 8px;
|
||||
color: $text-secondary;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.config-file-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.config-file-cell {
|
||||
border: none;
|
||||
color: $text-secondary;
|
||||
background: $code-bg;
|
||||
padding: 3px 6px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
color: $text-primary;
|
||||
background: $bg-card-hover;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $text-primary;
|
||||
background: $bg-card-hover;
|
||||
box-shadow: inset 0 0 0 1px $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.config-editor-meta {
|
||||
min-height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.config-editor-path {
|
||||
min-width: 0;
|
||||
color: $text-secondary;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inline-config-editor {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
|
||||
.config-textarea {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
|
||||
:deep(.n-input-wrapper),
|
||||
:deep(.n-input__textarea) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.n-input__textarea-el) {
|
||||
height: 100%;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.config-editor-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.launch-modal {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.launch-result {
|
||||
margin-top: 4px;
|
||||
padding: 12px;
|
||||
border: 1px solid $border-light;
|
||||
border-radius: $radius-sm;
|
||||
background: $bg-secondary;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: $text-primary;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
border-radius: $radius-sm;
|
||||
background: $code-bg;
|
||||
color: $text-primary;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.launch-result-label {
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.drawer-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.drawer-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: min(-1180px, -88vw);
|
||||
width: min(1180px, 88vw);
|
||||
height: calc(100 * var(--vh));
|
||||
max-height: calc(100 * var(--vh));
|
||||
background: $bg-card;
|
||||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
transition: right 0.3s ease;
|
||||
|
||||
&.show {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.drawer-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: $text-secondary;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
border-radius: $radius-sm;
|
||||
|
||||
&:hover {
|
||||
color: $text-primary;
|
||||
background: rgba(var(--accent-primary-rgb), 0.05);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--accent-primary);
|
||||
background: rgba(var(--accent-primary-rgb), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
padding: 8px;
|
||||
border: none;
|
||||
background: rgba(var(--accent-primary-rgb), 0.08);
|
||||
color: $text-secondary;
|
||||
cursor: pointer;
|
||||
border-radius: $radius-sm;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
color: $text-primary;
|
||||
background: rgba(var(--accent-primary-rgb), 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.drawer-pane {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.agent-blocks {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.coding-agents-content {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.drawer-panel {
|
||||
width: 100%;
|
||||
right: -100%;
|
||||
|
||||
&.show {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user