Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#339 5 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@Zamojski5 is already working on this.

Since Oct 9, 2026.

Assessment

This issue has not been assessed yet.

Description

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.

Dominant language
TypeScript
Stars
3
Forks
0
Avg merge
13h 27m
Merged PRs (30d)
224

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ColdPhase/flux

All issues in ColdPhase/flux

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.