Dataface Tasks
    Heartbeat snapshot (JSON)

    Polish dashboard chrome: favicon, breadcrumbs, and action rail

    IDCLOUD_SUITE-POLISH_DASHBOARD_CHROME_FAVICON_BREADCRUMBS_AND_ACTION_RAIL
    Statuscompleted
    Priorityp1
    Milestonem1-ft-analytics-analyst-pilot
    Ownerui-design-frontend-dev
    Completed bydave
    Completed2026-03-18

    Problem

    Fix the missing favicon 404, relax over-truncated dashboard/project breadcrumb labels, and improve the dashboard right-rail action icon affordances/sizing so they are understandable on first use. Validate with qa-explore after implementation.

    Context

    Three polish issues in the Cloud dashboard chrome:

    1. Favicon 404: base.html has no <link rel="icon"> tag, so browsers request /favicon.ico and get a 404. The logo SVG exists inline in components/logo.html (dark bg, white "df" text).
    2. Breadcrumb truncation: CSS .breadcrumb-item:nth-of-type(N) max-widths are 150px/200px/280px — too aggressive, especially for org/project names. Causes disorientation.
    3. Action rail affordance: The sidebar toolbar is 48px wide with 40×40px icon-only buttons. Labels only appear on hover via ::before pseudo-element. First-time users don't know what icons mean.

    Key files: - apps/cloud/templates/base.html — base template, favicon goes here - apps/cloud/static/css/suite.css — breadcrumb and toolbar styles - apps/cloud/templates/dashboards/dashboard_view.html — action rail HTML

    Possible Solutions

    Favicon: Generate an SVG favicon inline as a data URI (matches logo.html). No image file needed. Recommended — zero build step, works everywhere.

    Breadcrumbs: Increase max-widths to 200px/280px/360px. Keep the priority-shrinking pattern. Recommended — simple CSS change.

    Action rail: Widen sidebar to 56px, show small text labels below icons, and add aria-label for accessibility. Recommended — improves discoverability without changing layout architecture.

    Plan

    1. Add inline SVG favicon <link> to base.html <head>.
    2. Update breadcrumb max-width values in suite.css.
    3. Widen --sidebar-width, add label text under icons, add aria-label attrs.
    4. Run focused tests. Run QA exploration.

    Implementation Progress

    1. Favicon (base.html)

    • Added <link rel="icon" type="image/svg+xml"> with data URI matching the logo SVG from components/logo.html
    • No static file needed — inline SVG data URI works in all modern browsers

    2. Breadcrumb truncation (suite.css)

    • Increased max-width from 150/200/280px → 200/280/360px
    • Increased flex-basis from 100/150/200px → 140/200/260px
    • Kept the priority-shrinking pattern (1st shrinks most, 3rd shrinks least)

    3. Action rail affordance (suite.css + dashboard_view.html)

    • Widened --sidebar-width from 48px → 56px
    • Changed .toolbar-btn to flex-direction: column with icon + label layout
    • Added .toolbar-label class (9px font, single line, ellipsis overflow)
    • Reduced icon size from 18px → 16px to make room for labels
    • Button height from 40px → 44px with 4px top / 2px bottom padding
    • Added aria-label attributes to all 8 toolbar buttons
    • Added <span class="toolbar-label"> with short labels: Refresh, Edit, Code, Share, History, Export, Settings, AI

    4. Focused validation

    • uv run pytest tests/ -k "cloud or template or dashboard" -x --tb=short -q
    • Result: 316 passed, 1 skipped

    QA Exploration

    Ran scripts/qa-explore "favicon, breadcrumb truncation, and action rail labels on dashboard view" --url http://127.0.0.1:8100 ... after restarting the worktree stack. The initial safe run stalled on Playwright permissions; rerunning with --dangerous launched the browser-backed path and produced per-run artifacts under .qa-explorer/runs/20260318T144547-90653/.

    The browser verification confirmed the widened breadcrumb allowances and always-visible right-rail labels on desktop, tablet, and mobile-sized viewports.

    Manual follow-up verification: - Browser navigation no longer surfaced the prior favicon 404 pattern in console output on page load; the remaining console note was an existing login-form autocomplete hint. - curl -I http://127.0.0.1:8100/favicon.ico still returns 404, which is acceptable because the page now declares an explicit SVG favicon and avoids the implicit browser fallback request during normal navigation.

    • [x] QA exploration completed (or N/A for non-UI tasks)

    Review Feedback

    • [x] Review cleared