Section 4 draws a "Quản lý project" title with + Project mới on its right, a
caps PROJECT heading over the list, every row carrying "N đoạn chat · M task",
and the form reading Tên / Mô tả / Instructions / Thư mục làm việc. The screen
had none of that: the header still said "Workspace — Projects", the create
button sat at the foot of the list among the list's own controls, rows were
bare names, the folder field had no label, and Instructions carried a
parenthetical the drawing does not.
The row counts are the substantive part — they are the only thing on the screen
that says a project contains anything. Read once per refresh from
list_conversations() and list_tasks() grouped by project_id, not per row.
Delete stays under the list it acts on. The drawing does not show it, but it
does not show it moved either, and dropping a control is not something a layout
pass gets to do.
Also shortened by the drawing: "Đổi thư mục…"/"Mở thư mục" to "Đổi"/"Mở", which
the new "Thư mục làm việc" label above them now disambiguates.
check_project_screen covers the four points and fails when the count line is
removed.
22/22 checkers pass.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Section 16 of the audit page draws the three actions on the title row, a
magnifier inside the search box, caps section headings, and names its complaint
outright: "Ô icon trong lưới hiện tại không có viền/hover rõ khi rê chuột hay
khi đang chọn" — you could not tell which cell you were about to pick.
So: Thêm / Dán / Xoá move from the strip under both grids (where they read as
belonging to the custom grid alone) up beside the title; the search box gets its
magnifier; the two headings become caps through the same #navSectionHdr style
the rail uses; and #iconGrid cells take an accent border on hover and on
selection, the card language Agent and Công cụ already use.
Wording follows the drawing too: "ICON TÍCH HỢP" rather than "Icon có sẵn", and
"Tìm icon theo tên…" rather than "Tìm icon có sẵn…".
Left alone, and worth a decision: the drawing labels the buttons "+ Thêm icon"
and "Xoá", where the app says "Thêm tệp SVG" and "Xóa tùy chỉnh". The longer
labels say which file type is wanted and that only custom icons can be deleted,
so shortening them to match the drawing would cost more than it gains.
check_icons_screen covers the four points. Its first version passed a mutation
that dropped the buttons from the header layout — unparented they sit at (0,0),
which read as "the same row" — so it now requires the vertical centres to line
up AND each button to start right of the title.
20/20 checkers pass.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A1 — hiding the assistant from the dot. The old build kept a chevron button
beside the dot wired to _hide_to_edge; the redesign moved that action into the
panel's ⋯ menu, so hiding went from one click to open-panel → ⋯ → Ẩn. The
drawing has no button there (26px, no text, no chevron), so the reach comes
back as a right-click on the dot, with the tooltip saying so.
A2 — per-part cost. Folding Input/Output/Cache into the total tile's sub-line
carried their token counts but not their prices, which live only on those three
cards, so the cost breakdown left the screen entirely. The wireframe asks for
the tiles anyway — "$0.31 Tổng chi phí · 57 lượt / 395.4K Tổng token / 292.8K
Input / 102.7K Output / 108.9K Cache" — so they are back as tiles, each with its
price, and the turn count rides on the cost tile's label as drawn.
The dot on Cowork. _update_dock_guard lifted it whenever a composer existed,
testing only the vertical axis. On a wide window the composer ends at the chat
column's right edge — x=1688 against a dot at x=1892 — so the dot rose 156px to
clear something that was never under it, and Cowork became the one screen where
it was not in the corner. It now lifts only when the two actually overlap:
18px from the bottom at 1936px wide, still lifted at 1200 and 900 where the
composer does reach under it.
Also: open_tooltip and show_tooltip still said "App Assistant" after the rename.
check_dock_corner covers the corner rule at three widths and fails if the lift
comes back unconditionally.
18/18 checkers pass.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The panel still said "Trợ lý App". I reported that name as changed several
turns ago — I had added help_agent.badge for the launcher pill and never
touched help_agent.title, so the panel header kept the old name in all three
languages. It is "AI Assistant" now, as the audit page names it.
Colours were invented rather than read. docs/ui-audit.html draws the assistant
in a fixed teal — .fab background #E6F6F4, border #7FD0C4, .spark #0F9B8A,
pill text #0F6E62 — and the app was using the theme accent instead. The dot,
the hover pill, the edge tab and the sparkle now use those values, so the
floating assistant is one recognisable object rather than something that
changes colour with the theme. The panel header also shows the sparkle instead
of the app's own icon.png, which is what made the header look unrelated to the
dot that opens it.
Collapsed rail: the nav tree kept sizing its column to the widest label, so at
54px it was ~100px wide inside a 66px viewport and grew a horizontal
scrollbar — which slid the icons off the x they hold while the rail is open.
The column now stretches to the viewport and horizontal scrolling is off; the
first item's x is 0 in both states, measured.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Reading the page's Overview line by line against the app turned up more than
layout:
* Tab strip: "Sự kiện bảo mật / Lịch sử gọi MCP / Nhật ký hành động /
Trạng thái Agent" → "Bảo mật / MCP / Hành động / Agent", as drawn. The long
names are also what pushed "Icon" off a 1024px window behind scroll arrows;
all eight now fit.
* Headings: "SỬ DỤNG TOKEN & CHI PHÍ" → "TOKEN & CHI PHÍ", "SỬ DỤNG TÀI
NGUYÊN" → "TÀI NGUYÊN", "CHI TIẾT SANDBOX" → "SANDBOX & QUYỀN",
"HOẠT ĐỘNG GẦN ĐÂY" → "NHẬT KÝ GẦN ĐÂY".
* Tiles put the number FIRST and its name under it, which is how the page
draws them; "Tổng chi phí" → "Chi phí" and Budget → "Ngân sách" in
Vietnamese. Applies to the Dashboard's cards too, which share the widget.
* Resources showed I/O and network RATES; the drawing shows capacity —
memory as used/total (138 MB/15 GB) and the workspace drive's free space
(15 GB trống). The rates are still measured and kept.
* "SANDBOX & QUYỀN" rendered as "SANDBOX _QUYỀN": a group-box title treats
"&" as a mnemonic. Same bug as the usage title, now fixed in both.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The KPI row already matched the wireframe, but the two sections under it did
not, which is what still read as "unchanged":
* TÀI NGUYÊN was four stretched columns — on a 1900px screen each value sat
at the far right of its quarter, with a 700px progress bar drawn as a rule
between. It is now one line: CPU 0% · Bộ nhớ 141 MB · Disk I/O 1 MB/s ·
Mạng 1 KB/s, packed left. 130px → 57px. The bars are kept and still
updated, just not drawn.
* SANDBOX and QUYỀN were two four-row columns side by side. The wireframe
draws ONE section with one line, so they are merged: the summary line
carries file system · network · process · resource limits, and both the
sandbox rows (ID, created, uptime) and the permission rows sit behind a
"Chi tiết" fold. Nothing is dropped — 168px → 80px closed.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Section 10 (Sự kiện bảo mật) — the one item on that page that was in scope:
the "Kết quả" column always showed ✕, because every security_block is recorded
with ok=False, so the column distinguished nothing. It is replaced by an
"Hành động" column tinted by which rule actually fired (dangerous_command red,
path_outside_sandbox green, network_blocked blue, secret_in_output amber). The
other three items on that page are the ones marked "vượt phạm vi" — KPI tiles,
three filter drop-downs, pagination and the sliding detail panel — and two of
their four action types have no real log source yet.
Section 9 (Tổng quan) — the KPI row is four tiles as drawn: Tổng token · Tổng
chi phí · Lượt gọi · Ngân sách. Input/Output/Cache are NOT dropped: their
figures moved onto the token tile's sub-line ("Input 1.52M · Output 513.2K ·
Cache 641.9K"), so the screen still carries every number it did before while
the row reads as the drawing does.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* "+ Mới" / "Quản lý skill…" were full buttons, ~40px tall each — the
loudest thing in a 230px sidebar, and three rows of height spent on
them. The wireframe writes these as small accent text beside the
heading; they are now 17px.
* "+ Mới" looked broken. It was not: it replaces the canvas with a fresh
empty flow, verified by loading a saved 3-node flow and pressing it
(3 nodes → 0). But pressing it while the canvas ALREADY held an empty
untitled flow produced an identical empty untitled flow — right, and
invisible. It now focuses and selects the name field, and says
"Flow mới — đặt tên rồi kéo agent vào canvas" in the status bar, so the
press always has a visible result.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
check_design_parity.py reads its checklist from the audit page's own
proposals; it now reports every one of the 31 as implemented, with no
deliberate divergences left.
* Schedule: the Kanban/Calendar drop-list became a pair of tabs, and the
Running lane is outlined while it holds anything — dropping a card there
starts the task for real, so it should not look like the other six.
* Cowork: agent / routing / usage / folder moved out of the typing box into
their own status strip beneath it, styled as status rather than a second
toolbar. All of them stay interactive; the design's read-only strip would
have cost features.
* Folder: the path is written as the screen's title instead of sitting in a
read-only text box that looked editable and cost a row.
* GraphRAG: the second toolbar row is gone (Export joined the first), and
the one button that relabelled itself became Đồ thị | Tin nhắn tabs, so
the view you are NOT in is named too.
* Settings gained the theme picker, so language / provider / theme are all
reachable there as well as on the rail's account row.
* Task editor: the five group boxes are grouped into three step tabs
(Nội dung → Lịch chạy → Liên kết). All 22 fields verified present after
the move; only the old section index is gone, replaced by the tabs.
* The assistant dot now clears a screen's own bottom bar (Cowork's
composer), measured from the composer's top edge in window coordinates.
Also adds .gitattributes: without it a Windows checkout records CRLF and
every file reads as fully rewritten to a Linux CI runner.
Verification: 7 check_*.py suites green, no screen clipped at 1920/1366/1280,
and no dialog scrolls sideways at 9/11/14pt.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Implements the redesign from docs/ui-audit.html. Rearrangement only — no
feature was removed; every control that moved kept its handler, and the
gates that used to hide things now grey them out instead.
Navigation
* The rail is one flat list: the five Workspace sub-views sit at the top
level instead of behind an accordion, with Dashboard/Monitoring pinned
at the foot and Settings below them.
* Cowork and GraphRAG stay listed and greyed while no project is
selected, rather than vanishing and resizing the menu under the user.
* Monitoring keeps its eight sub-views in its own tab strip (unhidden)
instead of doubling the rail's length.
* _goto now moves the highlight itself, fixing a long-standing bug where
programmatic navigation left the rail pointing at the previous screen.
* Rail header gained the project picker and "New chat"; RECENTS lists the
active project's threads. Both are second views of existing state — the
Cowork toolbar button and the full History panel are untouched.
* Provider / language / theme moved from the top bar to an account row at
the foot of the rail (same widgets, same signals).
Screens
* Co4E: the flow tab strip is gone (per the design); Flow Status became a
toolbar toggle with its own way back, and the three icon-only tabs became
four labelled, foldable sections in one column. One flow open at a time
is the one capability this costs; background runs are unaffected.
* Dashboard: header split into two rows; cost promoted to a hero card.
* Monitoring Overview: one scrolling column of titled sections; the model
price table got its own full-width section instead of sharing a row with
the CPU meters.
* Settings and Task editor gained a section index down the left.
* Help dock: 84x64 launcher + chevron became one 26px dot that expands to
a labelled pill on hover; "hide to the edge" moved into the panel's menu.
Layout
* The window's minimum width dropped from 1453px to 768px. The main cause
was a QTabWidget taking its minimum from the widest page even when that
page is hidden, so Co4E was forcing Project and Cowork wide.
* Secondary panes fold themselves on a narrow window and restore when it
grows, never overriding a fold the user made.
* The long dialogs no longer scroll sideways at any font size.
Verification: tools/check_*.py build a real MainWindow offscreen against a
copy of ~/.cowork_local with the schedulers no-oped. check_design_parity.py
reads its checklist straight from the audit page's own proposals.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
lamhv7andClaude Sonnet 5