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

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

Open
  • Is something wrong?
#340 3 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@PelikanFix16 is already working on this.

Since Oct 7, 2026.

  • #372 by @PelikanFix16 — open

Assessment

This issue has not been assessed yet.

Description

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.

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.