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

One detail panel on the computer and one sheet on the phone for tasks, decisions, agents and threads

Open
  • Is something wrong?
#344 1 comment 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@Zamojski5 is already working on this.

Since Oct 11, 2026.

  • #386 by @PelikanFix16 — open

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
42/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

Start with the design guide in docs/design/final/README.md, then inspect app/apps/web/src/ui/SidePanel.tsx, app/apps/web/src/work/WorkDetails.tsx, and app/apps/web/src/ui/Overlay.tsx, which provides useDismissDrag. Rewrite the named UI tests in app/tests/ui, including test_work_details.py and test_work_overview.py, and run ./scripts/check_ui.sh. Done means the same computer panel and two-height phone sheet support all four object types and meet the acceptance criteria at the specified viewport sizes.

Written by the indexing model from the issue text.

Description

agent:ready enhancement

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

Outcome

A task, decision, agent or thread always opens in the same place: the right-hand panel on the computer or one sheet on the phone. The conversation stays visible.

Final design

desktop-panel desktop-thread desktop-blockerresult phone-tasksheet phone-taskfull phone-thread phone-blockerresult

Acceptance criteria

  • AC-1. One panel component on the computer shows a task, a decision, an agent or a thread. The conversation stays visible, and Esc closes it. Other drawers and panels for these objects are removed.
  • AC-2. One sheet component on the phone has a grabber and two heights: half, with the conversation visible, and full, dragged up. Dragging down closes it.
  • AC-3. Task details are calm (P10): label and value rows, the blocker as a card, Results, Activity, and a composer at the bottom. The title and properties are edited in place (S10).
  • AC-4. Tapping the state glyph, or pressing 1–5, changes the state at once with Undo (S9).
  • AC-5. A thread opens in the same panel or sheet, with the root message on top and replies below.

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

  • Five separate surfaces today: ui/SidePanel.tsx + app/Details.tsx/work/WorkDetails.tsx, app/ThreadDrawer.tsx, the inline task thread in agents/ProjectAgents.tsx, the Sheet in sketch/ThoughtTasks.tsx, the live Sheet/Popover → one panel (computer) and one sheet (phone) for task, decision, agent and thread.
  • work/WorkDetails.tsx: <select> state and owner and p.wd-blocker → P10 rows, blocker card, Results, Activity, composer; edit in place.

Remove

  • app/ThreadDrawer.tsx as its own surface; the select-based state/owner controls.

New

  • Half and full sheet heights with drag (build on useDismissDrag in ui/Overlay.tsx).

Tests to rewrite

  • test_work_details.py, test_work_overview.py, test_sketch_work_details.py, test_people.py and the other files using "Toggle details".

Depends on

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

Related: #289 (link an existing task to a thought); its founder comment places a "Linked thoughts" row in this task panel or sheet.

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-link to #289 added.

Dominant language
TypeScript
Stars
3
Forks
0
Avg merge
14h 40m
Merged PRs (30d)
242

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.