docs: add webui screenshots to the launch webui section (#576)

## Summary

Two commits. The first fills the Launch WebUI section of both READMEs,
which
carried three `Screenshot placeholder` lines and no images, with two
figures
each: the new task page and the subagents page. The second lands the
Raven mark
those figures show.

On the figures:

- Two, not three. The third placeholder asked for a task graph, which
cannot be
captured from stored data: the web DAG panel is driven by live `dag.*`
events
and its disk restore is gated on a localStorage note that only a live
event
writes, so showing one would have required a real `run_subagent_dag`
turn.
That slot is dropped rather than filled with something its caption does
not
  match.
- They come from an isolated instance with its own `RAVEN_HOME` and an
empty
session store, so no conversation titles, memory entries or workspace
file
names appear. The A2A block was removed from its config, and the config
carries no channels and no cron, so the throwaway instance had no
outward
side effects. Its home, which held a copy of real provider keys, was
deleted
  after the run.
- Each README gets its own language, captured with `language` set to
`en` and
to `zh`. Following the convention already in these files, `alt` text
stays
  English in both while the caption follows the prose language.

On the mark:

- The new file is a dark bird on an antique-gold halo. Against the dark
theme's
surface that ink measures 1.07:1, and no tone filter can lift it because
it is
not one colour to invert, so it carries an opaque plate rather than the
`prefers-color-scheme` rule the previous file used. Ink against plate
measures
  18.29:1 on both themes.
- The plate is a card, so the mark fills its frame the way
`miromind.svg`
already does. Keyed by file rather than by `data-agent`, which carries
the
  preset and raven's own rows have none.
- The halo stroke goes from 1.6 to 3.2. Against a 64 unit canvas the old
width
lands under one device pixel at the two smaller slots the mark renders
in,
0.45 at 18px and 0.65 at 26px, so the ring washed out wherever the
roster
  draws it.

Reviewer note: the figures were captured before the stroke went to 3.2,
so the
halo in them is thinner than what this branch now renders. Everything
else in
them is current. Re-capturing would mean a second upload for a
difference of
half a device pixel, so they are left as they are.

Assets are hosted as a comment on issue #505 rather than committed, per
the
repository asset rule.

## Type

- [ ] Fix
- [ ] Feature
- [x] Docs
- [ ] CI / tooling
- [ ] Refactor
- [ ] Other

## Verification

```
.venv/bin/python -m pytest tests/test_ui_agent_marks.py -q -p no:randomly
    -> 7 passed

.venv/bin/python -m pytest tests/test_scope_canon.py tests/test_docs_site.py \
    tests/test_docker_runtime.py -q -p no:randomly
    -> 27 passed

npx --prefix ui-web vitest run --root ui-web \
    scripts/agent-mark-css.test.mjs src/shell/agent-mark.test.tsx
    -> 2 files, 18 passed

make check-large-files        -> exit 0
make check-source-language    -> exit 0
make check-commits            -> exit 0
```

The gates were run over a committed range rather than an empty diff, and
the
mark suite was re-run afterwards because `make check-commits` can
rebuild the
virtualenv under it.

The mark change was rendered and measured rather than eyeballed: at
1440px the
mark is 28px, and the two candidate files differ only in a sub-pixel
halo and a
plate that is near the tile colour in the light theme, so the two are
not
visually separable at full size. The renders were compared by pixel
signature
against standalone renders of each file.

Every uploaded asset was fetched back with a GET and compared by sha256
against
the local render; all four are byte identical. A HEAD request is not a
valid
check here, because user-attachments URLs answer 403 to HEAD and 200 to
GET.

Both README sections were rendered through the GitHub markdown API to
confirm
the figures resolve, the alt text survives and each file references the
assets
for its own language.

- [x] Relevant tests pass locally
- [x] Relevant lint / type checks pass locally
- [x] User-facing docs or screenshots are updated when needed

## Risk

Two user-visible changes. Both READMEs render two figures in Launch
WebUI where
three placeholder lines used to be. The Raven mark in the subagents
roster and
in every other slot it draws in is a different image, larger in its
frame, and
no longer answers the theme from inside its own file.

Rollback is a revert of either commit independently; they touch disjoint
files.
The hosted assets can stay either way.

Backward compatibility is not applicable: no interface, config key or
stored
value changes.

- [x] Security impact considered
- [ ] Backward compatibility considered
- [x] Rollback path is clear for risky changes

## Related Issues

#505

---------

Co-authored-by: Claude (claude-opus-5[1m]) <noreply@anthropic.com>

Author: LivXue

README.md

@@ -268,11 +268,17 @@ raven web
 
 The command opens the WebUI in your browser and keeps Raven running in the background. Use `raven web --stop` to stop the background service.
 
-> **Screenshot placeholder 1:** Conversations and workspace.
+<p align="center">
+  <a href="https://github.com/user-attachments/assets/f73c1f5e-10cc-4d39-976d-22560a5e971c"><img src="https://github.com/user-attachments/assets/f73c1f5e-10cc-4d39-976d-22560a5e971c" alt="Raven WebUI new task page" width="90%"></a>
+</p>
+
+<p align="center"><em>New task: one composer, with skills, playbooks, knowledge and memory a click away.</em></p>
 
-> **Screenshot placeholder 2:** Agent collaboration and task graph.
+<p align="center">
+  <a href="https://github.com/user-attachments/assets/00361ef7-4071-4864-928a-5fe5086ebb81"><img src="https://github.com/user-attachments/assets/00361ef7-4071-4864-928a-5fe5086ebb81" alt="Raven WebUI subagents page" width="90%"></a>
+</p>
 
-> **Screenshot placeholder 3:** Memory and skill management.
+<p align="center"><em>Subagents: every connected agent in one roster, built-in and third-party alike.</em></p>
 
 ## ❯❯ EverMind Ecosystem
 

README.zh-CN.md

@@ -256,11 +256,17 @@ raven web
 
 该命令会在浏览器中打开 WebUI，并让 Raven 在后台持续运行。使用 `raven web --stop` 停止后台服务。
 
-> **截图占位 1：** 对话与工作区。
+<p align="center">
+  <a href="https://github.com/user-attachments/assets/5ffb877b-8e53-4079-a0bc-70607e415746"><img src="https://github.com/user-attachments/assets/5ffb877b-8e53-4079-a0bc-70607e415746" alt="Raven WebUI new task page" width="90%"></a>
+</p>
+
+<p align="center"><em>新建任务：一个输入框，技能、剧本、知识库与记忆都在一侧。</em></p>
 
-> **截图占位 2：** Agent 协作与任务图。
+<p align="center">
+  <a href="https://github.com/user-attachments/assets/3821466d-73d4-4544-9b0b-065e4beda2a4"><img src="https://github.com/user-attachments/assets/3821466d-73d4-4544-9b0b-065e4beda2a4" alt="Raven WebUI subagents page" width="90%"></a>
+</p>
 
-> **截图占位 3：** 记忆与技能管理。
+<p align="center"><em>子智能体：内置与第三方 Agent 汇总在同一张花名册里。</em></p>
 
 ## ❯❯ EverMind 生态
 

tests/test_ui_agent_marks.py

@@ -131,21 +131,30 @@ def test_the_own_mark_ships() -> None:
     assert (_ASSETS / f"{_own_mark()}.svg").is_file()
 
 
-def test_the_own_mark_answers_the_theme_from_inside_the_file() -> None:
+def test_the_own_mark_carries_its_own_plate() -> None:
     """The two halves of that are one fact, and neither is safe alone.
 
-    A raven is black, and the dark theme's surface is ``#1e1c14`` -- 1.2:1, a
-    silhouette that leaves two white eyes floating in an empty frame. The mark
-    cannot be filtered into legibility the way a ``mono`` one is, because it is
-    not one colour, so it carries a ``prefers-color-scheme`` rule of its own,
-    as miromind.svg does; an ``<img>`` resolves that against the embedding
-    element's used colour-scheme, which the stylesheet pins to the chosen
-    theme.
-
-    The tone must therefore stay absent: a ``mono`` or ``hybrid`` here would
-    invert the file on top of the answer it already gave, which lands back at
-    black on black in exactly one theme -- and no DOM assertion sees a colour.
+    A raven is dark, and the dark theme's surface is ``#1e1c14``. Measured at
+    the roster's render size, the bird against that surface is 1.07:1 -- gone,
+    leaving the halo alone in an empty frame. The mark cannot be filtered into
+    legibility the way a ``mono`` one is, because it is not one colour to
+    invert, so it answers the theme by not participating in it: an opaque plate
+    behind every shape, which renders the same on either surface.
+
+    That is why the plate is asserted rather than a ``prefers-color-scheme``
+    rule. The file used to carry one, as miromind.svg still does; a plate makes
+    the rule redundant, and the stylesheet's ``color-scheme`` lines no longer
+    decide anything for this mark. Either mechanism is a fact about the file,
+    and a file with neither is the failure this guards.
+
+    The tone must stay absent for the same reason it always did: a ``mono`` or
+    ``hybrid`` here would invert the plate along with the bird, which lands at
+    dark-on-dark in exactly one theme -- and no DOM assertion sees a colour.
     """
     svg = (_ASSETS / f"{_own_mark()}.svg").read_text(encoding="utf-8")
-    assert "prefers-color-scheme: dark" in svg
+    root = svg[: svg.index(">") + 1]
+    shapes = _SHAPE.findall(svg)
+    plate = [el for el in shapes if el.startswith("<rect") and 'fill="#FFFFFF"' in el]
+    assert plate, "the own mark carries neither a plate nor a prefers-color-scheme rule"
+    assert 'fill="none"' in root, "a root fill would paint outside the plate"
     assert _tone_of(_own_mark()) is None

ui-web/src/assets/agents/raven.svg

@@ -5068,9 +5068,14 @@ body:has(.app[data-page="on"]) #deskHost { display: none; }
   overflow: hidden; color: var(--muted); }
 .agent-mark svg { display: block; width: 14px; height: 14px; stroke-linecap: round; stroke-linejoin: round; }
 .agent-mark img { display: block; width: 14px; height: 14px; object-fit: contain; }
-/* The one mark that IS a tile: MiroMind's file is a favicon and carries its own
-   rounded card, so it fills the frame instead of sitting a card inside one. */
+/* The two marks that ARE tiles fill the frame instead of sitting a card inside
+   one. MiroMind's file is a favicon and carries its own rounded card. */
 .agent-mark img[data-agent="mirothinker"] { width: 100%; height: 100%; }
+/* The second mark that is a tile: raven.svg carries an opaque plate of its own,
+   for the reason the color-scheme comment below records. Keyed by file, because
+   `data-agent` carries the preset and raven's own rows have none -- the same
+   reason agent-mark.tsx holds it outside MARKS. */
+.agent-mark img[src$="agents/raven.svg"] { width: 100%; height: 100%; }
 /* Only the marks that draw in currentColor, which an <img> resolves against its
    own document and so renders black. `mono` is every shape, so the whole file
    inverts, as the provider marks already do. `hybrid` is qoder alone: brand
@@ -5085,15 +5090,17 @@ body:has(.app[data-page="on"]) #deskHost { display: none; }
   :root:not([data-theme="light"]) .agent-mark img[data-tone="mono"] { filter: invert(1); }
   :root:not([data-theme="light"]) .agent-mark img[data-tone="hybrid"] { filter: invert(1) hue-rotate(180deg); }
 }
-/* Two marks answer the theme from inside their own file, each with a
-   prefers-color-scheme rule: miromind.svg, which is a favicon, and raven.svg,
-   which is a black bird and would otherwise sit at 1.2:1 on the dark surface --
-   no tone filter can help it, because it is not one colour to invert. An
+/* miromind.svg answers the theme from inside its own file, with a
+   prefers-color-scheme rule of its own. An
    <img>'s SVG evaluates that rule against the used color-scheme of the element
    embedding it, NOT against this page's data-theme, so without these two lines
-   both follow the operating system while the rest of the roster follows the
+   it follows the operating system while the rest of the roster follows the
    switch -- and since the app's default is explicitly light, a fresh install on
    a dark OS is a normal way to see it.
+   raven.svg once needed the same treatment for the opposite reason: a black bird
+   sits at 1.2:1 on the dark surface and no tone filter can lift it, because it is
+   not one colour to invert. It now carries an opaque plate, which is theme
+   independent, so these two lines no longer decide anything for it.
    Declared on the tile rather than on :root: there it would also hand every
    native scrollbar and form control to the dark palette, which is a change to
    the whole page and not to a mark. */