DeepSeek Harness Team
39 lines
2.0 KiB
TypeScript
39 lines
2.0 KiB
TypeScript
/** Settings tab shell routing between stage settings (Sources, Eval, Execution), Prompts, and Deployment. */
|
|
import type { StateView } from './api.ts'
|
|
import { DeploymentPage, type DeploymentForm } from './deployment.tsx'
|
|
import { EvalSettings } from './eval.tsx'
|
|
import { ExecutionSettings } from './execution.tsx'
|
|
import { PromptsPage } from './prompts.tsx'
|
|
import { usePanel } from './provider.tsx'
|
|
import { SETTINGS_GROUPS, settingsRoute, type SettingsGroup } from './route.ts'
|
|
import { SettingsProvider } from './settings-kit.tsx'
|
|
import { SourceSettings } from './source.tsx'
|
|
|
|
const STAGE_GROUPS: readonly SettingsGroup[] = ['source', 'eval', 'execution']
|
|
export function SettingsPage({ group, query, state, deploymentForm }: {
|
|
group: SettingsGroup; query: { source?: string; version?: string }; state: StateView; deploymentForm: DeploymentForm
|
|
}) {
|
|
const { t, navigate } = usePanel()
|
|
const content = (() => {
|
|
switch (group) {
|
|
case 'source': return <SettingsProvider><SourceSettings {...query.source ? { focus: query.source } : {}} /></SettingsProvider>
|
|
case 'eval': return <SettingsProvider><EvalSettings version={query.version} /></SettingsProvider>
|
|
case 'execution': return <SettingsProvider><ExecutionSettings /></SettingsProvider>
|
|
case 'prompts': return <PromptsPage />
|
|
case 'deployment': return <DeploymentPage setup={state.setup} form={deploymentForm} />
|
|
}
|
|
})()
|
|
return <div className="dt-settings">
|
|
<nav className="dt-settings-nav" aria-label={t('tab.settings')}>
|
|
{SETTINGS_GROUPS.map(value => <button key={value} type="button" className="dt-settings-link" data-stage={STAGE_GROUPS.includes(value)
|
|
|| undefined}
|
|
aria-current={value === group ? 'page' : undefined} onClick={() => navigate(settingsRoute(value),
|
|
true)}>{t(`settingsGroup.${value}`)}</button>)}
|
|
</nav>
|
|
<div className="dt-settings-body">
|
|
<h2 className="dt-settings-title">{t(`settingsGroup.${group}`)}</h2>
|
|
{content}
|
|
</div>
|
|
</div>
|
|
}
|