From 0ed94225b2042a49f5da8b2961926c7c08cb1ae2 Mon Sep 17 00:00:00 2001 From: xavix-yo Date: Wed, 29 Jul 2026 12:36:24 +0100 Subject: [PATCH] web: unify page headers into one shared page-header bar Every full-page view now renders the same sticky top bar (back button, title, right-side actions) from the new web/css/page-header.css, replacing a dozen per-page duplicates (.page-panel-header, .project-page-header, .task-page-header, .llm-page-header, .um-header, .apr-header, .llmr-header, .pv-header, .sa-header, .config-page-header, .agents-page-header). Pages that padded the whole container (config, agents, system-agents, llm-requests, models-hub) move that padding into a body wrapper so the bar sits flush and stays pinned on scroll. Back buttons are standardized to the icon-only .page-header-back. --- web/components/agent-inbox.js | 20 +++--- web/components/agents.js | 24 ++++--- web/components/approval-groups.js | 14 ++-- web/components/approval-rules.js | 29 ++++---- web/components/config-page.js | 8 ++- web/components/connector-detail.js | 8 +-- web/components/connectors.js | 16 +++-- web/components/file-viewer-page.js | 8 +-- web/components/llm-providers.js | 15 ++-- web/components/llm-request-detail.js | 36 ++++++---- web/components/llm-requests.js | 18 +++-- web/components/marketplace.js | 8 ++- web/components/models-hub.js | 40 ++++++----- web/components/models-image.js | 18 ++--- web/components/models-llm.js | 20 +++--- web/components/models-transcribe.js | 16 +++-- web/components/models-tts.js | 18 ++--- web/components/plugin-catalog.js | 6 +- web/components/plugin-detail.js | 8 +-- web/components/profile-page.js | 6 +- web/components/projects/project-board.js | 12 ++-- web/components/projects/project-list.js | 14 ++-- web/components/roles-page.js | 10 +-- web/components/shared-folders.js | 10 +-- web/components/system-agents.js | 32 +++++---- web/components/tasks/cron.js | 10 +-- web/components/tasks/history.js | 10 +-- web/components/tasks/running.js | 10 +-- web/components/tasks/scheduled.js | 10 +-- web/components/tool-detail-page.js | 8 +-- web/components/users-page.js | 20 +++--- web/css/agent-inbox.css | 25 ------- web/css/agents.css | 8 +-- web/css/approval-groups.css | 38 ---------- web/css/config.css | 9 ++- web/css/llm-providers.css | 38 ---------- web/css/llm-requests.css | 56 ++------------- web/css/models-hub.css | 5 +- web/css/models-llm.css | 55 --------------- web/css/page-header.css | 90 ++++++++++++++++++++++++ web/css/projects/base.css | 20 ------ web/css/system-agents.css | 22 +----- web/css/tasks/base.css | 20 ------ web/css/users-roles.css | 12 ---- web/index.html | 1 + 45 files changed, 389 insertions(+), 492 deletions(-) create mode 100644 web/css/page-header.css diff --git a/web/components/agent-inbox.js b/web/components/agent-inbox.js index 996a952..04f560a 100644 --- a/web/components/agent-inbox.js +++ b/web/components/agent-inbox.js @@ -63,14 +63,18 @@ export class AgentInboxPage extends I18nMixin(InboxMixin(LightElement)) { return html`
-
-
- ${t('nav.inbox')} - ${total > 0 ? html`${total}` : nothing} -
- +
+
+

+ ${t('nav.inbox')} + ${total > 0 ? html`${total}` : nothing} +

+
+
+ +
${this._renderInboxSection()}
diff --git a/web/components/agents.js b/web/components/agents.js index d729795..a646958 100644 --- a/web/components/agents.js +++ b/web/components/agents.js @@ -285,19 +285,23 @@ export class AgentsPage extends LightElement { ${this._detail ? this._renderDetail() : html` -
-

${t('agents.title')}

-
- -
-
-
-

${unsafeHTML(t('agents.banner.title'))}

-

${unsafeHTML(t('agents.banner.text'))}

+
+
+

${t('agents.title')}

- ${this._renderList()} +
+
+
+
+

${unsafeHTML(t('agents.banner.title'))}

+

${unsafeHTML(t('agents.banner.text'))}

+
+
+ + ${this._renderList()} +
` }
diff --git a/web/components/approval-groups.js b/web/components/approval-groups.js index 6439105..ef04e27 100644 --- a/web/components/approval-groups.js +++ b/web/components/approval-groups.js @@ -356,12 +356,14 @@ export class ApprovalGroupsPage extends LightElement { render() { return html`
-
-

- ${t('security.title')} -

-
- ${this._groups.length === 1 ? t('security.group_count', { n: this._groups.length }) : t('security.group_count_plural', { n: this._groups.length })} +
+
+

+ ${t('security.title')} +

+
+
+ ${this._groups.length === 1 ? t('security.group_count', { n: this._groups.length }) : t('security.group_count_plural', { n: this._groups.length })} diff --git a/web/components/approval-rules.js b/web/components/approval-rules.js index 1f2e1cc..c0776e2 100644 --- a/web/components/approval-rules.js +++ b/web/components/approval-rules.js @@ -1042,20 +1042,21 @@ export class ApprovalRulesPage extends LightElement { return html`
-
- -

- ${isDefault ? html`${t('approval.header.default_badge')}` : nothing} - ${group.name} -

-
- ${totalRules === 1 ? t('approval.header.rule_count', { n: totalRules }) : t('approval.header.rule_count_plural', { n: totalRules })} +
+
+ +

+ ${isDefault ? html`${t('approval.header.default_badge')}` : nothing} + ${group.name} +

+
+
+ ${totalRules === 1 ? t('approval.header.rule_count', { n: totalRules }) : t('approval.header.rule_count_plural', { n: totalRules })}
diff --git a/web/components/config-page.js b/web/components/config-page.js index c18805b..d894363 100644 --- a/web/components/config-page.js +++ b/web/components/config-page.js @@ -116,10 +116,13 @@ export class ConfigPage extends LightElement { render() { return html`
-
-

${t('config.title')}

+
+
+

${t('config.title')}

+
+
${this._error ? html`
${this._error}
` : nothing} @@ -156,6 +159,7 @@ export class ConfigPage extends LightElement {
+
`; } } diff --git a/web/components/connector-detail.js b/web/components/connector-detail.js index 62a8e07..f741e67 100644 --- a/web/components/connector-detail.js +++ b/web/components/connector-detail.js @@ -399,12 +399,12 @@ export class ConnectorDetailPage extends LightElement { _renderHeader() { const title = this._entry?.friendly_name || this._glob?.friendly_name || this._name || 'Connector'; return html` -
-
- -

${title}

+

${title}

`; } diff --git a/web/components/connectors.js b/web/components/connectors.js index 6769451..6894d3f 100644 --- a/web/components/connectors.js +++ b/web/components/connectors.js @@ -344,9 +344,11 @@ export class ConnectorsPage extends LightElement { return html`
-
-

${t('connectors.title')}

-
+
+
+

${t('connectors.title')}

+
+
${this._isAdmin ? html` -

+

${t('connectors.new.title')}

diff --git a/web/components/file-viewer-page.js b/web/components/file-viewer-page.js index e13cce3..31e8f84 100644 --- a/web/components/file-viewer-page.js +++ b/web/components/file-viewer-page.js @@ -57,12 +57,12 @@ export class FileViewerPage extends FileViewerBase { if (!this._open) return nothing; return html`
-
-
- -

${this._path ?? ''}

+

${this._path ?? ''}

${this._renderModeToggle('btn btn-sm btn-outline-secondary fv-download-btn')} diff --git a/web/components/llm-providers.js b/web/components/llm-providers.js index 4fc7a85..efe9905 100644 --- a/web/components/llm-providers.js +++ b/web/components/llm-providers.js @@ -307,14 +307,17 @@ export class LlmProvidersPage extends LightElement { render() { return html`
-
-

- ${t('providers.title')} -

-
- ${t('providers.count', { n: this._providers.length })} +
+
+

+ ${t('providers.title')} +

+
+
+ ${t('providers.count', { n: this._providers.length })}
diff --git a/web/components/llm-request-detail.js b/web/components/llm-request-detail.js index 8b90b80..9383406 100644 --- a/web/components/llm-request-detail.js +++ b/web/components/llm-request-detail.js @@ -540,10 +540,12 @@ export class LlmRequestDetail extends LightElement { render() { if (this._loading) return html`
-
- +
+
+ +
@@ -554,10 +556,12 @@ export class LlmRequestDetail extends LightElement { if (this._error) return html`
-
- +
+
+ +
@@ -586,15 +590,16 @@ export class LlmRequestDetail extends LightElement { return html`
-
- - - ${t('llmr.detail.request')} #${d.id} - +
+
+ +

${t('llmr.detail.request')} #${d.id}

+
+
${this._renderStatBar(d)} ${payloadMissing ? html` @@ -643,6 +648,7 @@ export class LlmRequestDetail extends LightElement {
` ) : nothing} +
`; } diff --git a/web/components/llm-requests.js b/web/components/llm-requests.js index 5029163..fc3d776 100644 --- a/web/components/llm-requests.js +++ b/web/components/llm-requests.js @@ -283,13 +283,19 @@ export class LlmRequestsPage extends LightElement { return html`
-
-

${t('llmr.title')}

- ${t('llmr.total', { n: this._total })} +
+
+

${t('llmr.title')}

+
+
+ ${t('llmr.total', { n: this._total })} +
+
+
+ ${this._renderFilters()} + ${this._renderTable()} + ${this._renderPagination()}
- ${this._renderFilters()} - ${this._renderTable()} - ${this._renderPagination()}
`; } diff --git a/web/components/marketplace.js b/web/components/marketplace.js index 3dcf914..a074d52 100644 --- a/web/components/marketplace.js +++ b/web/components/marketplace.js @@ -145,9 +145,11 @@ export class MarketplacePage extends LightElement { return html`
-
-

${t('marketplace.title')}

-
+
+
+

${t('marketplace.title')}

+
+
diff --git a/web/components/models-hub.js b/web/components/models-hub.js index e6e2ae9..59d8a70 100644 --- a/web/components/models-hub.js +++ b/web/components/models-hub.js @@ -126,23 +126,29 @@ export class ModelsHubPage extends LightElement { return html`
-

${t('models.hub.title')}

-

- ${t('models.hub.subtitle')} -

-
- ${CARDS.map(card => html` - - `)} +
+
+

${t('models.hub.title')}

+
+
+
+

+ ${t('models.hub.subtitle')} +

+
+ ${CARDS.map(card => html` + + `)} +
`; diff --git a/web/components/models-image.js b/web/components/models-image.js index 06b5b3b..545b08a 100644 --- a/web/components/models-image.js +++ b/web/components/models-image.js @@ -298,21 +298,23 @@ export class ModelsImageSection extends LightElement { return html`
-
-
+
+
${this.onback ? html` - ` : ''}
-

${t('models.image.title')}

- ${t('models.hub.count.many', { n: this._models.length })} +

${t('models.image.title')}

+ ${t('models.hub.count.many', { n: this._models.length })}
- +
+ +
${!canAdd ? html` diff --git a/web/components/models-llm.js b/web/components/models-llm.js index 5bdd975..51ba3a7 100644 --- a/web/components/models-llm.js +++ b/web/components/models-llm.js @@ -762,22 +762,24 @@ export class ModelsLlmSection extends LightElement { render() { return html`
-
-
+
+
${this.onback ? html` - ` : ''}
-

${t('models.llm.title')}

- ${t('models.hub.count.many', { n: this._models.length })} +

${t('models.llm.title')}

+ ${t('models.hub.count.many', { n: this._models.length })}
- +
+ +
${this._providers.length === 0 ? html` diff --git a/web/components/models-transcribe.js b/web/components/models-transcribe.js index 46d7d86..fb24713 100644 --- a/web/components/models-transcribe.js +++ b/web/components/models-transcribe.js @@ -361,18 +361,20 @@ export class ModelsTranscribeSection extends LightElement { return html`
-
-
+
+
${this.onback ? html` - ` : ''} -

${t('models.transcribe.title')}

+

${t('models.transcribe.title')}

+
+
+
-
${!canAdd ? html` diff --git a/web/components/models-tts.js b/web/components/models-tts.js index 95a48f2..8205969 100644 --- a/web/components/models-tts.js +++ b/web/components/models-tts.js @@ -424,21 +424,23 @@ export class ModelsTtsSection extends LightElement { return html`
-
-
+
+
${this.onback ? html` - ` : ''}
-

${t('models.tts.title')}

- ${t('models.hub.count.many', { n: this._models.length })} +

${t('models.tts.title')}

+ ${t('models.hub.count.many', { n: this._models.length })}
- +
+ +
${!canAdd ? html` diff --git a/web/components/plugin-catalog.js b/web/components/plugin-catalog.js index ea2c2fc..5f00b7d 100644 --- a/web/components/plugin-catalog.js +++ b/web/components/plugin-catalog.js @@ -95,8 +95,10 @@ export class PluginCatalogPage extends LightElement { return html`
-
-

${t('nav.plugins')}

+
+
+

${t('nav.plugins')}

+
${this._error ? html` diff --git a/web/components/plugin-detail.js b/web/components/plugin-detail.js index f4aa6c9..d30df4e 100644 --- a/web/components/plugin-detail.js +++ b/web/components/plugin-detail.js @@ -198,12 +198,12 @@ export class PluginDetailPage extends LightElement { _renderHeader() { return html` -
-
- -

+

${this._plugin?.name || this._id || 'Plugin'}

diff --git a/web/components/profile-page.js b/web/components/profile-page.js index f166256..6aa0275 100644 --- a/web/components/profile-page.js +++ b/web/components/profile-page.js @@ -136,8 +136,10 @@ export class ProfilePage extends I18nMixin(LightElement) { return html`
-
-

${t('profile.title')}

+
+
+

${t('profile.title')}

+
diff --git a/web/components/projects/project-board.js b/web/components/projects/project-board.js index 8aded50..7f2a589 100644 --- a/web/components/projects/project-board.js +++ b/web/components/projects/project-board.js @@ -246,19 +246,19 @@ export class ProjectBoardSection extends LightElement { return html`
-
-
- -

+

${this._project.name}

${this._project.is_owner ? html`${t('projects.badge.owned')}` : html`${t('projects.badge.shared_by', { name: this._project.owner_name })}`}
-
+
diff --git a/web/components/projects/project-list.js b/web/components/projects/project-list.js index f900935..75435ad 100644 --- a/web/components/projects/project-list.js +++ b/web/components/projects/project-list.js @@ -194,11 +194,15 @@ export class ProjectListSection extends LightElement { render() { return html`
-
-

${t('projects.title')}

- +
+
+

${t('projects.title')}

+
+
+ +
${this._error ? html` diff --git a/web/components/roles-page.js b/web/components/roles-page.js index d87ae3c..748c5f9 100644 --- a/web/components/roles-page.js +++ b/web/components/roles-page.js @@ -282,10 +282,12 @@ export class RolesPage extends LightElement { return html`
-
-

${t('roles.title')}

-
- ${roles.length === 1 ? t('roles.count', { n: roles.length }) : t('roles.count_plural', { n: roles.length })} +
+
+

${t('roles.title')}

+
+
+ ${roles.length === 1 ? t('roles.count', { n: roles.length }) : t('roles.count_plural', { n: roles.length })} diff --git a/web/components/shared-folders.js b/web/components/shared-folders.js index a35faa3..58a0bc4 100644 --- a/web/components/shared-folders.js +++ b/web/components/shared-folders.js @@ -185,10 +185,12 @@ export class SharedFoldersPage extends LightElement { return html`
-
-

${t('sf.title')}

-
- +
+
+

${t('sf.title')}

+
+
+ ${folders.length === 1 ? t('sf.count', { n: folders.length }) : t('sf.count_plural', { n: folders.length })} +
+
+

${t('system_agents.title')}

+
+
+ ${t('system_agents.total', { n: this._total })} + +
+
+
+

${t('system_agents.subtitle')}

+ ${this._renderTabs()} + ${this._renderAgentPanel()} + ${this._renderTable()} + ${this._renderPagination()}
-

${t('system_agents.subtitle')}

- ${this._renderTabs()} - ${this._renderAgentPanel()} - ${this._renderTable()} - ${this._renderPagination()}
`; } diff --git a/web/components/tasks/cron.js b/web/components/tasks/cron.js index 13a2c17..51293d3 100644 --- a/web/components/tasks/cron.js +++ b/web/components/tasks/cron.js @@ -122,10 +122,12 @@ export class CronJobsSection extends LightElement { render() { return html`
-
-

${t('cron.title')}

-
- ${t(this._jobs.length === 1 ? 'cron.count_one' : 'cron.count_other', { n: this._jobs.length })} +
+
+

${t('cron.title')}

+
+
+ ${t(this._jobs.length === 1 ? 'cron.count_one' : 'cron.count_other', { n: this._jobs.length })}
diff --git a/web/components/tasks/history.js b/web/components/tasks/history.js index 0fa916c..ddf4555 100644 --- a/web/components/tasks/history.js +++ b/web/components/tasks/history.js @@ -83,10 +83,12 @@ export class TaskHistorySection extends LightElement { render() { return html`
-
-

History

-
- ${this._runs.length} run${this._runs.length !== 1 ? 's' : ''} +
+
+

History

+
+
+ ${this._runs.length} run${this._runs.length !== 1 ? 's' : ''}
diff --git a/web/components/tasks/running.js b/web/components/tasks/running.js index eb28207..01f859a 100644 --- a/web/components/tasks/running.js +++ b/web/components/tasks/running.js @@ -124,10 +124,12 @@ export class RunningTasksSection extends LightElement { void this._tick; // drives re-render every second for live elapsed time return html`
-
-

Running Tasks

-
- ${this._jobs.length} running +
+
+

Running Tasks

+
+
+ ${this._jobs.length} running
diff --git a/web/components/tasks/scheduled.js b/web/components/tasks/scheduled.js index 9bc8abb..6a9550a 100644 --- a/web/components/tasks/scheduled.js +++ b/web/components/tasks/scheduled.js @@ -99,10 +99,12 @@ export class ScheduledTasksSection extends LightElement { render() { return html`
-
-

Scheduled Tasks

-
- ${this._jobs.length} task${this._jobs.length !== 1 ? 's' : ''} +
+
+

Scheduled Tasks

+
+
+ ${this._jobs.length} task${this._jobs.length !== 1 ? 's' : ''}
diff --git a/web/components/tool-detail-page.js b/web/components/tool-detail-page.js index dd21534..501c87c 100644 --- a/web/components/tool-detail-page.js +++ b/web/components/tool-detail-page.js @@ -74,12 +74,12 @@ export class ToolDetailPage extends LightElement { const si = tl ? (STATUS_ICON[tl.status] || STATUS_ICON.done) : null; return html`
-
-
- -

+

${tl ? html` ${si ? html`` : nothing} ${tl.display_name || tl.name} diff --git a/web/components/users-page.js b/web/components/users-page.js index 383ded6..c06a6e2 100644 --- a/web/components/users-page.js +++ b/web/components/users-page.js @@ -342,10 +342,12 @@ export class UsersPage extends LightElement { return html`
-
-

${t('users.title')}

-
- ${t(users.length === 1 ? 'users.count_one' : 'users.count_other', { n: users.length })} +
+
+

${t('users.title')}

+
+
+ ${t(users.length === 1 ? 'users.count_one' : 'users.count_other', { n: users.length })} @@ -433,9 +435,9 @@ export class UsersPage extends LightElement { _renderDetailHeader(u) { return html` -
-
- ${u ? html` @@ -443,7 +445,7 @@ export class UsersPage extends LightElement { ${(u.display_name || u.username).charAt(0).toUpperCase()}
-

+

${u.display_name || u.username}

${u.username} @@ -452,7 +454,7 @@ export class UsersPage extends LightElement { ${u.active ? nothing : html`${t('users.badge.inactive')}`}
` - : html`

${t('users.title')}

`} + : html`

${t('users.title')}

`}
`; } diff --git a/web/css/agent-inbox.css b/web/css/agent-inbox.css index 66d5454..aea0e17 100644 --- a/web/css/agent-inbox.css +++ b/web/css/agent-inbox.css @@ -16,26 +16,6 @@ agent-inbox-page { width: 100%; } -.page-panel-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 14px 20px; - min-height: 54px; - border-bottom: 1px solid var(--bs-border-color); - background: var(--bs-tertiary-bg); - flex-shrink: 0; -} - -.page-panel-header h5 { - margin: 0; - font-weight: 700; - font-size: 1.05rem; - display: flex; - align-items: center; - gap: 8px; -} - /* ── Refresh button ── */ .inbox-refresh-btn { @@ -118,11 +98,6 @@ agent-inbox-page { /* ── Mobile tweaks ── */ @media (max-width: 600px) { - .page-panel-header { - padding: 12px 14px; - min-height: 50px; - } - .inbox-grid { grid-template-columns: 1fr; padding: 12px; diff --git a/web/css/agents.css b/web/css/agents.css index 6cd33f1..e6616db 100644 --- a/web/css/agents.css +++ b/web/css/agents.css @@ -5,7 +5,6 @@ agents-page { flex-direction: column; flex: 1; overflow-y: auto; - padding: 1.5rem 2rem; background: var(--bs-body-bg); } @@ -15,11 +14,8 @@ agents-page { width: 100%; } -.agents-page-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 0.75rem; +.agents-body { + padding: 1.5rem 2rem; } /* ── Info banner ─────────────────────────────────────────────────────────── */ diff --git a/web/css/approval-groups.css b/web/css/approval-groups.css index 6a9cb84..d3ed6a6 100644 --- a/web/css/approval-groups.css +++ b/web/css/approval-groups.css @@ -35,39 +35,6 @@ approval-groups-page { max-width: 100%; } -.apr-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 14px 20px; - min-height: 54px; - border-bottom: 1px solid var(--bs-border-color); - background: var(--bs-tertiary-bg); - flex-shrink: 0; - gap: 12px; -} - -.apr-title { - margin: 0; - font-weight: 700; - font-size: 1.05rem; - display: flex; - align-items: center; - gap: 8px; -} - -.apr-header-right { - display: flex; - align-items: center; - gap: 10px; -} - -.apr-header-count { - font-size: 0.76rem; - font-weight: 500; - color: var(--bs-secondary-color); -} - /* ── Card list ── */ .apr-card-list { @@ -417,11 +384,6 @@ approval-groups-page { /* ── Mobile ── */ @media (max-width: 600px) { - .apr-header { - padding: 10px 14px; - min-height: 50px; - } - .apr-card-list { padding: 10px 12px; gap: 8px; diff --git a/web/css/config.css b/web/css/config.css index 6b713c8..2827d7d 100644 --- a/web/css/config.css +++ b/web/css/config.css @@ -3,7 +3,6 @@ config-page { flex-direction: column; flex: 1; overflow-y: auto; - padding: 1.5rem 2rem; background: var(--bs-body-bg); } @@ -13,11 +12,11 @@ config-page { width: 100%; } -.config-page-header { +.config-body { + padding: 1.5rem 2rem; display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 0.75rem; + flex-direction: column; + gap: 0.75rem; } .config-sets { diff --git a/web/css/llm-providers.css b/web/css/llm-providers.css index 351c5d2..dfdf343 100644 --- a/web/css/llm-providers.css +++ b/web/css/llm-providers.css @@ -8,39 +8,6 @@ max-width: 100%; } -.pv-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 14px 20px; - min-height: 54px; - border-bottom: 1px solid var(--bs-border-color); - background: var(--bs-tertiary-bg); - flex-shrink: 0; - gap: 12px; -} - -.pv-title { - margin: 0; - font-weight: 700; - font-size: 1.05rem; - display: flex; - align-items: center; - gap: 8px; -} - -.pv-header-right { - display: flex; - align-items: center; - gap: 10px; -} - -.pv-header-count { - font-size: 0.76rem; - font-weight: 500; - color: var(--bs-secondary-color); -} - /* ── Card list ── */ .pv-card-list { @@ -297,11 +264,6 @@ /* ── Mobile ── */ @media (max-width: 600px) { - .pv-header { - padding: 10px 14px; - min-height: 50px; - } - .pv-card-list { padding: 10px 12px; gap: 8px; diff --git a/web/css/llm-requests.css b/web/css/llm-requests.css index a0b5355..649a694 100644 --- a/web/css/llm-requests.css +++ b/web/css/llm-requests.css @@ -10,44 +10,19 @@ llm-requests-page { } .llmr-page { - padding: 1.5rem 2rem; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; +} + +.llmr-body { + padding: 1.5rem 2rem; + display: flex; + flex-direction: column; gap: 1.25rem; } -/* ── Header ─────────────────────────────────────────────────────────────────── */ - -.llmr-header { - display: flex; - align-items: center; - gap: 0.75rem; - border-bottom: 1px solid var(--bs-border-color); - padding-bottom: 1rem; -} - -.llmr-title { - font-size: 1.25rem; - font-weight: 600; - margin: 0; - display: flex; - align-items: center; - gap: 0.5rem; -} - -.llmr-title i { color: var(--bs-secondary-color); } - -.llmr-total-badge { - margin-left: auto; - font-size: 0.78rem; - color: var(--bs-secondary-color); - background: var(--bs-tertiary-bg); - padding: 2px 10px; - border-radius: 20px; -} - /* ── Filters ─────────────────────────────────────────────────────────────────── */ .llmr-filters { @@ -197,24 +172,7 @@ llm-requests-page { .llmr-row--clickable { cursor: pointer; } .llmr-row--clickable:hover td { background: var(--bs-tertiary-bg); } -/* ── Detail — back bar ───────────────────────────────────────────────────────── */ - -.llmr-detail-back { - display: flex; - align-items: center; - gap: 0.75rem; - padding-bottom: 1rem; - border-bottom: 1px solid var(--bs-border-color); -} - -.llmr-detail-title { - font-size: 1rem; - font-weight: 600; - color: var(--bs-body-color); - display: flex; - align-items: center; - gap: 0.4rem; -} +/* ── Detail ─────────────────────────────────────────────────────────────────── */ .llmr-detail-id { font-family: var(--bs-font-monospace); diff --git a/web/css/models-hub.css b/web/css/models-hub.css index 38b191f..94960bc 100644 --- a/web/css/models-hub.css +++ b/web/css/models-hub.css @@ -1,10 +1,13 @@ /* ── Models hub landing page ────────────────────────────────────────────────── */ .models-hub { - padding: 2rem 2.5rem; width: 100%; } +.models-hub-body { + padding: 2rem 2.5rem; +} + .models-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); diff --git a/web/css/models-llm.css b/web/css/models-llm.css index 3a0965f..ae48094 100644 --- a/web/css/models-llm.css +++ b/web/css/models-llm.css @@ -10,56 +10,6 @@ height: 100%; } -.llm-page-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 14px 20px; - min-height: 54px; - border-bottom: 1px solid var(--bs-border-color); - background: var(--bs-tertiary-bg); - flex-shrink: 0; - gap: 12px; -} - -.llm-header-left { - display: flex; - align-items: center; - gap: 10px; - min-width: 0; -} - -.back-btn { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - padding: 0 !important; - border-radius: 6px !important; - flex-shrink: 0; -} - -.back-btn i { - font-size: 1rem; - line-height: 1; -} - -.llm-page-title { - font-size: 1.05rem; - font-weight: 700; - margin: 0; - display: flex; - align-items: center; - gap: 8px; -} - -.llm-page-count { - font-size: 0.76rem; - color: var(--bs-secondary-color); - font-weight: 500; -} - /* ── Card list ── */ .llm-card-list { @@ -291,11 +241,6 @@ /* ── Mobile tweaks ── */ @media (max-width: 600px) { - .llm-page-header { - padding: 10px 14px; - min-height: 50px; - } - .llm-card-list { padding: 10px 12px; gap: 8px; diff --git a/web/css/page-header.css b/web/css/page-header.css new file mode 100644 index 0000000..ac7c5b2 --- /dev/null +++ b/web/css/page-header.css @@ -0,0 +1,90 @@ +/* ── Shared page header bar ───────────────────────────────────────────────── + The one canonical header for every full-page view: optional back button, + title, right-side actions. Replaces the former per-page duplicates + (.page-panel-header, .project-page-header, .task-page-header, + .llm-page-header, .um-header top bars, .apr-header, .llmr-header, + .pv-header, .sa-header, .config-page-header, .agents-page-header). + + Markup contract: + +
+
+ [] +

…

+
+
+ […] [buttons…] +
+
+ + Sticky so it stays pinned on pages whose container scrolls. */ + +.page-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 14px 20px; + min-height: 54px; + border-bottom: 1px solid var(--bs-border-color); + background: var(--bs-tertiary-bg); + flex-shrink: 0; + position: sticky; + top: 0; + z-index: 20; +} + +.page-header-left { + display: flex; + align-items: center; + gap: 10px; + min-width: 0; +} + +.page-header-back { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0 !important; + border-radius: 6px !important; + flex-shrink: 0; +} + +.page-header-back i { + font-size: 1rem; + line-height: 1; +} + +.page-header-title { + margin: 0; + font-weight: 700; + font-size: 1.05rem; + display: flex; + align-items: center; + gap: 8px; + min-width: 0; +} + +.page-header-actions { + display: flex; + align-items: center; + gap: 14px; + margin-left: auto; + flex-shrink: 0; +} + +.page-header-count { + font-size: 0.82rem; + color: var(--bs-secondary-color); + font-weight: 500; + white-space: nowrap; +} + +@media (max-width: 600px) { + .page-header { + padding: 10px 14px; + min-height: 50px; + } +} diff --git a/web/css/projects/base.css b/web/css/projects/base.css index cf2ba29..5608e60 100644 --- a/web/css/projects/base.css +++ b/web/css/projects/base.css @@ -8,26 +8,6 @@ width: 100%; } -.project-page-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 14px 20px; - min-height: 54px; - border-bottom: 1px solid var(--bs-border-color); - background: var(--bs-tertiary-bg); - flex-shrink: 0; -} - -.project-page-title { - margin: 0; - font-weight: 700; - font-size: 1.05rem; - display: flex; - align-items: center; - gap: 8px; -} - /* ── Grid ── */ .project-grid { diff --git a/web/css/system-agents.css b/web/css/system-agents.css index 274f2b8..4cfe7ef 100644 --- a/web/css/system-agents.css +++ b/web/css/system-agents.css @@ -9,29 +9,11 @@ flex: 1; min-height: 0; width: 100%; - padding: 1.5rem; overflow-y: auto; } -.sa-header { - display: flex; - align-items: baseline; - gap: 0.75rem; - margin-bottom: 0.35rem; +.sa-body { + padding: 1.5rem; } -.sa-title { - font-size: 1.2rem; - font-weight: 600; - margin: 0; -} -.sa-total-badge { - font-size: 0.75rem; - color: var(--bs-secondary-color); - background: var(--bs-tertiary-bg); - border: 1px solid var(--bs-border-color); - border-radius: 1rem; - padding: 0.1rem 0.6rem; -} -.sa-refresh-btn { margin-left: auto; } .sa-subtitle { font-size: 0.85rem; color: var(--bs-secondary-color); diff --git a/web/css/tasks/base.css b/web/css/tasks/base.css index a7b2a72..aa58152 100644 --- a/web/css/tasks/base.css +++ b/web/css/tasks/base.css @@ -8,26 +8,6 @@ width: 100%; } -.task-page-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 14px 20px; - min-height: 54px; - border-bottom: 1px solid var(--bs-border-color); - background: var(--bs-tertiary-bg); - flex-shrink: 0; -} - -.task-page-title { - margin: 0; - font-weight: 700; - font-size: 1.05rem; - display: flex; - align-items: center; - gap: 8px; -} - /* ── Empty state ── */ .task-empty { diff --git a/web/css/users-roles.css b/web/css/users-roles.css index 0d4cdc5..a3e86e6 100644 --- a/web/css/users-roles.css +++ b/web/css/users-roles.css @@ -21,18 +21,6 @@ margin: 0; } -.um-header-right { - margin-left: auto; - display: flex; - align-items: center; - gap: 14px; -} - -.um-header-count { - font-size: .82rem; - color: var(--placeholder-color); -} - .um-table-wrap { padding: 0 24px 24px; } diff --git a/web/index.html b/web/index.html index 2956340..4676fe8 100644 --- a/web/index.html +++ b/web/index.html @@ -47,6 +47,7 @@ +