Skip to content

Improve Automation API token settings UX #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anhtahaylove wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve Automation API token settings UX #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1118,6 +1118,55 @@ textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
}
.copy-icon:hover { color: var(--tx-1); background: var(--bg-1); }

.api-state {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
border: 1px solid var(--bd-1);
border-radius: var(--radius);
background: var(--bg-2);
font-size: 12px;
}
.api-state strong { color: var(--tx-1); }
.api-state span {
min-width: 0;
overflow: hidden;
color: var(--tx-3);
text-overflow: ellipsis;
white-space: nowrap;
}
.api-state-on { border-color: #4ade8033; }
.api-state-on strong { color: var(--ok); }
.api-state-off { border-color: #fb718540; }
.api-state-off strong { color: var(--err); }
.settings-note {
margin-top: 10px;
padding: 9px 10px;
border: 1px solid var(--bd-1);
border-radius: var(--radius);
background: var(--bg-2);
color: var(--tx-2);
font-size: 12px;
line-height: 1.45;
}
.settings-note code { color: var(--tx-1); }
.settings-note-warn {
border-color: #f59e0b55;
background: #f59e0b12;
color: #fbbf24;
}
.codex-env-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.codex-env-row span { flex: 1 1 260px; }

/* Confirm modal */
.dialog-confirm { max-width: 440px; }
.confirm-msg { color: var(--tx-2); font-size: 13px; line-height: 1.5; margin: 0; }
Expand Down
52 changes: 49 additions & 3 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4739,11 +4739,35 @@ function SettingsView() {
api_port: 40325,
});
const [api, setApi] = useState<ApiInfo | null>(null);
const [tokenBusy, setTokenBusy] = useState(false);
const refreshApi = () => invoke<ApiInfo>("api_info").then(setApi).catch(() => {});
useEffect(() => { invoke<Settings>("settings_get").then(setS); refreshApi(); }, []);
const regenToken = async () => {
try { setApi(await invoke<ApiInfo>("api_regenerate_token")); toast.ok("Token regenerated"); }
const ok = await confirmModal({
title: "Regenerate Automation API token",
message:
"Existing MCP, Codex, SDK, and script clients using the current token will stop working immediately. Generate a new token?",
buttons: [
{ label: "Cancel", value: false },
{ label: "Regenerate token", value: true, danger: true },
],
});
if (ok !== true) return;
setTokenBusy(true);
try {
setApi(await invoke<ApiInfo>("api_regenerate_token"));
toast.ok("Token regenerated — update MCP/Codex clients");
}
catch (e) { toast.err(String(e)); }
finally { setTokenBusy(false); }
};
const copyCodexTokenEnv = async () => {
if (!api?.token) return;
const escapedToken = api.token.replace(/'/g, "''");
try {
await clip.write(`[Environment]::SetEnvironmentVariable('SHARDX_TOKEN','${escapedToken}','User')`);
toast.ok("Copied SHARDX_TOKEN User env command");
} catch (e) { toast.err(String(e)); }
};

const [mcpBusy, setMcpBusy] = useState(false);
Expand All @@ -4762,6 +4786,9 @@ function SettingsView() {
try { await invoke("settings_save", { value: s }); toast.ok("Settings saved"); }
catch (e) { toast.err(String(e)); }
};
const requestedApiEnabled = s.api_enabled ?? true;
const requestedApiPort = s.api_port ?? 40325;
const apiRestartPending = !!api && (requestedApiEnabled !== api.enabled || requestedApiPort !== api.port);
return (
<section className="page settings-page">
<Topbar crumbs={["System", "Settings"]} search="" onSearch={() => {}} />
Expand Down Expand Up @@ -4827,12 +4854,22 @@ function SettingsView() {
<span className="lbl">Port</span>
<input
type="number"
value={s.api_port ?? 40325}
value={requestedApiPort}
onChange={(e) => setS({ ...s, api_port: Number(e.target.value) || 40325 })}
/>
</label>
{api && (
<>
<div className={`api-state ${api.enabled ? "api-state-on" : "api-state-off"}`}>
<strong>{api.enabled ? "Server running" : "Server disabled"}</strong>
<span>{api.enabled ? api.base_url : "Enable it, save settings, then restart the app."}</span>
</div>
{apiRestartPending && (
<div className="settings-note settings-note-warn">
Enable/port edits apply after <strong>Save settings</strong> and app restart. The current API is still{" "}
{api.enabled ? <code>{api.base_url}</code> : "disabled"}.
</div>
)}
<label>
<span className="lbl">Base URL</span>
<CopyField value={api.base_url} />
Expand All @@ -4841,8 +4878,17 @@ function SettingsView() {
<span className="lbl">Bearer token</span>
<CopyField value={api.token} secret />
</label>
<div className="settings-note codex-env-row">
<span>
For Codex on Windows, store this in the User environment as <code>SHARDX_TOKEN</code> instead of
pasting it into MCP config files.
</span>
<button className="btn-ghost btn-sm" onClick={copyCodexTokenEnv}>Copy PowerShell env command</button>
</div>
<div className="row-inline" style={{ marginTop: 10, gap: 10 }}>
<button className="btn-ghost" onClick={regenToken}>Regenerate token</button>
<button className="btn-ghost" onClick={regenToken} disabled={tokenBusy}>
{tokenBusy ? "Regenerating…" : "Regenerate token…"}
</button>
<span className="muted small">Invalidates the current token immediately.</span>
</div>
<p className="muted small" style={{ marginTop: 8 }}>
Expand Down