Skip to content

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language - #1205

Merged
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish
Jul 18, 2026
Merged

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language#1205
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish

Conversation

@jackwener

Copy link
Copy Markdown
Member

Two user directives in one campaign: 手绘 SVG 是反模式 (replace + govern) and MCP 页面不够美观 (polish).

Inline-SVG sweep + governance

Scope finding: the 6 inline SVGs in mcp-page.tsx were BRAND LOGOS (Slack/LINE/Google-Calendar/Figma/Vercel/Supabase), not UI glyphs — the banner pictograms were already lucide. Convergence: all market tiles now use the catalog's majority treatment (text marks on brand-tinted tiles — 钉/飞/N/⌘ were already this; the 6 special-cased logos were the inconsistency). menu.tsx's two hand-drawn indicator glyphs → Check from the icons funnel (model-picker precedent).

Governance: icon-governance-contract gains a machine tree-walk ban — any <svg literal in .tsx under packages/ui/src or apps/desktop/src/renderer outside the audited brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx) fails the suite with a pointer to @maka/ui/icons. Allowlist is rot-guarded (losing the SVG fails too). Hand-drawn SVG can no longer re-enter.

MCP page polish

DriftConverged
Hand-rolled headerPageHeader primitive, edged actions, 添加 MCP primary
Hand-rolled tabsshared underline TabsList + count pills, search right — skills rhythm
Banner icon striplabeled tiles: Terminal 本地 stdio / Plug 连接管理 / Globe 远程 HTTP
Hand-rolled empty statesEmptyState primitive
Every install state coloredexception-only: healthy = neutral; only 连接失败 raises destructive Chip

Zero behavior change (mcp-market contract pins verified verbatim). Plus: module-mcp visual-smoke fixture added and wired into the alignment auditor — the page is now under permanent visual governance.

Gates (merged tree = main tip already contained)

desktop 2699/2699 · ui 183/183 · typecheck · check-dead-css · knip ×2 = 0 · auditor all fixtures clean incl. module-mcp. CDP light+dark captures visually accepted by maintainer before merge. Implemented by an opus worktree agent.

Seeds the 扩展 → MCP module surface (sidebarSection 'mcp') with an mcp.json
holding two disabled servers, so the market grid, tab row, hero banner and
installed server list all render deterministically for the alignment auditor
and CDP capture. enabled:false keeps visual-smoke from attempting real npx /
HTTP connections, so rows settle in the neutral 已停用 state.
Converge the MCP module page onto the same bar as the 技能 page and the 每日回顾
redesign, presentation-only (same IPC/props/callbacks):
- Hero header now rides the shared PageHeader primitive (as=h2, title/subtitle
+ edged actions cluster; 添加 MCP is the primary CTA).
- Market/installed tabs move onto the shared underline TabsList/TabsTrigger
primitive with count pills, matching the skills tab-row rhythm; the search
field pins to the tab row's right edge.
- Empty + no-results states use the shared EmptyState primitive.
- Installed server status is exception-only (#651): a healthy/expected server
shows no status color — its label rides plain muted text and a neutral dot;
only a real 连接失败 raises a destructive Chip + colored dot.
- The 把 Maka 连接到你的工作环境 banner's pictogram cluster becomes labeled
library-icon tiles (Terminal/Plug/Globe), and the per-template market marks
drop their hand-drawn brand SVGs for the catalog text mark on the existing
brand-tinted tile (de-inlines all 6 inline <svg> in this file — Task A).
…the funnel
Hand-drawn inline SVG is an anti-pattern — generic UI glyphs must ride the
@maka/ui/icons lucide funnel so they share one stroke, sizing seam and family.
- menu.tsx: the checkbox + radio ItemIndicator glyphs drop their inline check
<svg> for <Check> from ../icons.js (same precedent as model-picker's
ItemIndicator), keeping the lucide funnel intact.
- icon-governance-contract: a new pin machine-walks packages/ui/src and
apps/desktop/src/renderer (the same tree-walk the repo-wide OverlayScrollbars
ban uses) and fails on any <svg> literal in a .tsx outside an audited
brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx). The
allowlist is guarded against rot; new offenders fail with a message pointing
at @maka/ui/icons. icons.tsx needs no exemption — it is a pure lucide
re-export with zero <svg> literals.
The MCP module page now has a visual-smoke fixture; add it to the
audit-alignment FIXTURES so the row-alignment governance tool sweeps the
polished header, tab row, market grid and installed list too.
@jackwener
jackwener merged commit c2239d2 into mainJul 18, 2026
jackwener added a commit that referenced this pull request Jul 18, 2026
#1205 replaced the MCP market's official brand marks with generic text
marks (S / LINE / 31 / F / ▲ / S) — wrong direction. Famous brands must
show their real logos. This restores the six official marks using the
same architecture provider-brand-marks.tsx already established: vendored
.svg assets imported as URLs, rendered via <img> (color) or a currentColor
mask (monochrome), never inline hand-drawn <svg> in the component TSX.
- Recover Slack / LINE / Google Calendar / Figma / Vercel / Supabase SVGs
byte-faithfully from the pre-#1205 inline markup (commit e48be52) into
apps/desktop/src/renderer/assets/mcp-brands/*.svg.
- Add McpBrandMark + hasMcpBrandMark (mcp-brand-marks.tsx). Color marks
ride <img>; monochrome ▲/LINE ride a mask so they inherit the plate
foreground in light + dark. Brands without a faithful asset (钉钉/飞书/
Notion/macOS/…) keep the catalog text mark — no hand-drawn approximations.
- Wire McpCatalogCard (market + installed tiles) to McpBrandMark; branded
tiles drop the per-brand tint for a quiet neutral plate, matching how
.providerLogo treats color marks. Drop the now-unused brand tint tokens.
Governance: the component imports .svg assets (not .tsx <svg> literals), so
it needs no icon-governance inline-SVG allowlist entry. Tile polish from
#1205 is preserved; only the logo removal is reverted.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jackwener
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language by jackwener · Pull Request #1205 · apache/maka · GitHub
Skip to content

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language - #1205

Merged
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish
Jul 18, 2026
Merged

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language#1205
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish

Conversation

@jackwener

Copy link
Copy Markdown
Member

Two user directives in one campaign: 手绘 SVG 是反模式 (replace + govern) and MCP 页面不够美观 (polish).

Inline-SVG sweep + governance

Scope finding: the 6 inline SVGs in mcp-page.tsx were BRAND LOGOS (Slack/LINE/Google-Calendar/Figma/Vercel/Supabase), not UI glyphs — the banner pictograms were already lucide. Convergence: all market tiles now use the catalog's majority treatment (text marks on brand-tinted tiles — 钉/飞/N/⌘ were already this; the 6 special-cased logos were the inconsistency). menu.tsx's two hand-drawn indicator glyphs → Check from the icons funnel (model-picker precedent).

Governance: icon-governance-contract gains a machine tree-walk ban — any <svg literal in .tsx under packages/ui/src or apps/desktop/src/renderer outside the audited brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx) fails the suite with a pointer to @maka/ui/icons. Allowlist is rot-guarded (losing the SVG fails too). Hand-drawn SVG can no longer re-enter.

MCP page polish

DriftConverged
Hand-rolled headerPageHeader primitive, edged actions, 添加 MCP primary
Hand-rolled tabsshared underline TabsList + count pills, search right — skills rhythm
Banner icon striplabeled tiles: Terminal 本地 stdio / Plug 连接管理 / Globe 远程 HTTP
Hand-rolled empty statesEmptyState primitive
Every install state coloredexception-only: healthy = neutral; only 连接失败 raises destructive Chip

Zero behavior change (mcp-market contract pins verified verbatim). Plus: module-mcp visual-smoke fixture added and wired into the alignment auditor — the page is now under permanent visual governance.

Gates (merged tree = main tip already contained)

desktop 2699/2699 · ui 183/183 · typecheck · check-dead-css · knip ×2 = 0 · auditor all fixtures clean incl. module-mcp. CDP light+dark captures visually accepted by maintainer before merge. Implemented by an opus worktree agent.

Seeds the 扩展 → MCP module surface (sidebarSection 'mcp') with an mcp.json
holding two disabled servers, so the market grid, tab row, hero banner and
installed server list all render deterministically for the alignment auditor
and CDP capture. enabled:false keeps visual-smoke from attempting real npx /
HTTP connections, so rows settle in the neutral 已停用 state.
Converge the MCP module page onto the same bar as the 技能 page and the 每日回顾
redesign, presentation-only (same IPC/props/callbacks):
- Hero header now rides the shared PageHeader primitive (as=h2, title/subtitle
+ edged actions cluster; 添加 MCP is the primary CTA).
- Market/installed tabs move onto the shared underline TabsList/TabsTrigger
primitive with count pills, matching the skills tab-row rhythm; the search
field pins to the tab row's right edge.
- Empty + no-results states use the shared EmptyState primitive.
- Installed server status is exception-only (#651): a healthy/expected server
shows no status color — its label rides plain muted text and a neutral dot;
only a real 连接失败 raises a destructive Chip + colored dot.
- The 把 Maka 连接到你的工作环境 banner's pictogram cluster becomes labeled
library-icon tiles (Terminal/Plug/Globe), and the per-template market marks
drop their hand-drawn brand SVGs for the catalog text mark on the existing
brand-tinted tile (de-inlines all 6 inline <svg> in this file — Task A).
…the funnel
Hand-drawn inline SVG is an anti-pattern — generic UI glyphs must ride the
@maka/ui/icons lucide funnel so they share one stroke, sizing seam and family.
- menu.tsx: the checkbox + radio ItemIndicator glyphs drop their inline check
<svg> for <Check> from ../icons.js (same precedent as model-picker's
ItemIndicator), keeping the lucide funnel intact.
- icon-governance-contract: a new pin machine-walks packages/ui/src and
apps/desktop/src/renderer (the same tree-walk the repo-wide OverlayScrollbars
ban uses) and fails on any <svg> literal in a .tsx outside an audited
brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx). The
allowlist is guarded against rot; new offenders fail with a message pointing
at @maka/ui/icons. icons.tsx needs no exemption — it is a pure lucide
re-export with zero <svg> literals.
The MCP module page now has a visual-smoke fixture; add it to the
audit-alignment FIXTURES so the row-alignment governance tool sweeps the
polished header, tab row, market grid and installed list too.
@jackwener
jackwener merged commit c2239d2 into mainJul 18, 2026
jackwener added a commit that referenced this pull request Jul 18, 2026
#1205 replaced the MCP market's official brand marks with generic text
marks (S / LINE / 31 / F / ▲ / S) — wrong direction. Famous brands must
show their real logos. This restores the six official marks using the
same architecture provider-brand-marks.tsx already established: vendored
.svg assets imported as URLs, rendered via <img> (color) or a currentColor
mask (monochrome), never inline hand-drawn <svg> in the component TSX.
- Recover Slack / LINE / Google Calendar / Figma / Vercel / Supabase SVGs
byte-faithfully from the pre-#1205 inline markup (commit e48be52) into
apps/desktop/src/renderer/assets/mcp-brands/*.svg.
- Add McpBrandMark + hasMcpBrandMark (mcp-brand-marks.tsx). Color marks
ride <img>; monochrome ▲/LINE ride a mask so they inherit the plate
foreground in light + dark. Brands without a faithful asset (钉钉/飞书/
Notion/macOS/…) keep the catalog text mark — no hand-drawn approximations.
- Wire McpCatalogCard (market + installed tiles) to McpBrandMark; branded
tiles drop the per-brand tint for a quiet neutral plate, matching how
.providerLogo treats color marks. Drop the now-unused brand tint tokens.
Governance: the component imports .svg assets (not .tsx <svg> literals), so
it needs no icon-governance inline-SVG allowlist entry. Tile polish from
#1205 is preserved; only the logo removal is reverted.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jackwener
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language by jackwener · Pull Request #1205 · apache/maka · GitHub
Skip to content

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language - #1205

Merged
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish
Jul 18, 2026
Merged

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language#1205
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish

Conversation

@jackwener

Copy link
Copy Markdown
Member

Two user directives in one campaign: 手绘 SVG 是反模式 (replace + govern) and MCP 页面不够美观 (polish).

Inline-SVG sweep + governance

Scope finding: the 6 inline SVGs in mcp-page.tsx were BRAND LOGOS (Slack/LINE/Google-Calendar/Figma/Vercel/Supabase), not UI glyphs — the banner pictograms were already lucide. Convergence: all market tiles now use the catalog's majority treatment (text marks on brand-tinted tiles — 钉/飞/N/⌘ were already this; the 6 special-cased logos were the inconsistency). menu.tsx's two hand-drawn indicator glyphs → Check from the icons funnel (model-picker precedent).

Governance: icon-governance-contract gains a machine tree-walk ban — any <svg literal in .tsx under packages/ui/src or apps/desktop/src/renderer outside the audited brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx) fails the suite with a pointer to @maka/ui/icons. Allowlist is rot-guarded (losing the SVG fails too). Hand-drawn SVG can no longer re-enter.

MCP page polish

DriftConverged
Hand-rolled headerPageHeader primitive, edged actions, 添加 MCP primary
Hand-rolled tabsshared underline TabsList + count pills, search right — skills rhythm
Banner icon striplabeled tiles: Terminal 本地 stdio / Plug 连接管理 / Globe 远程 HTTP
Hand-rolled empty statesEmptyState primitive
Every install state coloredexception-only: healthy = neutral; only 连接失败 raises destructive Chip

Zero behavior change (mcp-market contract pins verified verbatim). Plus: module-mcp visual-smoke fixture added and wired into the alignment auditor — the page is now under permanent visual governance.

Gates (merged tree = main tip already contained)

desktop 2699/2699 · ui 183/183 · typecheck · check-dead-css · knip ×2 = 0 · auditor all fixtures clean incl. module-mcp. CDP light+dark captures visually accepted by maintainer before merge. Implemented by an opus worktree agent.

Seeds the 扩展 → MCP module surface (sidebarSection 'mcp') with an mcp.json
holding two disabled servers, so the market grid, tab row, hero banner and
installed server list all render deterministically for the alignment auditor
and CDP capture. enabled:false keeps visual-smoke from attempting real npx /
HTTP connections, so rows settle in the neutral 已停用 state.
Converge the MCP module page onto the same bar as the 技能 page and the 每日回顾
redesign, presentation-only (same IPC/props/callbacks):
- Hero header now rides the shared PageHeader primitive (as=h2, title/subtitle
+ edged actions cluster; 添加 MCP is the primary CTA).
- Market/installed tabs move onto the shared underline TabsList/TabsTrigger
primitive with count pills, matching the skills tab-row rhythm; the search
field pins to the tab row's right edge.
- Empty + no-results states use the shared EmptyState primitive.
- Installed server status is exception-only (#651): a healthy/expected server
shows no status color — its label rides plain muted text and a neutral dot;
only a real 连接失败 raises a destructive Chip + colored dot.
- The 把 Maka 连接到你的工作环境 banner's pictogram cluster becomes labeled
library-icon tiles (Terminal/Plug/Globe), and the per-template market marks
drop their hand-drawn brand SVGs for the catalog text mark on the existing
brand-tinted tile (de-inlines all 6 inline <svg> in this file — Task A).
…the funnel
Hand-drawn inline SVG is an anti-pattern — generic UI glyphs must ride the
@maka/ui/icons lucide funnel so they share one stroke, sizing seam and family.
- menu.tsx: the checkbox + radio ItemIndicator glyphs drop their inline check
<svg> for <Check> from ../icons.js (same precedent as model-picker's
ItemIndicator), keeping the lucide funnel intact.
- icon-governance-contract: a new pin machine-walks packages/ui/src and
apps/desktop/src/renderer (the same tree-walk the repo-wide OverlayScrollbars
ban uses) and fails on any <svg> literal in a .tsx outside an audited
brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx). The
allowlist is guarded against rot; new offenders fail with a message pointing
at @maka/ui/icons. icons.tsx needs no exemption — it is a pure lucide
re-export with zero <svg> literals.
The MCP module page now has a visual-smoke fixture; add it to the
audit-alignment FIXTURES so the row-alignment governance tool sweeps the
polished header, tab row, market grid and installed list too.
@jackwener
jackwener merged commit c2239d2 into mainJul 18, 2026
jackwener added a commit that referenced this pull request Jul 18, 2026
#1205 replaced the MCP market's official brand marks with generic text
marks (S / LINE / 31 / F / ▲ / S) — wrong direction. Famous brands must
show their real logos. This restores the six official marks using the
same architecture provider-brand-marks.tsx already established: vendored
.svg assets imported as URLs, rendered via <img> (color) or a currentColor
mask (monochrome), never inline hand-drawn <svg> in the component TSX.
- Recover Slack / LINE / Google Calendar / Figma / Vercel / Supabase SVGs
byte-faithfully from the pre-#1205 inline markup (commit e48be52) into
apps/desktop/src/renderer/assets/mcp-brands/*.svg.
- Add McpBrandMark + hasMcpBrandMark (mcp-brand-marks.tsx). Color marks
ride <img>; monochrome ▲/LINE ride a mask so they inherit the plate
foreground in light + dark. Brands without a faithful asset (钉钉/飞书/
Notion/macOS/…) keep the catalog text mark — no hand-drawn approximations.
- Wire McpCatalogCard (market + installed tiles) to McpBrandMark; branded
tiles drop the per-brand tint for a quiet neutral plate, matching how
.providerLogo treats color marks. Drop the now-unused brand tint tokens.
Governance: the component imports .svg assets (not .tsx <svg> literals), so
it needs no icon-governance inline-SVG allowlist entry. Tile polish from
#1205 is preserved; only the logo removal is reverted.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jackwener
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language by jackwener · Pull Request #1205 · apache/maka · GitHub
Skip to content

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language - #1205

Merged
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish
Jul 18, 2026
Merged

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language#1205
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish

Conversation

@jackwener

Copy link
Copy Markdown
Member

Two user directives in one campaign: 手绘 SVG 是反模式 (replace + govern) and MCP 页面不够美观 (polish).

Inline-SVG sweep + governance

Scope finding: the 6 inline SVGs in mcp-page.tsx were BRAND LOGOS (Slack/LINE/Google-Calendar/Figma/Vercel/Supabase), not UI glyphs — the banner pictograms were already lucide. Convergence: all market tiles now use the catalog's majority treatment (text marks on brand-tinted tiles — 钉/飞/N/⌘ were already this; the 6 special-cased logos were the inconsistency). menu.tsx's two hand-drawn indicator glyphs → Check from the icons funnel (model-picker precedent).

Governance: icon-governance-contract gains a machine tree-walk ban — any <svg literal in .tsx under packages/ui/src or apps/desktop/src/renderer outside the audited brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx) fails the suite with a pointer to @maka/ui/icons. Allowlist is rot-guarded (losing the SVG fails too). Hand-drawn SVG can no longer re-enter.

MCP page polish

DriftConverged
Hand-rolled headerPageHeader primitive, edged actions, 添加 MCP primary
Hand-rolled tabsshared underline TabsList + count pills, search right — skills rhythm
Banner icon striplabeled tiles: Terminal 本地 stdio / Plug 连接管理 / Globe 远程 HTTP
Hand-rolled empty statesEmptyState primitive
Every install state coloredexception-only: healthy = neutral; only 连接失败 raises destructive Chip

Zero behavior change (mcp-market contract pins verified verbatim). Plus: module-mcp visual-smoke fixture added and wired into the alignment auditor — the page is now under permanent visual governance.

Gates (merged tree = main tip already contained)

desktop 2699/2699 · ui 183/183 · typecheck · check-dead-css · knip ×2 = 0 · auditor all fixtures clean incl. module-mcp. CDP light+dark captures visually accepted by maintainer before merge. Implemented by an opus worktree agent.

Seeds the 扩展 → MCP module surface (sidebarSection 'mcp') with an mcp.json
holding two disabled servers, so the market grid, tab row, hero banner and
installed server list all render deterministically for the alignment auditor
and CDP capture. enabled:false keeps visual-smoke from attempting real npx /
HTTP connections, so rows settle in the neutral 已停用 state.
Converge the MCP module page onto the same bar as the 技能 page and the 每日回顾
redesign, presentation-only (same IPC/props/callbacks):
- Hero header now rides the shared PageHeader primitive (as=h2, title/subtitle
+ edged actions cluster; 添加 MCP is the primary CTA).
- Market/installed tabs move onto the shared underline TabsList/TabsTrigger
primitive with count pills, matching the skills tab-row rhythm; the search
field pins to the tab row's right edge.
- Empty + no-results states use the shared EmptyState primitive.
- Installed server status is exception-only (#651): a healthy/expected server
shows no status color — its label rides plain muted text and a neutral dot;
only a real 连接失败 raises a destructive Chip + colored dot.
- The 把 Maka 连接到你的工作环境 banner's pictogram cluster becomes labeled
library-icon tiles (Terminal/Plug/Globe), and the per-template market marks
drop their hand-drawn brand SVGs for the catalog text mark on the existing
brand-tinted tile (de-inlines all 6 inline <svg> in this file — Task A).
…the funnel
Hand-drawn inline SVG is an anti-pattern — generic UI glyphs must ride the
@maka/ui/icons lucide funnel so they share one stroke, sizing seam and family.
- menu.tsx: the checkbox + radio ItemIndicator glyphs drop their inline check
<svg> for <Check> from ../icons.js (same precedent as model-picker's
ItemIndicator), keeping the lucide funnel intact.
- icon-governance-contract: a new pin machine-walks packages/ui/src and
apps/desktop/src/renderer (the same tree-walk the repo-wide OverlayScrollbars
ban uses) and fails on any <svg> literal in a .tsx outside an audited
brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx). The
allowlist is guarded against rot; new offenders fail with a message pointing
at @maka/ui/icons. icons.tsx needs no exemption — it is a pure lucide
re-export with zero <svg> literals.
The MCP module page now has a visual-smoke fixture; add it to the
audit-alignment FIXTURES so the row-alignment governance tool sweeps the
polished header, tab row, market grid and installed list too.
@jackwener
jackwener merged commit c2239d2 into mainJul 18, 2026
jackwener added a commit that referenced this pull request Jul 18, 2026
#1205 replaced the MCP market's official brand marks with generic text
marks (S / LINE / 31 / F / ▲ / S) — wrong direction. Famous brands must
show their real logos. This restores the six official marks using the
same architecture provider-brand-marks.tsx already established: vendored
.svg assets imported as URLs, rendered via <img> (color) or a currentColor
mask (monochrome), never inline hand-drawn <svg> in the component TSX.
- Recover Slack / LINE / Google Calendar / Figma / Vercel / Supabase SVGs
byte-faithfully from the pre-#1205 inline markup (commit e48be52) into
apps/desktop/src/renderer/assets/mcp-brands/*.svg.
- Add McpBrandMark + hasMcpBrandMark (mcp-brand-marks.tsx). Color marks
ride <img>; monochrome ▲/LINE ride a mask so they inherit the plate
foreground in light + dark. Brands without a faithful asset (钉钉/飞书/
Notion/macOS/…) keep the catalog text mark — no hand-drawn approximations.
- Wire McpCatalogCard (market + installed tiles) to McpBrandMark; branded
tiles drop the per-brand tint for a quiet neutral plate, matching how
.providerLogo treats color marks. Drop the now-unused brand tint tokens.
Governance: the component imports .svg assets (not .tsx <svg> literals), so
it needs no icon-governance inline-SVG allowlist entry. Tile polish from
#1205 is preserved; only the logo removal is reverted.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jackwener
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language by jackwener · Pull Request #1205 · apache/maka · GitHub
Skip to content

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language - #1205

Merged
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish
Jul 18, 2026
Merged

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language#1205
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish

Conversation

@jackwener

Copy link
Copy Markdown
Member

Two user directives in one campaign: 手绘 SVG 是反模式 (replace + govern) and MCP 页面不够美观 (polish).

Inline-SVG sweep + governance

Scope finding: the 6 inline SVGs in mcp-page.tsx were BRAND LOGOS (Slack/LINE/Google-Calendar/Figma/Vercel/Supabase), not UI glyphs — the banner pictograms were already lucide. Convergence: all market tiles now use the catalog's majority treatment (text marks on brand-tinted tiles — 钉/飞/N/⌘ were already this; the 6 special-cased logos were the inconsistency). menu.tsx's two hand-drawn indicator glyphs → Check from the icons funnel (model-picker precedent).

Governance: icon-governance-contract gains a machine tree-walk ban — any <svg literal in .tsx under packages/ui/src or apps/desktop/src/renderer outside the audited brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx) fails the suite with a pointer to @maka/ui/icons. Allowlist is rot-guarded (losing the SVG fails too). Hand-drawn SVG can no longer re-enter.

MCP page polish

DriftConverged
Hand-rolled headerPageHeader primitive, edged actions, 添加 MCP primary
Hand-rolled tabsshared underline TabsList + count pills, search right — skills rhythm
Banner icon striplabeled tiles: Terminal 本地 stdio / Plug 连接管理 / Globe 远程 HTTP
Hand-rolled empty statesEmptyState primitive
Every install state coloredexception-only: healthy = neutral; only 连接失败 raises destructive Chip

Zero behavior change (mcp-market contract pins verified verbatim). Plus: module-mcp visual-smoke fixture added and wired into the alignment auditor — the page is now under permanent visual governance.

Gates (merged tree = main tip already contained)

desktop 2699/2699 · ui 183/183 · typecheck · check-dead-css · knip ×2 = 0 · auditor all fixtures clean incl. module-mcp. CDP light+dark captures visually accepted by maintainer before merge. Implemented by an opus worktree agent.

Seeds the 扩展 → MCP module surface (sidebarSection 'mcp') with an mcp.json
holding two disabled servers, so the market grid, tab row, hero banner and
installed server list all render deterministically for the alignment auditor
and CDP capture. enabled:false keeps visual-smoke from attempting real npx /
HTTP connections, so rows settle in the neutral 已停用 state.
Converge the MCP module page onto the same bar as the 技能 page and the 每日回顾
redesign, presentation-only (same IPC/props/callbacks):
- Hero header now rides the shared PageHeader primitive (as=h2, title/subtitle
+ edged actions cluster; 添加 MCP is the primary CTA).
- Market/installed tabs move onto the shared underline TabsList/TabsTrigger
primitive with count pills, matching the skills tab-row rhythm; the search
field pins to the tab row's right edge.
- Empty + no-results states use the shared EmptyState primitive.
- Installed server status is exception-only (#651): a healthy/expected server
shows no status color — its label rides plain muted text and a neutral dot;
only a real 连接失败 raises a destructive Chip + colored dot.
- The 把 Maka 连接到你的工作环境 banner's pictogram cluster becomes labeled
library-icon tiles (Terminal/Plug/Globe), and the per-template market marks
drop their hand-drawn brand SVGs for the catalog text mark on the existing
brand-tinted tile (de-inlines all 6 inline <svg> in this file — Task A).
…the funnel
Hand-drawn inline SVG is an anti-pattern — generic UI glyphs must ride the
@maka/ui/icons lucide funnel so they share one stroke, sizing seam and family.
- menu.tsx: the checkbox + radio ItemIndicator glyphs drop their inline check
<svg> for <Check> from ../icons.js (same precedent as model-picker's
ItemIndicator), keeping the lucide funnel intact.
- icon-governance-contract: a new pin machine-walks packages/ui/src and
apps/desktop/src/renderer (the same tree-walk the repo-wide OverlayScrollbars
ban uses) and fails on any <svg> literal in a .tsx outside an audited
brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx). The
allowlist is guarded against rot; new offenders fail with a message pointing
at @maka/ui/icons. icons.tsx needs no exemption — it is a pure lucide
re-export with zero <svg> literals.
The MCP module page now has a visual-smoke fixture; add it to the
audit-alignment FIXTURES so the row-alignment governance tool sweeps the
polished header, tab row, market grid and installed list too.
@jackwener
jackwener merged commit c2239d2 into mainJul 18, 2026
jackwener added a commit that referenced this pull request Jul 18, 2026
#1205 replaced the MCP market's official brand marks with generic text
marks (S / LINE / 31 / F / ▲ / S) — wrong direction. Famous brands must
show their real logos. This restores the six official marks using the
same architecture provider-brand-marks.tsx already established: vendored
.svg assets imported as URLs, rendered via <img> (color) or a currentColor
mask (monochrome), never inline hand-drawn <svg> in the component TSX.
- Recover Slack / LINE / Google Calendar / Figma / Vercel / Supabase SVGs
byte-faithfully from the pre-#1205 inline markup (commit e48be52) into
apps/desktop/src/renderer/assets/mcp-brands/*.svg.
- Add McpBrandMark + hasMcpBrandMark (mcp-brand-marks.tsx). Color marks
ride <img>; monochrome ▲/LINE ride a mask so they inherit the plate
foreground in light + dark. Brands without a faithful asset (钉钉/飞书/
Notion/macOS/…) keep the catalog text mark — no hand-drawn approximations.
- Wire McpCatalogCard (market + installed tiles) to McpBrandMark; branded
tiles drop the per-brand tint for a quiet neutral plate, matching how
.providerLogo treats color marks. Drop the now-unused brand tint tokens.
Governance: the component imports .svg assets (not .tsx <svg> literals), so
it needs no icon-governance inline-SVG allowlist entry. Tile polish from
#1205 is preserved; only the logo removal is reverted.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jackwener
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language by jackwener · Pull Request #1205 · apache/maka · GitHub
Skip to content

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language - #1205

Merged
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish
Jul 18, 2026
Merged

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language#1205
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish

Conversation

@jackwener

Copy link
Copy Markdown
Member

Two user directives in one campaign: 手绘 SVG 是反模式 (replace + govern) and MCP 页面不够美观 (polish).

Inline-SVG sweep + governance

Scope finding: the 6 inline SVGs in mcp-page.tsx were BRAND LOGOS (Slack/LINE/Google-Calendar/Figma/Vercel/Supabase), not UI glyphs — the banner pictograms were already lucide. Convergence: all market tiles now use the catalog's majority treatment (text marks on brand-tinted tiles — 钉/飞/N/⌘ were already this; the 6 special-cased logos were the inconsistency). menu.tsx's two hand-drawn indicator glyphs → Check from the icons funnel (model-picker precedent).

Governance: icon-governance-contract gains a machine tree-walk ban — any <svg literal in .tsx under packages/ui/src or apps/desktop/src/renderer outside the audited brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx) fails the suite with a pointer to @maka/ui/icons. Allowlist is rot-guarded (losing the SVG fails too). Hand-drawn SVG can no longer re-enter.

MCP page polish

DriftConverged
Hand-rolled headerPageHeader primitive, edged actions, 添加 MCP primary
Hand-rolled tabsshared underline TabsList + count pills, search right — skills rhythm
Banner icon striplabeled tiles: Terminal 本地 stdio / Plug 连接管理 / Globe 远程 HTTP
Hand-rolled empty statesEmptyState primitive
Every install state coloredexception-only: healthy = neutral; only 连接失败 raises destructive Chip

Zero behavior change (mcp-market contract pins verified verbatim). Plus: module-mcp visual-smoke fixture added and wired into the alignment auditor — the page is now under permanent visual governance.

Gates (merged tree = main tip already contained)

desktop 2699/2699 · ui 183/183 · typecheck · check-dead-css · knip ×2 = 0 · auditor all fixtures clean incl. module-mcp. CDP light+dark captures visually accepted by maintainer before merge. Implemented by an opus worktree agent.

Seeds the 扩展 → MCP module surface (sidebarSection 'mcp') with an mcp.json
holding two disabled servers, so the market grid, tab row, hero banner and
installed server list all render deterministically for the alignment auditor
and CDP capture. enabled:false keeps visual-smoke from attempting real npx /
HTTP connections, so rows settle in the neutral 已停用 state.
Converge the MCP module page onto the same bar as the 技能 page and the 每日回顾
redesign, presentation-only (same IPC/props/callbacks):
- Hero header now rides the shared PageHeader primitive (as=h2, title/subtitle
+ edged actions cluster; 添加 MCP is the primary CTA).
- Market/installed tabs move onto the shared underline TabsList/TabsTrigger
primitive with count pills, matching the skills tab-row rhythm; the search
field pins to the tab row's right edge.
- Empty + no-results states use the shared EmptyState primitive.
- Installed server status is exception-only (#651): a healthy/expected server
shows no status color — its label rides plain muted text and a neutral dot;
only a real 连接失败 raises a destructive Chip + colored dot.
- The 把 Maka 连接到你的工作环境 banner's pictogram cluster becomes labeled
library-icon tiles (Terminal/Plug/Globe), and the per-template market marks
drop their hand-drawn brand SVGs for the catalog text mark on the existing
brand-tinted tile (de-inlines all 6 inline <svg> in this file — Task A).
…the funnel
Hand-drawn inline SVG is an anti-pattern — generic UI glyphs must ride the
@maka/ui/icons lucide funnel so they share one stroke, sizing seam and family.
- menu.tsx: the checkbox + radio ItemIndicator glyphs drop their inline check
<svg> for <Check> from ../icons.js (same precedent as model-picker's
ItemIndicator), keeping the lucide funnel intact.
- icon-governance-contract: a new pin machine-walks packages/ui/src and
apps/desktop/src/renderer (the same tree-walk the repo-wide OverlayScrollbars
ban uses) and fails on any <svg> literal in a .tsx outside an audited
brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx). The
allowlist is guarded against rot; new offenders fail with a message pointing
at @maka/ui/icons. icons.tsx needs no exemption — it is a pure lucide
re-export with zero <svg> literals.
The MCP module page now has a visual-smoke fixture; add it to the
audit-alignment FIXTURES so the row-alignment governance tool sweeps the
polished header, tab row, market grid and installed list too.
@jackwener
jackwener merged commit c2239d2 into mainJul 18, 2026
jackwener added a commit that referenced this pull request Jul 18, 2026
#1205 replaced the MCP market's official brand marks with generic text
marks (S / LINE / 31 / F / ▲ / S) — wrong direction. Famous brands must
show their real logos. This restores the six official marks using the
same architecture provider-brand-marks.tsx already established: vendored
.svg assets imported as URLs, rendered via <img> (color) or a currentColor
mask (monochrome), never inline hand-drawn <svg> in the component TSX.
- Recover Slack / LINE / Google Calendar / Figma / Vercel / Supabase SVGs
byte-faithfully from the pre-#1205 inline markup (commit e48be52) into
apps/desktop/src/renderer/assets/mcp-brands/*.svg.
- Add McpBrandMark + hasMcpBrandMark (mcp-brand-marks.tsx). Color marks
ride <img>; monochrome ▲/LINE ride a mask so they inherit the plate
foreground in light + dark. Brands without a faithful asset (钉钉/飞书/
Notion/macOS/…) keep the catalog text mark — no hand-drawn approximations.
- Wire McpCatalogCard (market + installed tiles) to McpBrandMark; branded
tiles drop the per-brand tint for a quiet neutral plate, matching how
.providerLogo treats color marks. Drop the now-unused brand tint tokens.
Governance: the component imports .svg assets (not .tsx <svg> literals), so
it needs no icon-governance inline-SVG allowlist entry. Tile polish from
#1205 is preserved; only the logo removal is reverted.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jackwener
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language by jackwener · Pull Request #1205 · apache/maka · GitHub
Skip to content

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language - #1205

Merged
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish
Jul 18, 2026
Merged

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language#1205
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish

Conversation

@jackwener

Copy link
Copy Markdown
Member

Two user directives in one campaign: 手绘 SVG 是反模式 (replace + govern) and MCP 页面不够美观 (polish).

Inline-SVG sweep + governance

Scope finding: the 6 inline SVGs in mcp-page.tsx were BRAND LOGOS (Slack/LINE/Google-Calendar/Figma/Vercel/Supabase), not UI glyphs — the banner pictograms were already lucide. Convergence: all market tiles now use the catalog's majority treatment (text marks on brand-tinted tiles — 钉/飞/N/⌘ were already this; the 6 special-cased logos were the inconsistency). menu.tsx's two hand-drawn indicator glyphs → Check from the icons funnel (model-picker precedent).

Governance: icon-governance-contract gains a machine tree-walk ban — any <svg literal in .tsx under packages/ui/src or apps/desktop/src/renderer outside the audited brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx) fails the suite with a pointer to @maka/ui/icons. Allowlist is rot-guarded (losing the SVG fails too). Hand-drawn SVG can no longer re-enter.

MCP page polish

DriftConverged
Hand-rolled headerPageHeader primitive, edged actions, 添加 MCP primary
Hand-rolled tabsshared underline TabsList + count pills, search right — skills rhythm
Banner icon striplabeled tiles: Terminal 本地 stdio / Plug 连接管理 / Globe 远程 HTTP
Hand-rolled empty statesEmptyState primitive
Every install state coloredexception-only: healthy = neutral; only 连接失败 raises destructive Chip

Zero behavior change (mcp-market contract pins verified verbatim). Plus: module-mcp visual-smoke fixture added and wired into the alignment auditor — the page is now under permanent visual governance.

Gates (merged tree = main tip already contained)

desktop 2699/2699 · ui 183/183 · typecheck · check-dead-css · knip ×2 = 0 · auditor all fixtures clean incl. module-mcp. CDP light+dark captures visually accepted by maintainer before merge. Implemented by an opus worktree agent.

Seeds the 扩展 → MCP module surface (sidebarSection 'mcp') with an mcp.json
holding two disabled servers, so the market grid, tab row, hero banner and
installed server list all render deterministically for the alignment auditor
and CDP capture. enabled:false keeps visual-smoke from attempting real npx /
HTTP connections, so rows settle in the neutral 已停用 state.
Converge the MCP module page onto the same bar as the 技能 page and the 每日回顾
redesign, presentation-only (same IPC/props/callbacks):
- Hero header now rides the shared PageHeader primitive (as=h2, title/subtitle
+ edged actions cluster; 添加 MCP is the primary CTA).
- Market/installed tabs move onto the shared underline TabsList/TabsTrigger
primitive with count pills, matching the skills tab-row rhythm; the search
field pins to the tab row's right edge.
- Empty + no-results states use the shared EmptyState primitive.
- Installed server status is exception-only (#651): a healthy/expected server
shows no status color — its label rides plain muted text and a neutral dot;
only a real 连接失败 raises a destructive Chip + colored dot.
- The 把 Maka 连接到你的工作环境 banner's pictogram cluster becomes labeled
library-icon tiles (Terminal/Plug/Globe), and the per-template market marks
drop their hand-drawn brand SVGs for the catalog text mark on the existing
brand-tinted tile (de-inlines all 6 inline <svg> in this file — Task A).
…the funnel
Hand-drawn inline SVG is an anti-pattern — generic UI glyphs must ride the
@maka/ui/icons lucide funnel so they share one stroke, sizing seam and family.
- menu.tsx: the checkbox + radio ItemIndicator glyphs drop their inline check
<svg> for <Check> from ../icons.js (same precedent as model-picker's
ItemIndicator), keeping the lucide funnel intact.
- icon-governance-contract: a new pin machine-walks packages/ui/src and
apps/desktop/src/renderer (the same tree-walk the repo-wide OverlayScrollbars
ban uses) and fails on any <svg> literal in a .tsx outside an audited
brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx). The
allowlist is guarded against rot; new offenders fail with a message pointing
at @maka/ui/icons. icons.tsx needs no exemption — it is a pure lucide
re-export with zero <svg> literals.
The MCP module page now has a visual-smoke fixture; add it to the
audit-alignment FIXTURES so the row-alignment governance tool sweeps the
polished header, tab row, market grid and installed list too.
@jackwener
jackwener merged commit c2239d2 into mainJul 18, 2026
jackwener added a commit that referenced this pull request Jul 18, 2026
#1205 replaced the MCP market's official brand marks with generic text
marks (S / LINE / 31 / F / ▲ / S) — wrong direction. Famous brands must
show their real logos. This restores the six official marks using the
same architecture provider-brand-marks.tsx already established: vendored
.svg assets imported as URLs, rendered via <img> (color) or a currentColor
mask (monochrome), never inline hand-drawn <svg> in the component TSX.
- Recover Slack / LINE / Google Calendar / Figma / Vercel / Supabase SVGs
byte-faithfully from the pre-#1205 inline markup (commit e48be52) into
apps/desktop/src/renderer/assets/mcp-brands/*.svg.
- Add McpBrandMark + hasMcpBrandMark (mcp-brand-marks.tsx). Color marks
ride <img>; monochrome ▲/LINE ride a mask so they inherit the plate
foreground in light + dark. Brands without a faithful asset (钉钉/飞书/
Notion/macOS/…) keep the catalog text mark — no hand-drawn approximations.
- Wire McpCatalogCard (market + installed tiles) to McpBrandMark; branded
tiles drop the per-brand tint for a quiet neutral plate, matching how
.providerLogo treats color marks. Drop the now-unused brand tint tokens.
Governance: the component imports .svg assets (not .tsx <svg> literals), so
it needs no icon-governance inline-SVG allowlist entry. Tile polish from
#1205 is preserved; only the logo removal is reverted.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jackwener
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language by jackwener · Pull Request #1205 · apache/maka · GitHub
Skip to content

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language - #1205

Merged
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish
Jul 18, 2026
Merged

feat(icons+mcp): ban hand-drawn inline SVG repo-wide, polish the MCP page onto the house language#1205
jackwener merged 4 commits into
mainfrom
feat/svg-governance-mcp-polish

Conversation

@jackwener

Copy link
Copy Markdown
Member

Two user directives in one campaign: 手绘 SVG 是反模式 (replace + govern) and MCP 页面不够美观 (polish).

Inline-SVG sweep + governance

Scope finding: the 6 inline SVGs in mcp-page.tsx were BRAND LOGOS (Slack/LINE/Google-Calendar/Figma/Vercel/Supabase), not UI glyphs — the banner pictograms were already lucide. Convergence: all market tiles now use the catalog's majority treatment (text marks on brand-tinted tiles — 钉/飞/N/⌘ were already this; the 6 special-cased logos were the inconsistency). menu.tsx's two hand-drawn indicator glyphs → Check from the icons funnel (model-picker precedent).

Governance: icon-governance-contract gains a machine tree-walk ban — any <svg literal in .tsx under packages/ui/src or apps/desktop/src/renderer outside the audited brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx) fails the suite with a pointer to @maka/ui/icons. Allowlist is rot-guarded (losing the SVG fails too). Hand-drawn SVG can no longer re-enter.

MCP page polish

DriftConverged
Hand-rolled headerPageHeader primitive, edged actions, 添加 MCP primary
Hand-rolled tabsshared underline TabsList + count pills, search right — skills rhythm
Banner icon striplabeled tiles: Terminal 本地 stdio / Plug 连接管理 / Globe 远程 HTTP
Hand-rolled empty statesEmptyState primitive
Every install state coloredexception-only: healthy = neutral; only 连接失败 raises destructive Chip

Zero behavior change (mcp-market contract pins verified verbatim). Plus: module-mcp visual-smoke fixture added and wired into the alignment auditor — the page is now under permanent visual governance.

Gates (merged tree = main tip already contained)

desktop 2699/2699 · ui 183/183 · typecheck · check-dead-css · knip ×2 = 0 · auditor all fixtures clean incl. module-mcp. CDP light+dark captures visually accepted by maintainer before merge. Implemented by an opus worktree agent.

Seeds the 扩展 → MCP module surface (sidebarSection 'mcp') with an mcp.json
holding two disabled servers, so the market grid, tab row, hero banner and
installed server list all render deterministically for the alignment auditor
and CDP capture. enabled:false keeps visual-smoke from attempting real npx /
HTTP connections, so rows settle in the neutral 已停用 state.
Converge the MCP module page onto the same bar as the 技能 page and the 每日回顾
redesign, presentation-only (same IPC/props/callbacks):
- Hero header now rides the shared PageHeader primitive (as=h2, title/subtitle
+ edged actions cluster; 添加 MCP is the primary CTA).
- Market/installed tabs move onto the shared underline TabsList/TabsTrigger
primitive with count pills, matching the skills tab-row rhythm; the search
field pins to the tab row's right edge.
- Empty + no-results states use the shared EmptyState primitive.
- Installed server status is exception-only (#651): a healthy/expected server
shows no status color — its label rides plain muted text and a neutral dot;
only a real 连接失败 raises a destructive Chip + colored dot.
- The 把 Maka 连接到你的工作环境 banner's pictogram cluster becomes labeled
library-icon tiles (Terminal/Plug/Globe), and the per-template market marks
drop their hand-drawn brand SVGs for the catalog text mark on the existing
brand-tinted tile (de-inlines all 6 inline <svg> in this file — Task A).
…the funnel
Hand-drawn inline SVG is an anti-pattern — generic UI glyphs must ride the
@maka/ui/icons lucide funnel so they share one stroke, sizing seam and family.
- menu.tsx: the checkbox + radio ItemIndicator glyphs drop their inline check
<svg> for <Check> from ../icons.js (same precedent as model-picker's
ItemIndicator), keeping the lucide funnel intact.
- icon-governance-contract: a new pin machine-walks packages/ui/src and
apps/desktop/src/renderer (the same tree-walk the repo-wide OverlayScrollbars
ban uses) and fails on any <svg> literal in a .tsx outside an audited
brand-mark allowlist (bot-brand-logo.tsx, provider-brand-marks.tsx). The
allowlist is guarded against rot; new offenders fail with a message pointing
at @maka/ui/icons. icons.tsx needs no exemption — it is a pure lucide
re-export with zero <svg> literals.
The MCP module page now has a visual-smoke fixture; add it to the
audit-alignment FIXTURES so the row-alignment governance tool sweeps the
polished header, tab row, market grid and installed list too.
@jackwener
jackwener merged commit c2239d2 into mainJul 18, 2026
jackwener added a commit that referenced this pull request Jul 18, 2026
#1205 replaced the MCP market's official brand marks with generic text
marks (S / LINE / 31 / F / ▲ / S) — wrong direction. Famous brands must
show their real logos. This restores the six official marks using the
same architecture provider-brand-marks.tsx already established: vendored
.svg assets imported as URLs, rendered via <img> (color) or a currentColor
mask (monochrome), never inline hand-drawn <svg> in the component TSX.
- Recover Slack / LINE / Google Calendar / Figma / Vercel / Supabase SVGs
byte-faithfully from the pre-#1205 inline markup (commit e48be52) into
apps/desktop/src/renderer/assets/mcp-brands/*.svg.
- Add McpBrandMark + hasMcpBrandMark (mcp-brand-marks.tsx). Color marks
ride <img>; monochrome ▲/LINE ride a mask so they inherit the plate
foreground in light + dark. Brands without a faithful asset (钉钉/飞书/
Notion/macOS/…) keep the catalog text mark — no hand-drawn approximations.
- Wire McpCatalogCard (market + installed tiles) to McpBrandMark; branded
tiles drop the per-brand tint for a quiet neutral plate, matching how
.providerLogo treats color marks. Drop the now-unused brand tint tokens.
Governance: the component imports .svg assets (not .tsx <svg> literals), so
it needs no icon-governance inline-SVG allowlist entry. Tile polish from
#1205 is preserved; only the logo removal is reverted.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jackwener