AI/Agents app-bar icon broken in production: slash-theme.css references /static/slash-site-logo.png which 404s #20

Closed
opened 2026-08-04 16:50:59 +00:00 by mohlec · 1 comment
Owner

Summary

slash-theme.css is loaded in production and overrides the AI/Agents plugin app-bar icon with a background image that does not exist on the server — it returns HTTP 404. Beta users see a broken/default AI icon.

Evidence (CT#137, verified 2026-08-04)

The CSS rule (webapp/channels/src/slash-theme/slash-theme.css):

/* AI Agent icon: replace inline SVG with the Slash beaver */
#app-bar-icon-mattermost-ai .app-bar__old-icon {
  background: url("/static/slash-site-logo.png") no-repeat center/contain !important;
}

Live checks on CT#137:

/opt/mattermost/client/slash-theme.css        -> EXISTS (loaded, referenced from root.html)
/opt/mattermost/client/slash-site-logo.png    -> MISSING
find /opt/mattermost/client -name 'slash-site-logo*'  -> (no results)
curl http://127.0.0.1:8065/static/slash-site-logo.png -> HTTP 404
mmctl plugin list | grep ai  -> mattermost-ai: Agents, Version: 2.0.3  (ENABLED)

So: the stylesheet loads, the plugin is enabled, the override fires, and the image 404s.

Root cause (suspected)

slash-site-logo.png exists in the repo at webapp/channels/src/images/slash-site-logo.png and is referenced by slash-theme.css + product_branding_free_edition.tsx, but it is not being emitted to the client root as /static/slash-site-logo.png. Likely a webpack CopyPlugin path/output mismatch introduced when the branding assets were reorganised — needs confirming against webpack.config.js.

Impact

Cosmetic but user-visible, and live in beta right now.

Relationship to other issues

This is the live-bug half of what NCW-Chat-slash-theme #1 / #2 were circling:

  • #1 — replace slash-site-logo.png with an SVG
  • #2 — wire ai-agent-icon.svg (already present in slash-theme/) into the AI plugin icon

Note webapp/channels/src/slash-theme/ai-agent-icon.svg already exists in the repo — the CSS just points at the PNG instead. Fixing this properly probably resolves #1 and #2 together: emit/point at the SVG that's already there, rather than a PNG that isn't being shipped.

Suggested fix

  1. Confirm why slash-site-logo.png is not landing in the client root (webpack CopyPlugin).
  2. Prefer switching the rule to the already-bundled ai-agent-icon.svg and verify it is emitted + reachable.
  3. Verify post-deploy: curl -o /dev/null -w '%{http_code}' <siteurl>/static/<asset> returns 200, and the Agents app-bar icon renders.

Filed from the 2026-08-04 issue/PRD reconciliation pass. Deliberately kept separate from the doc cleanup — no code changed.

## Summary `slash-theme.css` is loaded in production and overrides the AI/Agents plugin app-bar icon with a background image that **does not exist on the server** — it returns HTTP 404. Beta users see a broken/default AI icon. ## Evidence (CT#137, verified 2026-08-04) The CSS rule (`webapp/channels/src/slash-theme/slash-theme.css`): ```css /* AI Agent icon: replace inline SVG with the Slash beaver */ #app-bar-icon-mattermost-ai .app-bar__old-icon { background: url("/static/slash-site-logo.png") no-repeat center/contain !important; } ``` Live checks on CT#137: ``` /opt/mattermost/client/slash-theme.css -> EXISTS (loaded, referenced from root.html) /opt/mattermost/client/slash-site-logo.png -> MISSING find /opt/mattermost/client -name 'slash-site-logo*' -> (no results) curl http://127.0.0.1:8065/static/slash-site-logo.png -> HTTP 404 mmctl plugin list | grep ai -> mattermost-ai: Agents, Version: 2.0.3 (ENABLED) ``` So: the stylesheet loads, the plugin is enabled, the override fires, and the image 404s. ## Root cause (suspected) `slash-site-logo.png` exists in the repo at `webapp/channels/src/images/slash-site-logo.png` and is referenced by `slash-theme.css` + `product_branding_free_edition.tsx`, but it is **not being emitted to the client root** as `/static/slash-site-logo.png`. Likely a webpack CopyPlugin path/output mismatch introduced when the branding assets were reorganised — needs confirming against `webpack.config.js`. ## Impact Cosmetic but user-visible, and live in beta right now. ## Relationship to other issues This is the *live-bug* half of what NCW-Chat-slash-theme #1 / #2 were circling: - **#1** — replace `slash-site-logo.png` with an SVG - **#2** — wire `ai-agent-icon.svg` (already present in `slash-theme/`) into the AI plugin icon Note `webapp/channels/src/slash-theme/ai-agent-icon.svg` **already exists in the repo** — the CSS just points at the PNG instead. Fixing this properly probably resolves #1 and #2 together: emit/point at the SVG that's already there, rather than a PNG that isn't being shipped. ## Suggested fix 1. Confirm why `slash-site-logo.png` is not landing in the client root (webpack CopyPlugin). 2. Prefer switching the rule to the already-bundled `ai-agent-icon.svg` and verify it is emitted + reachable. 3. Verify post-deploy: `curl -o /dev/null -w '%{http_code}' <siteurl>/static/<asset>` returns 200, and the Agents app-bar icon renders. *Filed from the 2026-08-04 issue/PRD reconciliation pass. Deliberately kept separate from the doc cleanup — no code changed.*
Author
Owner

Fixed and verified in production.

Deployed 2026-08-05 as part of the v11.7.9 upstream merge deploy — webapp slash-20260805-87f946c7c7.

Live verification on CT#137:

/static/ai-agent-icon.svg   -> 200
/static/slash-theme.css     -> 200

And the rule in the deployed stylesheet now reads:

url("/static/ai-agent-icon.svg")

/static/slash-site-logo.png still 404s, and that is expected and harmless — nothing references it from CSS any more. It remains valid where it is imported from TSX, because the webpack asset pipeline resolves that path; only bare url() in the verbatim-copied slash-theme.css was ever affected.

Root cause for the record: this was not a CopyPlugin path/output mismatch as originally suspected. There is simply no CopyPlugin pattern for slash-site-logo.png at all — slash-theme.css is copied to the client root verbatim, no loader processes it, so a bare url() in it gets no module resolution. The constraint is now documented in DIVERGENCE.md: slash-theme.css can only reference assets that are themselves explicitly copied to the client root.

Fixed by PR #21.

**Fixed and verified in production.** Deployed 2026-08-05 as part of the v11.7.9 upstream merge deploy — webapp `slash-20260805-87f946c7c7`. Live verification on CT#137: ``` /static/ai-agent-icon.svg -> 200 /static/slash-theme.css -> 200 ``` And the rule in the deployed stylesheet now reads: ``` url("/static/ai-agent-icon.svg") ``` `/static/slash-site-logo.png` still 404s, and that is expected and harmless — nothing references it from CSS any more. It remains valid where it is `import`ed from TSX, because the webpack asset pipeline resolves that path; only bare `url()` in the verbatim-copied `slash-theme.css` was ever affected. Root cause for the record: this was **not** a CopyPlugin path/output mismatch as originally suspected. There is simply no CopyPlugin pattern for `slash-site-logo.png` at all — `slash-theme.css` is copied to the client root verbatim, no loader processes it, so a bare `url()` in it gets no module resolution. The constraint is now documented in `DIVERGENCE.md`: **`slash-theme.css` can only reference assets that are themselves explicitly copied to the client root.** Fixed by PR #21.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
slash/slash-server#20
No description provided.