Skip to content

Commit e3527d7

Browse files
SebConejoSebConejo
authored
fix: center workspace content when sidebar is hidden (#739)
* fix: center content on workspace page when sidebar is hidden The .main-content--full class was only defined in layout.css but theme.css re-declared .main-content with margin-left: var(--sidebar-width), overriding it due to CSS cascade order. Adding the --full modifier to theme.css ensures the sidebar margin is properly removed on pages without a sidebar. * fix: navigate to overview with setup modal after agent creation After creating an agent, navigate to the overview page (instead of settings) with the setup modal open and the full API key displayed. - Workspace: navigate to /agents/:name with newAgent + newApiKey state - Overview: read location state to open SetupModal immediately - SetupModal: accept and forward apiKey prop - SetupStepConfigure: show full key with copy button above the terminal commands (both are always visible now)
1 parent fc3c137 commit e3527d7

File tree

5 files changed

+56
-46
lines changed

5 files changed

+56
-46
lines changed

‎packages/frontend/src/components/SetupModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import SetupStepConfigure from './SetupStepConfigure.jsx'
44
import SetupStepVerify from './SetupStepVerify.jsx'
55
import { getAgentKey } from '../services/api.js'
66

7-
const SetupModal: Component<{ open: boolean; agentName: string; onClose: () => void; onDone?: () => void }> = (props) => {
7+
const SetupModal: Component<{ open: boolean; agentName: string; apiKey?: string | null; onClose: () => void; onDone?: () => void }> = (props) => {
88
const [step, setStep] = createSignal(1)
99

1010
const [apiKeyData] = createResource(
@@ -75,7 +75,7 @@ const SetupModal: Component<{ open: boolean; agentName: string; onClose: () => v
7575
</Show>
7676
<Show when={step() === 2}>
7777
<SetupStepConfigure
78-
apiKey={null}
78+
apiKey={props.apiKey ?? null}
7979
keyPrefix={apiKeyData()?.keyPrefix ?? null}
8080
agentName={props.agentName}
8181
endpoint={endpoint()}

‎packages/frontend/src/components/SetupStepConfigure.tsx‎

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -43,53 +43,55 @@ const SetupStepConfigure: Component<Props> = (props) => {
4343
</p>
4444

4545
<Show when={hasFullKey()}>
46-
<div style="background: hsl(var(--chart-5) / 0.1); border: 1px solid hsl(var(--chart-5) / 0.3); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: var(--font-size-sm); color: hsl(var(--foreground));">
46+
<div style="background: hsl(var(--chart-5) / 0.1); border: 1px solid hsl(var(--chart-5) / 0.3); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; font-size: var(--font-size-sm); color: hsl(var(--foreground));">
4747
Copy your API key now — it won't be shown again.
4848
</div>
49+
<div style="display: flex; align-items: center; gap: 8px; background: hsl(var(--muted)); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-family: var(--font-mono); font-size: var(--font-size-sm); word-break: break-all;">
50+
{props.apiKey}
51+
<CopyButton text={props.apiKey!} />
52+
</div>
4953
</Show>
5054

51-
<Show when={hasFullKey()} fallback={
52-
<Show when={props.keyPrefix}>
53-
<div style="font-size: var(--font-size-sm); color: hsl(var(--muted-foreground)); font-family: var(--font-mono); padding: 10px 14px; background: hsl(var(--muted)); border-radius: var(--radius);">
54-
Active key: {props.keyPrefix}...
55-
</div>
56-
</Show>
57-
}>
58-
<div class="modal-terminal">
59-
<div class="modal-terminal__header">
60-
<div class="modal-terminal__dots">
61-
<span class="modal-terminal__dot modal-terminal__dot--red" />
62-
<span class="modal-terminal__dot modal-terminal__dot--yellow" />
63-
<span class="modal-terminal__dot modal-terminal__dot--green" />
64-
</div>
65-
<div class="modal-terminal__tabs">
66-
<button
67-
class="modal-terminal__tab"
68-
classList={{ "modal-terminal__tab--active": tab() === "cli" }}
69-
onClick={() => setTab("cli")}
70-
>
71-
OpenClaw CLI
72-
</button>
73-
<span class="modal-terminal__tab-sep">|</span>
74-
<button
75-
class="modal-terminal__tab"
76-
classList={{ "modal-terminal__tab--active": tab() === "env" }}
77-
onClick={() => setTab("env")}
78-
>
79-
Environment
80-
</button>
81-
</div>
55+
<Show when={!hasFullKey() && props.keyPrefix}>
56+
<div style="font-size: var(--font-size-sm); color: hsl(var(--muted-foreground)); font-family: var(--font-mono); padding: 10px 14px; background: hsl(var(--muted)); border-radius: var(--radius); margin-bottom: 16px;">
57+
Active key: {props.keyPrefix}...
58+
</div>
59+
</Show>
60+
61+
<div class="modal-terminal">
62+
<div class="modal-terminal__header">
63+
<div class="modal-terminal__dots">
64+
<span class="modal-terminal__dot modal-terminal__dot--red" />
65+
<span class="modal-terminal__dot modal-terminal__dot--yellow" />
66+
<span class="modal-terminal__dot modal-terminal__dot--green" />
8267
</div>
83-
<div class="modal-terminal__body">
84-
<CopyButton text={tab() === "cli" ? cliCommand() : envCommand()} />
85-
<pre style="margin: 0; white-space: pre-wrap; word-break: break-all;">
86-
<code class="modal-terminal__code">
87-
{tab() === "cli" ? cliCommand() : envCommand()}
88-
</code>
89-
</pre>
68+
<div class="modal-terminal__tabs">
69+
<button
70+
class="modal-terminal__tab"
71+
classList={{ "modal-terminal__tab--active": tab() === "cli" }}
72+
onClick={() => setTab("cli")}
73+
>
74+
OpenClaw CLI
75+
</button>
76+
<span class="modal-terminal__tab-sep">|</span>
77+
<button
78+
class="modal-terminal__tab"
79+
classList={{ "modal-terminal__tab--active": tab() === "env" }}
80+
onClick={() => setTab("env")}
81+
>
82+
Environment
83+
</button>
9084
</div>
9185
</div>
92-
</Show>
86+
<div class="modal-terminal__body">
87+
<CopyButton text={tab() === "cli" ? cliCommand() : envCommand()} />
88+
<pre style="margin: 0; white-space: pre-wrap; word-break: break-all;">
89+
<code class="modal-terminal__code">
90+
{tab() === "cli" ? cliCommand() : envCommand()}
91+
</code>
92+
</pre>
93+
</div>
94+
</div>
9395
</div>
9496
);
9597
};

‎packages/frontend/src/pages/Overview.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Meta, Title } from '@solidjs/meta'
2-
import { A, useParams } from '@solidjs/router'
2+
import { A, useLocation, useParams } from '@solidjs/router'
33
import {
44
createEffect,
55
createResource,
@@ -77,9 +77,12 @@ type ActiveView = 'cost' | 'tokens' | 'messages'
7777

7878
const Overview: Component = () => {
7979
const params = useParams<{ agentName: string }>()
80+
const location = useLocation<{ newAgent?: boolean; newApiKey?: string }>()
8081
const [range, setRange] = createSignal('24h')
8182
const [activeView, setActiveView] = createSignal<ActiveView>('cost')
82-
const [setupOpen, setSetupOpen] = createSignal(false)
83+
const [setupOpen, setSetupOpen] = createSignal(
84+
!!(location.state as { newAgent?: boolean } | undefined)?.newAgent
85+
)
8386
const [setupCompleted, setSetupCompleted] = createSignal(
8487
!!localStorage.getItem(`setup_completed_${params.agentName}`)
8588
)
@@ -557,6 +560,7 @@ const Overview: Component = () => {
557560
<SetupModal
558561
open={setupOpen()}
559562
agentName={decodeURIComponent(params.agentName)}
563+
apiKey={(location.state as { newApiKey?: string } | undefined)?.newApiKey ?? null}
560564
onClose={() => {
561565
localStorage.setItem(`setup_dismissed_${params.agentName}`, '1')
562566
setSetupOpen(false)

‎packages/frontend/src/pages/Workspace.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ const AddAgentModal: Component<{ open: boolean; onClose: () => void }> = (
4040
toast.success(`Agent "${agentName}" connected`);
4141
props.onClose();
4242
setName("");
43-
const url = `/agents/${encodeURIComponent(agentName)}/settings`;
44-
navigate(url, { state: { newApiKey: result?.apiKey } });
43+
const url = `/agents/${encodeURIComponent(agentName)}`;
44+
navigate(url, { state: { newAgent: true, newApiKey: result?.apiKey } });
4545
} catch {
4646
// error toast already shown by fetchMutate
4747
}

‎packages/frontend/src/styles/theme.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,10 @@ h1, h2, h3, h4, h5, h6 {
171171
min-width: 0;
172172
}
173173

174+
.main-content--full {
175+
margin-left: 0;
176+
}
177+
174178
/* ── Container sizes ───────────────────────────────── */
175179
.container--sm {
176180
max-width: 680px;

0 commit comments

Comments
 (0)
⚡