-
Default Model
-
arrow_forward
-
setSelectedModel(e.target.value)} placeholder="provider/model-id" className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50" />
-
+
+ Default Model
+ arrow_forward
+ setSelectedModel(e.target.value)} placeholder="provider/model-id" className="min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5" />
+
{selectedModel && }
@@ -333,15 +333,15 @@ export default function OpenClawToolCard({
{(openclawStatus.agents || []).filter(a => a.agentDir).map((agent) => (
Agent {agent.name || agent.id}
- arrow_forward
+ arrow_forward
setAgentModels(prev => ({ ...prev, [agent.id]: e.target.value }))}
placeholder={`default (${selectedModel || "provider/model-id"})`}
- className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
+ className="min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
/>
-
+
{agentModels[agent.id] && }
))}
@@ -354,7 +354,7 @@ export default function OpenClawToolCard({
+
diff --git a/src/app/(dashboard)/dashboard/cli-tools/components/OpenCodeToolCard.js b/src/app/(dashboard)/dashboard/cli-tools/components/OpenCodeToolCard.js
index 4a5a2662..6616e076 100644
--- a/src/app/(dashboard)/dashboard/cli-tools/components/OpenCodeToolCard.js
+++ b/src/app/(dashboard)/dashboard/cli-tools/components/OpenCodeToolCard.js
@@ -189,13 +189,13 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
return (
-
-
+
+
{ e.target.style.display = "none"; }} />
-
+
{tool.name}
{configStatus === "configured" &&
Connected}
{configStatus === "not_configured" &&
Not configured}
@@ -257,25 +257,25 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
{/* Current base URL */}
{status?.config?.provider?.["9router"]?.options?.baseURL && (
-
-
Current
-
arrow_forward
-
+
+ Current
+ arrow_forward
+
{status.config.provider["9router"].options.baseURL}
)}
{/* Base URL */}
-
-
Base URL
-
arrow_forward
+
+ Base URL
+ arrow_forward
setCustomBaseUrl(e.target.value)}
placeholder="https://.../v1"
- className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
+ className="min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
/>
{customBaseUrl && customBaseUrl !== `${baseUrl}/v1` && (
{/* API Key */}
-
-
API Key
-
arrow_forward
+
+ API Key
+ arrow_forward
{apiKeys.length > 0 ? (
-
{/* Models */}
-
+
Models
arrow_forward
@@ -364,7 +364,7 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
))
)}
-
+
{selectedModels.length > 0 && activeModel ? (
@@ -380,20 +380,20 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
{/* Subagent Model */}
-
-
Subagent Model
-
arrow_forward
+
+ Subagent Model
+ arrow_forward
setSubagentModel(e.target.value)}
placeholder={selectedModel || "provider/model-id (defaults to main model)"}
- className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
+ className="min-w-0 px-2 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
/>
@@ -416,7 +416,7 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
)}
-
+
diff --git a/src/app/(dashboard)/dashboard/combos/page.js b/src/app/(dashboard)/dashboard/combos/page.js
index dfaa4661..182bab57 100644
--- a/src/app/(dashboard)/dashboard/combos/page.js
+++ b/src/app/(dashboard)/dashboard/combos/page.js
@@ -125,16 +125,16 @@ export default function CombosPage() {
}
return (
-
+
{/* Header */}
-
-
+
+
Combos
Create model combos with fallback support
-
@@ -148,7 +148,7 @@ export default function CombosPage() {
No combos yet
Create model combos with fallback support
-
setShowCreateModal(true)}>
+ setShowCreateModal(true)} className="w-full sm:w-auto">
Create Combo
@@ -195,19 +195,19 @@ export default function CombosPage() {
function ComboCard({ combo, copied, onCopy, onEdit, onDelete, roundRobinEnabled, onToggleRoundRobin }) {
return (
-
-
+
+
layers
-
{combo.name}
-
+
{combo.name}
+
{combo.models.length === 0 ? (
No models
) : (
combo.models.slice(0, 3).map((model, index) => (
-
+
{model}
))
@@ -220,9 +220,9 @@ function ComboCard({ combo, copied, onCopy, onEdit, onDelete, roundRobinEnabled,
{/* Actions */}
-
+
{/* Round Robin Toggle — always visible */}
-
+
Round Robin
-
+
{ e.stopPropagation(); onCopy(combo.name, `combo-${combo.id}`); }}
- className="flex flex-col items-center px-2 py-1 rounded hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-primary transition-colors"
+ className="flex flex-col items-center rounded px-2 py-1 text-text-muted transition-colors hover:bg-black/5 hover:text-primary dark:hover:bg-white/5"
title="Copy combo name"
>
@@ -244,7 +244,7 @@ function ComboCard({ combo, copied, onCopy, onEdit, onDelete, roundRobinEnabled,
edit
@@ -252,7 +252,7 @@ function ComboCard({ combo, copied, onCopy, onEdit, onDelete, roundRobinEnabled,
delete
@@ -283,7 +283,7 @@ function ModelItem({ index, model, isFirst, isLast, onEdit, onMoveUp, onMoveDown
};
return (
-
+
{/* Index badge */}
{index + 1}
@@ -295,11 +295,11 @@ function ModelItem({ index, model, isFirst, isLast, onEdit, onMoveUp, onMoveDown
onChange={(e) => setDraft(e.target.value)}
onBlur={commit}
onKeyDown={handleKeyDown}
- className="flex-1 min-w-0 px-1.5 py-0.5 text-xs font-mono bg-white dark:bg-black/20 border border-primary/40 rounded outline-none text-text-main"
+ className="min-w-0 flex-1 rounded border border-primary/40 bg-white px-1.5 py-0.5 font-mono text-xs text-text-main outline-none dark:bg-black/20"
/>
) : (
setEditing(true)}
title="Click to edit"
>
@@ -308,7 +308,7 @@ function ModelItem({ index, model, isFirst, isLast, onEdit, onMoveUp, onMoveDown
)}
{/* Priority arrows */}
-
+
No models added yet
) : (
-
+
{models.map((model, index) => (
{/* Actions */}
-
+
Cancel
diff --git a/src/app/(dashboard)/dashboard/mitm/MitmPageClient.js b/src/app/(dashboard)/dashboard/mitm/MitmPageClient.js
index 6849359f..f22c443a 100644
--- a/src/app/(dashboard)/dashboard/mitm/MitmPageClient.js
+++ b/src/app/(dashboard)/dashboard/mitm/MitmPageClient.js
@@ -75,7 +75,11 @@ export default function MitmPageClient() {
const mitmTools = Object.entries(MITM_TOOLS);
return (
-
+
+
+
MITM
+
Route supported IDE traffic through 9Router with local DNS interception.
+
{/* MITM Server Card */}
{/* Tool Cards */}
-
+
{mitmTools.map(([toolId, tool]) => (
+
{/* Local Mode Info */}
-
-
-
-
computer
+
+
+
+ computer
-
Local Mode
-
Running on your machine
+
Local Mode
+
Running on your machine
-
+
{["light", "dark", "system"].map((option) => (
setTheme(option)}
className={cn(
- "flex items-center gap-1.5 px-3 py-1.5 rounded-md font-medium transition-all",
+ "flex items-center justify-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1.5 rounded-md font-medium transition-all flex-1 sm:flex-initial",
theme === option
? "bg-white dark:bg-white/10 text-text-main shadow-sm"
: "text-text-muted hover:text-text-main"
@@ -362,24 +362,25 @@ export default function ProfilePage() {
{option === "light" ? "light_mode" : option === "dark" ? "dark_mode" : "contrast"}
- {option}
+ {option}
))}
-
+
-
Database Location
-
~/.9router/db.json
+
Database Location
+
~/.9router/db.json
-
+
Download Backup
@@ -388,6 +389,7 @@ export default function ProfilePage() {
icon="upload"
onClick={() => importFileRef.current?.click()}
disabled={dbLoading}
+ className="w-full sm:w-auto"
>
Import Backup
@@ -410,16 +412,16 @@ export default function ProfilePage() {
{/* Security */}
-
+
shield
-
Security
+
Security
-
-
-
Require login
-
+
+
+
Require login
+
When ON, dashboard requires password. When OFF, access without login.
@@ -433,7 +435,7 @@ export default function ProfilePage() {