AI-Cognitive-Leap/agnes-the-ai-analyst
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
agnes-the-ai-analyst/app/web/static/style.css
minasarustamyan dc5e0e0d11
Marketplace UX overhaul: rich plugin/skill/agent detail + filename rename (#251) 
* Rename agnes-metadata.json to marketplace-metadata.json

Curated marketplace enrichment file (.claude-plugin/agnes-metadata.json)
becomes marketplace-metadata.json. Clean cut, no fallback — curators of
upstream marketplace repos must rename the file on their side.

Python API renames mirror the file rename: read_agnes_metadata →
read_marketplace_metadata, AGNES_METADATA_REL → MARKETPLACE_METADATA_REL,
AGNES_METADATA_MAX_BYTES → MARKETPLACE_METADATA_MAX_BYTES. Synth Claude
Code marketplace strip rule (.agnes/** + the metadata file) follows the
new filename.

* Marketplace detail polish: window cover + 715:310 aspect + helper alignment

- Plugin & item (skill/agent) detail hero: 160x160 square cover replaced
  with a macOS-style window frame (3 traffic-light dots + titlebar label
  showing the entity name). Body is constrained to 715:310 so curator-
  uploaded covers no longer crop to a square. Window is 380px wide; meta
  column and absolutely-positioned top-right install/remove actions stay
  put. Fallback when no cover_photo_url (translucent gradient + PL/SK/AG
  initials) is unchanged, just inside the window body.

- Inner skill/agent cards in the plugin detail's Internal structure
  section adopt the same 715:310 aspect (was fixed 78px tall). No window
  chrome on inner cards — just the matching proportions so covers read
  consistently across hero, grid tiles, and listing cards.

- Curated nested item helper text ("This skill is part of ... — add the
  bundle to your stack to use it") now stacks UNDER the "Open parent
  plugin" button instead of being a side-by-side flex sibling in the
  actions-row. Added align-self: flex-end so the 260px helper box
  anchors at the right edge of the 300px actions column, matching the
  button's right edge.

* Marketplace My tab: surface the same category + type filters as Flea

- Frontend: mp-cat-row and mp-type-row now show on tab=my (previously
  hidden — type was flea-only, category was flea/curated-only). Curated
  browse stays plugin-only and continues to hide the type pills.
  fetchOne() sends the `type` param for tab=my too, so the items
  endpoint's existing my-branch filter actually receives it.

- Backend categories endpoint, tab=my branch: when the type filter is
  set to skill/agent, skip counting curated subscriptions. Curated
  plugins are always type='plugin', so they wouldn't survive the items
  endpoint's type filter; including them in the category counts made
  the pill numbers overstate what users could actually see in the
  grid. type=None or type='plugin' keeps the previous behaviour.

- CHANGELOG entry under [Unreleased].

* Marketplace plugin detail: render rich content from marketplace-metadata.json

Adds five optional plugin-level fields to marketplace-metadata.json and
renders them on the curated plugin detail page + listing card:

* display_name — friendly h1 / listing-card name / mac-window titlebar
  label (overrides the technical plugin id)
* tagline — punchy 1-line value prop for the hero subtitle and the
  listing card description (replacing the verbose marketplace.json
  description on cards)
* description — multi-paragraph markdown body, server-side rendered
  through markdown-it-py and sanitized through nh3 with a
  description-scoped allowlist (no iframes / no raw HTML / no
  javascript: links). Powers the "What it does" panel.
* use_cases[] — {title, description, prompt} entries that render as a
  3-column "When to use it" card grid; each card shows the literal
  prompt as a code chip so users can copy-paste into Claude Code.
* sample_interaction — {user, assistant} dialog rendered in a Claude
  Code-style dark Catppuccin Mocha transcript panel: monospace user
  row with a green ">" prompt indicator + sans-serif assistant body
  with markdown formatting (peach bold, yellow italic, pink inline
  code, mantle-dark fenced code blocks).

All five fields are optional; UI sections only render when populated,
so plugins without enrichment look identical to before. Fields are
read on-demand from the working tree (cached by mtime per marketplace
slug) so curator edits land at the next request without waiting for
a sync cycle — same pattern as the existing inner-skill/agent
enrichment path. No DB schema bump.

Skill / agent rich-content rendering is deferred to a later phase
(needs a source-of-truth decision: extend plugin.yml? LLM-generate
from SKILL.md / agent.md?). The schema accepts the same fields at
skill/agent level today for forward compatibility but the UI ignores
them for now.

Also: stripped a stale `background-color: var(--bg)` from the global
`code` rule in style.css (was making inline code visually disappear
on the page background).

* Skill / agent detail: render rich content from marketplace-metadata.json

Brings the skill/agent detail pages to parity with the plugin detail
page. Same rich-content schema (display_name, tagline, description as
markdown, use_cases[], sample_interaction) plus two per-item additions:

* invocation — curator-provided literal command string. When set,
  overrides the computed "<manifest_name>:<inner_name>" chip and
  cleanly supports both "/" skill prefix and "@" agent prefix (the
  hardcoded "/" in the chip markup is hidden when the curator provides
  the invocation, so /grpn-eng:query <q> and @grpn-eng:cto-architect
  both render correctly).
* when_to_use — markdown disambiguation block ("Use this for X. For
  similar Y, see /other-skill") rendered into a new "When to use this"
  panel below the Example section.

Skill / agent category is now per-item overridable in
marketplace-metadata.json. When absent, the API keeps the parent
plugin's category as the badge so existing items don't lose their
category until curators opt in to per-item categorization.

The new "Example" Q&A panel uses the same Claude Code-style dark
Catppuccin Mocha transcript treatment as the plugin detail —
monospace user row with a green ">" prompt indicator + sans-serif
assistant body with markdown formatting.

All new fields are optional and read on-demand from the working tree.
Skills / agents whose marketplace-metadata.json doesn't carry rich
content render exactly the same way they did before (frontmatter
description + computed slash command + cover from existing v32
enrichment). No DB schema bump.

* Fix TypeError in skill / agent detail when curator sets per-item category

`curated_skill_detail` and `curated_agent_detail` were passing both
`**parent` (from `_curated_inner_parent_fields`, which returns the
parent plugin's category as a fallback) and `**enrichment` (from
`_curated_inner_enrichment`, which returns the per-item category
override when the curator set one) into `InnerDetailResponse(...)`.

Python function-call kwargs unpacking with overlapping keys raises
`TypeError: got multiple values for keyword argument 'category'`
— it doesn't merge like a literal dict does. The bug only surfaced
when the marketplace-metadata.json carried a `category` field at
skill / agent level (curator opting into per-item categorization);
items without that override hit the endpoint cleanly because only
parent provided the key.

Fix: build `merged = {**parent, **enrichment}` first (literal-dict
syntax DOES merge, with the right-hand-side winning) and unpack the
merged dict. Curator override still wins via the merge order, and
the same pattern is future-proof for any other field that lands in
both layers later.

Plus a regression test in test_marketplace_metadata.py asserting
that the inner-resolver carries `category` for downstream merging.

* Marketplace detail: tolerate partial curator JSON

Server constructed UseCase / SampleInteraction via raw dict indexing
(uc["title"], sample["assistant"]), so a curator commit missing any
required Pydantic field crashed the whole plugin / skill / agent detail
endpoint with a 500. Route both constructions through _safe_use_case /
_safe_sample_interaction helpers — partial input silently drops the
malformed card / section instead of breaking the page.

Regression test in test_marketplace_api.py covers the three shapes:
use_case missing a key, use_case with an empty string, and
sample_interaction with only user (no assistant). Sibling rich fields
still render.

* Address PR-251 review (must-fixes + S2/S3 polish) + release-cut 0.50.0

Five must-fixes from the review pass (3 from @cvrysanek's two-stage
review, 2 from my independent pass), plus the 0.50.0 release-cut as the
last commit on this PR per CLAUDE.md (CLAUDE.md "Release-cut belongs
to the PR" rule added in v0.49.1).

Must-fixes
----------

1. Cache eviction: bounded LRU instead of per-marketplace predicate.
   The previous predicate (`k[0] == marketplace_id and k[1] != mtime_ns`)
   only swept stale entries for the CURRENT marketplace; with N>100
   distinct marketplaces each holding one mtime key, the cap silently
   failed and memory grew linearly. Replaced with OrderedDict-backed
   bounded LRU at cap=256, drop oldest insert on overflow.
   Cache stress test pinned in test_marketplace_metadata.py.

2. Render CPU cap: per-field byte cap on description / when_to_use /
   sample_interaction.assistant via MARKETPLACE_METADATA_FIELD_MAX_BYTES
   (= 64 KiB). Without this, a 1 MiB curator markdown body × QPS =
   curator-controlled CPU burn through pure-Python markdown-it-py.
   Truncation respects UTF-8 boundaries and logs a warning so the
   curator sees the cap fire on the next sync. Test for cap +
   UTF-8-boundary preservation.

3. Inner-detail bypassed the metadata cache. _curated_inner_enrichment,
   _curated_inner_cover, and curated_detail all called
   read_marketplace_metadata directly, defeating the mtime cache the
   plugin listing already shared. Routed all three through
   _read_metadata_cached so skill/agent detail hits are O(1) re-parses
   per marketplace per mtime instead of O(QPS).

4. Truthy-vs-presence trap in plugin/inner enrichment merge. API-layer
   writers used `if resolved.get(k):` which silently dropped any
   future falsy-but-valid resolver field (bool featured=False, int
   priority=0, str category=''). Switched to presence check
   (`if k in resolved`) so the resolver is the authority on field
   presence; `{**parent, **enrichment}` merge respects whatever the
   resolver decided to ship.

5. Vendor-agnostic OSS cleanup. Removed operator-specific token
   references (/grpn-eng:, @grpn-eng:, .foundryai/) from
   src/marketplace_metadata.py docstring, app/web/templates/
   marketplace_item_detail.html JS comment, docs/curated-marketplace-
   format.md, and tests/test_marketplace_metadata.py fixtures. Replaced
   with generic /my-plugin:tool / @my-agent:role / .example/ placeholders.

CHANGELOG
---------
- New "### Fixed (PR #251 follow-ups)" section documenting all 4
  code-side must-fixes
- New "### Internal" section noting the vendor cleanup + new tests
- BREAKING bullet for the file rename now covers operator-side
  migration: running instances see plugin enrichment disappear from
  the UI until upstream curator renames + nightly sync overwrites the
  working tree; POST /api/marketplaces/{id}/sync forces refresh sooner
- Stripped /grpn-eng: leaks from the existing skill/agent rich-content
  bullet

Tests
-----
128 targeted tests pass (test_marketplace_metadata, test_marketplace_api,
test_marketplace, test_markdown_render, test_marketplace_synth_strip,
test_marketplace_filter). New tests added:
- 6 XSS regression tests on render_safe (javascript:/data:/vbscript:
  schemes via autolink, reference link, and mixed-case + positive
  http/https/mailto + noopener noreferrer rel)
- 3 byte-cap tests (truncation + UTF-8 boundary + under-cap pass-through)
- 1 cache eviction stress test (>256 marketplaces -> bounded at cap)
- 1 truthy-vs-presence resolver-contract test

Release-cut
-----------
- pyproject.toml 0.49.1 -> 0.50.0 (minor; BREAKING file rename per
  pre-1.0 CHANGELOG note: "breaking changes called out under Changed
  or Removed with the BREAKING marker")
- CHANGELOG [Unreleased] -> [0.50.0] - 2026-05-12, new empty
  [Unreleased] on top.

---------

Co-authored-by: Minas Arustamyan <arustamyan.minas@gmail.com>
Co-authored-by: ZdenekSrotyr <zdenek.srotyr@keboola.com>
2026-05-12 08:38:39 +00:00

1087 lines
19 KiB
CSS
Raw Blame History

/* Base styles */
:root {
--primary: #1a73e8;
--primary-dark: #1557b0;
--secondary: #5f6368;
--success: #34a853;
--error: #ea4335;
--warning: #fbbc05;
--bg: #f8f9fa;
--card-bg: #ffffff;
--text: #202124;
--text-light: #5f6368;
--border: #dadce0;
--radius: 8px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 24px 20px;
}
/* Dashboard */
.dashboard h2 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 24px;
color: var(--text);
}
/* Header */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
gap: 16px;
}
a.logo { text-decoration: none; color: inherit; display: block; }
a.logo:hover h1 { color: var(--primary); }
.logo h1 {
font-size: 1.375rem;
font-weight: 600;
color: var(--text);
margin: 0;
letter-spacing: -0.02em;
}
.logo .subtitle {
font-size: 0.8125rem;
color: var(--text-light);
margin-top: 2px;
}
nav {
display: flex;
align-items: center;
gap: 15px;
}
.user-info {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: var(--text-light);
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
border-radius: var(--radius);
border: none;
cursor: pointer;
transition: background-color 0.2s, box-shadow 0.2s;
}
.btn-primary {
background-color: var(--primary);
color: white;
font-weight: 500;
transition: all 0.15s ease;
}
.btn-primary:hover {
background-color: var(--primary-dark);
box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3);
}
.btn-primary:active {
transform: scale(0.98);
}
.btn-secondary {
background-color: transparent;
color: var(--secondary);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background-color: var(--bg);
}
.btn-sm {
padding: 6px 12px;
font-size: 0.75rem;
}
.btn-google {
background-color: white;
color: var(--text);
border: 1px solid var(--border);
padding: 14px 28px;
font-size: 1rem;
font-weight: 500;
width: 100%;
max-width: 280px;
transition: all 0.2s ease;
}
.btn-google:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
border-color: #c4c4c4;
background-color: #fafafa;
}
.btn-google:active {
transform: scale(0.98);
}
.google-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Cards */
.card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
border: 1px solid var(--border);
}
.card h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 16px;
color: var(--text);
letter-spacing: -0.01em;
}
.card p {
color: var(--text-light);
margin-bottom: 12px;
}
.card-error {
border-left: 4px solid var(--error);
background-color: #fff8f8;
}
.card-highlight {
border-left: 4px solid var(--primary);
background-color: #f8faff;
}
.card-ai {
border-left: 4px solid var(--success);
background-color: #f8fdf8;
}
/* Manual setup collapsible */
.manual-setup {
margin-top: 16px;
}
.manual-setup summary {
cursor: pointer;
font-size: 0.875rem;
color: var(--text-light);
padding: 8px 0;
}
.manual-setup summary:hover {
color: var(--text);
}
.manual-setup .card {
margin-top: 12px;
margin-bottom: 0;
}
.card-error h3 {
color: var(--error);
}
.error-message {
color: var(--error);
font-weight: 500;
}
/* Info grid */
.info-grid {
display: grid;
gap: 12px;
}
.info-item {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.info-item .label {
font-weight: 500;
min-width: 140px;
}
.info-item .value {
color: var(--text-light);
}
/* Badges */
.badge {
display: inline-block;
padding: 2px 8px;
font-size: 0.75rem;
font-weight: 500;
border-radius: 4px;
background-color: var(--bg);
color: var(--text-light);
margin-right: 4px;
}
.badge-analyst {
background-color: #e8f5e9;
color: #2e7d32;
}
.badge-privileged {
background-color: #fff3e0;
color: #ef6c00;
}
.badge-admin {
background-color: #e3f2fd;
color: #1565c0;
}
/* Code blocks */
code {
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
font-size: 0.875rem;
padding: 2px 6px;
border-radius: 4px;
}
.code-block {
background-color: #1a1a2e;
color: #e4e4e7;
padding: 14px 16px;
border-radius: var(--radius);
overflow-x: auto;
margin: 12px 0;
border: 1px solid #2d2d44;
}
.code-block code,
.code-block pre {
background: transparent;
padding: 0;
font-size: 0.8125rem;
color: inherit;
line-height: 1.6;
}
.code-block pre {
margin: 0;
white-space: pre-wrap;
word-break: break-all;
}
.code-block.code-compact {
padding: 10px 14px;
margin: 6px 0;
}
/* Command rows for Quick Start */
.command-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.command-row .command-label {
font-weight: 500;
font-size: 0.875rem;
min-width: 70px;
color: var(--text-light);
}
.command-row .code-block {
flex: 1;
margin: 0;
}
/* SSH config details/summary */
.ssh-config-details {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.ssh-config-details summary {
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: var(--primary);
padding: 4px 0;
user-select: none;
}
.ssh-config-details summary:hover {
color: var(--primary-dark);
}
.ssh-config-details[open] summary {
margin-bottom: 8px;
}
.ssh-config-details .help-text {
margin-top: 4px;
margin-bottom: 4px;
}
/* Forms */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: 500;
margin-bottom: 8px;
}
.form-group textarea {
width: 100%;
padding: 12px 14px;
font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
font-size: 0.8125rem;
line-height: 1.5;
border: 1px solid var(--border);
border-radius: var(--radius);
resize: vertical;
min-height: 100px;
background-color: var(--card-bg);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}
.form-group textarea::placeholder {
color: #9aa0a6;
}
.help-text {
font-size: 0.8125rem;
color: var(--text-light);
margin-top: 8px;
line-height: 1.5;
}
.help-text strong {
color: var(--text);
font-weight: 500;
}
/* Flash messages */
.flash-messages {
margin-bottom: 24px;
}
.flash {
padding: 14px 18px;
border-radius: var(--radius);
margin-bottom: 12px;
font-size: 0.875rem;
font-weight: 500;
}
.flash-success {
background-color: #e8f5e9;
color: #2e7d32;
border: 1px solid #c8e6c9;
}
.flash-error {
background-color: #ffebee;
color: #c62828;
border: 1px solid #ffcdd2;
}
.flash-info {
background-color: #e3f2fd;
color: #1565c0;
border: 1px solid #bbdefb;
}
.flash-warning {
background-color: #fff3e0;
color: #ef6c00;
border: 1px solid #ffe0b2;
}
/* Login page */
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: 20px;
}
.login-card {
background: var(--card-bg);
border-radius: 12px;
padding: 48px 40px;
text-align: center;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
max-width: 640px;
width: 100%;
border: 1px solid var(--border);
}
.login-card h2 {
margin-bottom: 12px;
font-size: 1.75rem;
font-weight: 600;
color: var(--text);
}
.login-description {
color: var(--text-light);
margin-bottom: 32px;
font-size: 1rem;
line-height: 1.5;
}
.login-steps {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
text-align: left;
}
.login-steps .step {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.875rem;
color: var(--text-light);
padding: 6px 0;
}
.login-steps .step-num,
.steps-horizontal .step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background-color: var(--primary);
color: white;
border-radius: 50%;
font-size: 0.75rem;
font-weight: 600;
flex-shrink: 0;
}
/* Inline steps for compact layout */
.steps-inline {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.steps-inline .step-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8125rem;
color: var(--text-light);
}
/* Form row for inline layout */
.form-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.form-group-inline {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 0;
}
.form-group-inline label {
margin-bottom: 0;
}
/* AI hint inline */
.ai-hint {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border);
font-size: 0.8125rem;
color: var(--text-light);
}
.ai-hint code {
display: inline;
font-size: 0.75rem;
color: var(--primary);
}
/* Manual setup compact */
.manual-content {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 12px 0;
}
.manual-content code {
font-size: 0.75rem;
}
.manual-content .help-text {
margin: 0;
font-size: 0.75rem;
}
.login-note {
font-size: 0.8125rem;
color: var(--text-light);
margin-top: 12px;
}
/* Error page */
.error-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
}
.error-card {
text-align: center;
}
.error-card h2 {
font-size: 3rem;
margin-bottom: 16px;
}
.error-card p {
color: var(--text-light);
margin-bottom: 24px;
}
/* Footer */
footer {
margin-top: 48px;
padding-top: 20px;
padding-bottom: 8px;
border-top: 1px solid var(--border);
text-align: center;
color: var(--text-light);
font-size: 0.8125rem;
}
/* Username box and copy buttons */
.username-box {
background: #f0f9ff;
border: 2px solid #0ea5e9;
border-radius: 8px;
padding: 16px;
margin: 16px 0;
}
.username-display {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.username-display code {
font-size: 20px;
font-weight: bold;
color: #0369a1;
background: white;
padding: 8px 16px;
border-radius: 6px;
flex-grow: 1;
}
.btn-copy {
background: #0ea5e9;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.2s ease;
}
.btn-copy:hover {
background: #0284c7;
}
.btn-copy:active {
transform: scale(0.98);
}
.btn-copy.copied {
background: #22c55e;
}
.btn-copy-inline {
background: #0ea5e9;
color: white;
border: none;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
margin-left: 8px;
transition: background 0.15s ease;
}
.btn-copy-inline:hover {
background: #0284c7;
}
.btn-copy-block {
background: #0ea5e9;
color: white;
border: none;
padding: 10px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
width: 100%;
transition: all 0.2s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-copy-block:hover {
background: #0284c7;
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}
.btn-copy-block:active {
transform: scale(0.98);
}
.btn-copy-block.copied {
background: #22c55e;
}
.username-preview {
font-size: 18px;
color: #64748b;
}
.info-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 12px;
margin-bottom: 16px;
}
.card-success {
border-left: 4px solid var(--success);
background-color: #f8fdf8;
}
.help-details {
margin-top: 12px;
font-size: 0.875rem;
}
.help-details summary {
cursor: pointer;
color: var(--primary);
padding: 4px 0;
font-weight: 500;
}
.help-details summary:hover {
color: var(--primary-dark);
}
.help-details ul {
margin-top: 8px;
margin-left: 20px;
color: var(--text-light);
}
.help-details li {
margin-bottom: 4px;
}
/* Claude Code Setup Card on Dashboard */
.cc-setup-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
margin-bottom: 24px;
}
.cc-setup-card h3 {
color: white;
margin-bottom: 12px;
}
.cc-setup-card .cc-instruction {
color: rgba(255, 255, 255, 0.95);
margin-bottom: 16px;
font-size: 0.9375rem;
line-height: 1.6;
}
.cc-setup-card .cc-helper-text {
color: rgba(255, 255, 255, 0.8);
font-size: 0.8125rem;
margin-top: 12px;
margin-bottom: 0;
}
.cc-setup-card .btn-copy-block {
background: white;
color: #667eea;
font-weight: 600;
padding: 12px 24px;
border-radius: 6px;
border: none;
cursor: pointer;
font-size: 14px;
width: 100%;
transition: all 0.2s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cc-setup-card .btn-copy-block:hover {
background: #f0f0f0;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.cc-setup-card .btn-copy-block:active {
transform: scale(0.98);
}
.cc-setup-card .btn-copy-block.copied {
background: #34a853;
color: white;
}
/* CLI hint in setup card */
.cc-setup-card .cli-hint {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.cc-setup-card .cli-hint summary {
cursor: pointer;
color: rgba(255, 255, 255, 0.85);
font-size: 0.8125rem;
font-weight: 500;
padding: 4px 0;
}
.cc-setup-card .cli-hint summary:hover {
color: white;
}
.cc-setup-card .cli-hint .cli-content {
margin-top: 10px;
background: rgba(255, 255, 255, 0.1);
padding: 10px 12px;
border-radius: 6px;
}
.cc-setup-card .cli-hint .cli-content code {
display: block;
background: rgba(0, 0, 0, 0.2);
color: white;
padding: 8px 10px;
border-radius: 4px;
font-size: 0.75rem;
margin-bottom: 6px;
}
.cc-setup-card .cli-hint .cli-desc {
color: rgba(255, 255, 255, 0.7);
font-size: 0.75rem;
}
/* Support info banner */
.support-info {
text-align: center;
color: var(--text-light);
font-size: 0.8125rem;
padding: 12px 16px;
background: #f8fafc;
border-radius: 6px;
margin-bottom: 20px;
border: 1px solid var(--border);
}
.support-info strong {
color: var(--text);
}
/* Auth tabs */
.auth-tabs {
display: flex;
gap: 0;
margin-bottom: 24px;
border-bottom: 2px solid var(--border);
}
.auth-tab {
flex: 1;
padding: 12px 16px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-light);
cursor: pointer;
transition: all 0.2s ease;
}
.auth-tab:hover {
color: var(--text);
}
.auth-tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.auth-tab-content {
display: none;
}
.auth-tab-content.active {
display: block;
}
.tab-description {
color: var(--text-light);
font-size: 0.875rem;
margin-bottom: 20px;
text-align: center;
}
.signup-note {
color: var(--text-light);
font-size: 0.8125rem;
text-align: center;
margin-top: 16px;
}
/* Login form styles */
.login-form {
text-align: left;
margin: 24px 0;
}
.login-form .form-group {
margin-bottom: 16px;
}
.login-form .form-group label {
display: block;
font-weight: 500;
font-size: 0.875rem;
margin-bottom: 6px;
color: var(--text);
}
.login-form .form-group input {
width: 100%;
padding: 12px 14px;
font-size: 0.9375rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background-color: var(--card-bg);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-form .form-group input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}
.login-form .form-group input::placeholder {
color: #9aa0a6;
}
.login-form .form-hint {
display: block;
font-size: 0.75rem;
color: var(--text-light);
margin-top: 4px;
}
.btn-block {
width: 100%;
}
.btn-link {
background: transparent;
color: var(--primary);
border: none;
padding: 8px 4px;
font-size: 0.875rem;
cursor: pointer;
text-decoration: none;
}
.btn-link:hover {
color: var(--primary-dark);
text-decoration: underline;
}
/* Login page links */
.login-links {
display: flex;
justify-content: center;
gap: 16px;
margin: 16px 0;
flex-wrap: wrap;
}
.login-links form {
margin: 0;
}
/* Request access form */
.request-access-form,
.reset-form {
display: inline;
}
/* Divider */
.divider {
display: flex;
align-items: center;
margin: 24px 0;
color: var(--text-light);
font-size: 0.875rem;
}
.divider::before,
.divider::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--border);
}
.divider span {
padding: 0 16px;
}
/* Account email display */
.account-email {
background-color: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 16px;
margin-bottom: 20px;
text-align: center;
font-size: 0.9375rem;
}
/* Responsive */
@media (max-width: 600px) {
.container {
padding: 15px;
}
header {
flex-direction: column;
gap: 15px;
text-align: center;
}
.info-item {
flex-direction: column;
gap: 4px;
}
.info-item .label {
min-width: auto;
}
.username-display {
flex-direction: column;
align-items: stretch;
}
.username-display code {
text-align: center;
}
.login-links {
flex-direction: column;
gap: 8px;
}
}
Reference in a new issue View git blame Copy permalink