Problem
#4351 retired the Task Ledger demand chain and replaced it with the Host-owned, flat SessionTodo document. packages/ui/src/task-ledger-panel.tsx became packages/ui/src/session-todo-panel.tsx, which renders each item as:
<li className="maka-task-ledger-row" key={...}>
<StatusIcon size={ICON_SIZE.control} aria-hidden="true" />
<span>{item.content}</span>
</li>Only the class names carried over. The stylesheet apps/desktop/src/renderer/styles/task-ledger.css was not updated with it, so it still describes the retired nested, four-column row. The new panel uses only maka-task-ledger-panel, -message, -retry, -empty, -tree, and -row; it never sets data-status, never sets --task-depth, and has no role="group" descendants.
Rules on main that can no longer match anything:
:35 — grid-template-columns: 14px minmax(34px, auto) minmax(100px, 1fr) auto. The row has two children, so two of the four columns are always empty.:39 — the --task-depth indent. The custom property is never set, so it silently resolves to the no-indent case.:44 — .maka-task-ledger-group. No element carries this class.:56-59 — the four .maka-task-ledger-row[data-status="…"] > svg rules. data-status is never set.:61-80 — .maka-task-ledger-key, -subject, -meta, -detail. None of these classes are rendered.:131-134 — the @media (max-width: 620px) block, which only restyles -row, -meta, and -detail.
There is no user-visible defect: unmatched selectors do nothing. The cost is that the stylesheet misdescribes the component, so the next person to touch this panel reads a four-column nested tree contract that does not exist.
Desired outcome
task-ledger.css describes what SessionTodoPanel actually renders. Deleting the rules listed above and reducing the row styling to what the flat <li> needs is the whole change.
One thing to preserve rather than delete outright: the @media (max-width: 620px) block is keyed off the viewport, but the right workbar resizes down to SESSION_WORKBAR_MIN_WIDTH (320px) inside an otherwise wide window, where a viewport query never fires. That mismatch is independent of the removed nesting. If any width-responsive behavior is kept for this panel, it should be an @container query on .maka-task-ledger-panel, matching the existing inspector.css and chat-header.css precedent. Credit to @liuxiaocs7, who identified and implemented this in #4215 before that PR was superseded.
Renaming the file and the maka-task-ledger-* class prefix to match SessionTodoPanel is probably worth folding in, but that is a judgement call for whoever picks this up.
Verify with the existing Storybook coverage for the tasks panel (Tasks, TasksEmpty, TasksLoadFailed) rather than adding new tests — the change should be visually inert.
Alternatives or workarounds
Leaving it costs nothing at runtime. The reason to do it now is that the stylesheet is currently misleading documentation of a component it no longer matches, and the cost of removal only grows as more rules accumulate around the dead ones.
Additional context
Found while reviewing #4215, which is superseded by #4351 for the same reason.
Analysis produced with Claude Code and verified against main.
Problem
#4351 retired the Task Ledger demand chain and replaced it with the Host-owned, flat SessionTodo document.
packages/ui/src/task-ledger-panel.tsxbecamepackages/ui/src/session-todo-panel.tsx, which renders each item as:Only the class names carried over. The stylesheet
apps/desktop/src/renderer/styles/task-ledger.csswas not updated with it, so it still describes the retired nested, four-column row. The new panel uses onlymaka-task-ledger-panel,-message,-retry,-empty,-tree, and-row; it never setsdata-status, never sets--task-depth, and has norole="group"descendants.Rules on
mainthat can no longer match anything::35—grid-template-columns: 14px minmax(34px, auto) minmax(100px, 1fr) auto. The row has two children, so two of the four columns are always empty.:39— the--task-depthindent. The custom property is never set, so it silently resolves to the no-indent case.:44—.maka-task-ledger-group. No element carries this class.:56-59— the four.maka-task-ledger-row[data-status="…"] > svgrules.data-statusis never set.:61-80—.maka-task-ledger-key,-subject,-meta,-detail. None of these classes are rendered.:131-134— the@media (max-width: 620px)block, which only restyles-row,-meta, and-detail.There is no user-visible defect: unmatched selectors do nothing. The cost is that the stylesheet misdescribes the component, so the next person to touch this panel reads a four-column nested tree contract that does not exist.
Desired outcome
task-ledger.cssdescribes whatSessionTodoPanelactually renders. Deleting the rules listed above and reducing the row styling to what the flat<li>needs is the whole change.One thing to preserve rather than delete outright: the
@media (max-width: 620px)block is keyed off the viewport, but the right workbar resizes down toSESSION_WORKBAR_MIN_WIDTH(320px) inside an otherwise wide window, where a viewport query never fires. That mismatch is independent of the removed nesting. If any width-responsive behavior is kept for this panel, it should be an@containerquery on.maka-task-ledger-panel, matching the existinginspector.cssandchat-header.cssprecedent. Credit to @liuxiaocs7, who identified and implemented this in #4215 before that PR was superseded.Renaming the file and the
maka-task-ledger-*class prefix to matchSessionTodoPanelis probably worth folding in, but that is a judgement call for whoever picks this up.Verify with the existing Storybook coverage for the tasks panel (
Tasks,TasksEmpty,TasksLoadFailed) rather than adding new tests — the change should be visually inert.Alternatives or workarounds
Leaving it costs nothing at runtime. The reason to do it now is that the stylesheet is currently misleading documentation of a component it no longer matches, and the cost of removal only grows as more rules accumulate around the dead ones.
Additional context
Found while reviewing #4215, which is superseded by #4351 for the same reason.
Analysis produced with Claude Code and verified against
main.