Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Kreska: the logo, the agent icon with expressions, and agent colours in the Agents section

Chiusa
  • Qualcosa non va?
#339 5 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@Zamojski5 ci sta già lavorando.

Dal 9/10/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

agent:review enhancement

Part of #336 (F-026, founder direction 2026-10-07). Design guide: docs/design/final (§3 kreska logo agent icon and mascot · agent colours agents section only; until #337 merges, read the pinned copy). Interactive boards (light/dark toggle, notes): design canvas, page "Prostota".

Outcome

Kreska is the Flux logo and every agent's icon. An agent is always recognisable and never mistaken for a person. Agent colours appear only in the Agents section.

Final design

reference-kreska desktop-agents phone-agents phone-agentdetail

Acceptance criteria

  • AC-1. One Kreska component draws the agent icon at 16 / 20 / 24 / 32 / 48 px with the line weights in guide §3. It draws all 16 expressions as static frames, animated only when reduced motion is off.
  • AC-2. Every agent everywhere is Kreska plus an "Agent" tag and "for ": messages, mentions, Inbox, search, hand-off, Agents and the map cursor. People are grey circles with initials; an agent never gets a circle avatar, and a person never gets Kreska. Earlier agent glyphs, orbs and corner status dots are removed.
  • AC-3. The expression follows real state from existing run, claim and presence data (idle, working, thinking, reading, writing, waiting for you, asking, asleep). Flux never shows activity that is not happening.
  • AC-4. Each agent gets a stable colour from the seven muted OKLCH colours (L 0.55 light, 0.80 dark). It is used only in the agent list, an agent's details, the hand-off picker and Settings → Agents and AI; everywhere else agents are monochrome.
  • AC-5. The logo tile (solid --inv with the face knocked out, nothing past the tile) replaces the old mark in the sidebar, phone Home, sign-in and splash, in the PWA manifest icons (including maskable), the favicon and the apple-touch-icon.

What changes in the code today

From a read of main at 3c553b79; the owner confirms before starting. Paths are under app/apps/web/src, public/ is app/apps/web/public, root scripts/ and tests/ are the repository's, and UI tests are in app/tests/ui.

Change

  • ui/Avatar.tsx: people only, grey circle with initials, 32 px in conversations and 20 px for owners in task rows.
  • Agent names: replace the text suffix (AGENT_SUFFIX in agents/ProjectAgents.tsx) and "(agent)" (work/ProjectTasks.tsx, work/WorkDetails.tsx) with Kreska + "Agent" tag + "for ".
  • app/apps/web/scripts/generate-icons.ts, public/icons/* (indigo tile with "F"), public/manifest.webmanifest colours, index.html icons: regenerate from the Kreska tile.

Remove

  • The robot agent glyph (ui/Icon.tsx, used on board owners in work/TaskBoard.tsx).
  • The ✦ spark assistant avatar and its breathe animation (assistant/ConversationParts.tsx, assistant/assistant.css), and the spark as the project icon (app/Sidebar.tsx, app/AppLayout.tsx).
  • Connection status dots and corner dots (agents/agents.css, side__dot, inbox__dot).
  • FluxMark (two slanted strokes) and the "flux." wordmark in ui/Icon.tsx, app/Sidebar.tsx, auth/pages.tsx.

New

  • A Kreska component (sizes, line weights, 16 expressions, static frames) and a mapping from run/claim/presence state to expression.
  • A stable per-agent colour from the 7-colour palette, applied only in the Agents section.
  • The logo tile + wordmark component.

Tests to rewrite

  • test_personal_assistant.py (spark avatar), test_agents_view.py (per-connection dots), record_demo.py and adaptive_fixture.py (brand).

Depends on

#338 (tokens and shared components first; independent parts can start earlier).

Related: #20 (MOB-1): the regenerated install icons, maskable icon and apple-touch-icon must still meet the documented install rules. The map cursor in AC-2 needs live map presence, which comes with live co-editing (#228/#231, PR #239; F-021, now required in v0.1 by founder direction, 2026-10-07). Preserve actual authorized presence and independently verified behavior; restoring release scope does not mean it is implemented.

How to test

./scripts/check_ui.sh            # browser suite; add the new or changed tests
./scripts/check_application.sh   # when API or data paths change
python3 scripts/check_agent_setup.py && git diff --check

Compare with the renders above at 1440 × 900 and 390 × 844 CSS px, in light and dark, on ./flux demo data, then get an independent visual review with a neutral brief (guide §9). Screenshots do not prove interaction or accessibility, so also test keyboard, touch (Chromium and WebKit emulation), reduced motion and contrast in the running app.

Owner: whoever claims it (assign yourself and comment once). Evaluator: the other agent. The design is a founder direction: implement it as drawn; raise a conflict with a functional contract on #336 instead of changing the design.

Updated 2026-10-07: cross-links to #20 and #228 added.

Lingua principale
TypeScript
Stelle
3
Fork
0
Merge medio
20h 42m
PR unite (30g)
379

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di ColdPhase/flux

Tutte le issue di ColdPhase/flux

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.