Computer shell: sidebar with New and a working agent, collapse and focus mode, a one-row project header

Chiusa
  • Qualcosa non va?
#340 3 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@PelikanFix16 ci sta già lavorando.

Dal 7/10/2026.

  • #372 di @PelikanFix16 — integrata

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

agent:working enhancement

Part of #336 (F-026, founder direction 2026-10-07). Design guide: docs/design/final (computer · keyboard computer; until #337 merges, read the pinned copy). Interactive boards (light/dark toggle, notes): design canvas, page "Prostota".

Outcome

On the computer, Flux has the drawn sidebar, a collapsible rail, focus mode and a one-row project header with the five views.

Final design

desktop-home desktop-conversation desktop-focus overview

Acceptance criteria

  • AC-1. The sidebar is 248 px, top to bottom: the logo and collapse ([); New (C) and Search (⌘K); Home, Inbox with a count, Sketchbook; Projects, then Messages; the working-agent card with Stop; the account and Settings.
  • AC-2. [ collapses the sidebar to a 64 px icon rail and back, remembered on the device. F turns focus mode on and off: it hides the sidebar and pauses notifications until it is turned off, and says so.
  • AC-3. The project header is one row: the name, the views Conversation · Map · Tasks · Wiki · Agents, "N needs you", people and agents, and More. No second toolbar row appears in any view.
  • AC-4. The working-agent card appears only while a real agent run or claim is active, shows its Kreska expression and what it is doing, and Stop ends it through the existing API.
  • AC-5. The shortcuts in guide §4 work and are shown next to their actions in menus. Focus order and visible focus are correct. 1440 × 900 and 1280 × 800 match the renders in light and dark.

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

  • app/Sidebar.tsx: today FluxMark, "Jump to… ⌘K", Home, Inbox (dot), Direct messages, My sketchbook, "New note", Projects +, Messages +, UserMenu → the drawn order with New, Search, Inbox count, working-agent card and Settings.
  • app/AppLayout.tsx header: crumb, audience button, ProjectStateLine, LiveEntry, Details button → one row with the five views, "N needs you", people and agents, More.
  • Keyboard handling in app/AppLayout.tsx (today only ⌘K and ]).

Remove

  • The "Direct messages" place link and "New note" in the sidebar; the "What matters" recap button and the audience-line button in the header; ] for Details; Home's own Conversation/Map/Tasks/Wiki tabs (app/views.tsx).

New

  • The 64 px collapsed rail ([), focus mode (F), the working-agent card with Stop.
  • Shortcuts C, G I, J/K, E, S, A, Z, R, T, 1–5, [, F, shown next to actions in menus.

Tests to rewrite

  • test_app_shell.py (New note, My sketchbook, main places), test_sidebar_names.py, test_adaptive_matrix.py, ~15 files that use "Toggle details"/the Details button.

Depends on

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

Related: today only the personal assistant's run has a stop API (assistantRunStopPath); Stop for other working agents is new work in #347. The Home row with Stop is #342.

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 #347 and #342 for Stop added.

Lingua principale
TypeScript
Stelle
3
Fork
0
Merge medio
18h 21m
PR unite (30g)
385

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.