Remove LLM Wiki design screenshot assets

This commit is contained in:
Dotta committed 2026-05-10 07:38:47 -05:00
1 parent 7bbc705413
commit ebcd5d326f
57 files changed
+3 -2634

No files matched your search

@@ -1,3 +1,4 @@
dist
node_modules
.paperclip-sdk
screenshots
+2 -2
View File
@@ -75,8 +75,8 @@ The focused Vitest suite covers:
Remaining alpha gaps:
- Browser screenshot capture is maintained separately under `tests/screenshots`
and is not part of the cheap package verification path above.
- Browser screenshot capture is maintained separately under `tests/screenshots`;
generated `screenshots/` outputs are local artifacts and are ignored by git.
- Host-level plugin install and live agent invocation still need Paperclip
server/runtime smoke coverage when preparing a release candidate.
@@ -1,290 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="_tokens.css" />
<style>
body { display: flex; }
.shell {
display: grid;
grid-template-columns: 264px 1fr;
width: 1440px;
height: 900px;
background: var(--bg);
}
aside.wiki-sidebar {
border-right: 1px solid var(--border);
background: var(--bg);
display: flex;
flex-direction: column;
min-height: 0;
}
.crumb {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 14px;
font-size: 12px;
color: var(--muted);
}
.nav-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
border-top: 1px solid var(--border);
padding: 12px;
}
.nav-scroll-bottom {
border-top: 1px solid var(--border);
padding: 12px;
}
.nav-link {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: rgb(245 245 245 / 0.8);
cursor: pointer;
}
.nav-link:hover {
background: oklch(0.269 0 0 / 0.5);
color: var(--fg);
}
.nav-link.active {
background: var(--accent);
color: var(--fg);
}
.section-heading {
display: flex;
align-items: center;
gap: 6px;
padding: 0 8px;
margin: 14px 0 6px;
height: 24px;
}
.section-heading .label {
flex: 1;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--muted);
}
.space-row {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
position: relative;
}
.space-row:hover { background: oklch(0.269 0 0 / 0.5); }
.space-row .chev {
width: 14px; height: 14px; color: var(--muted); flex-shrink: 0;
}
.space-row .space-name {
flex: 1;
font-size: 13px;
font-weight: 600;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.space-row .menu-btn {
opacity: 0;
transition: opacity 80ms ease;
}
.space-row:hover .menu-btn,
.space-row[data-hover="true"] .menu-btn { opacity: 1; }
.space-row.active { background: var(--accent); }
.tree {
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 1px;
margin-bottom: 2px;
}
.tree-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
border-radius: 4px;
font-size: 12.5px;
color: rgb(245 245 245 / 0.78);
cursor: pointer;
}
.tree-row:hover { background: oklch(0.269 0 0 / 0.4); }
.tree-row.selected { background: var(--accent); color: var(--fg); }
.tree-row .indent { width: 10px; }
.tree-row .file-icon { color: var(--muted); }
.tree-row.dir .label { font-weight: 500; }
/* Right canvas hint */
.canvas {
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.canvas .crumbs {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
}
.canvas h1 {
font-size: 22px;
font-weight: 600;
margin: 0;
}
.canvas .body {
max-width: 720px;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
/* Annotation overlays */
.anno {
position: absolute;
font-size: 11px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: oklch(0.27 0.07 305);
color: oklch(0.92 0.1 305);
border: 1px solid oklch(0.45 0.12 305);
padding: 4px 8px;
border-radius: 4px;
pointer-events: none;
white-space: nowrap;
box-shadow: 0 4px 16px rgb(0 0 0 / 0.4);
}
.anno::before {
content: "";
position: absolute;
width: 0; height: 0;
border: 5px solid transparent;
}
.anno-right::before { left: -10px; top: 50%; margin-top: -5px; border-right-color: oklch(0.45 0.12 305); }
.anno-left::before { right: -10px; top: 50%; margin-top: -5px; border-left-color: oklch(0.45 0.12 305); }
</style>
</head>
<body>
<div class="shell">
<aside class="wiki-sidebar" style="position: relative;">
<div class="crumb">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="m15 6-6 6 6 6" /></svg>
<span>Paperclip</span>
</div>
<div class="nav-scroll">
<nav style="display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px;">
<div class="nav-link"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M9 11h6M9 14h4" /></svg><span>Ask</span></div>
<div class="nav-link" data-new="true">
<svg class="icon" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
<span>Add Content</span>
</div>
</nav>
<div class="section-heading">
<span class="label">Shared Spaces</span>
<button class="btn-icon" title="Create space" data-state="hover">
<svg class="icon" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
</button>
</div>
<!-- default space, expanded -->
<div class="space-row active" data-hover="true">
<svg class="chev" viewBox="0 0 24 24" style="transform: rotate(90deg);"><path d="m9 6 6 6-6 6" /></svg>
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span class="space-name">default</span>
<span class="tag tag-shared" style="height: 18px; padding: 0 6px; font-size: 10px;">shared</span>
<button class="btn-icon" style="width: 22px; height: 22px;" title="Space menu">
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
</button>
</div>
<div class="tree">
<div class="tree-row dir">
<svg class="icon icon-sm" viewBox="0 0 24 24" style="transform: rotate(90deg);"><path d="m9 6 6 6-6 6" /></svg>
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span class="label">wiki</span>
</div>
<div class="tree-row" style="padding-left: 26px;">
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M14 3v5h5M5 21V3h9l5 5v13z" /></svg>
<span class="label">index.md</span>
</div>
<div class="tree-row selected" style="padding-left: 26px;">
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M14 3v5h5M5 21V3h9l5 5v13z" /></svg>
<span class="label">log.md</span>
</div>
<div class="tree-row dir" style="padding-left: 26px;">
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span class="label">sources</span>
</div>
<div class="tree-row dir" style="padding-left: 26px;">
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span class="label">projects</span>
</div>
<div class="tree-row dir" style="padding-left: 26px;">
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span class="label">entities</span>
</div>
<div class="tree-row dir" style="padding-left: 26px;">
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span class="label">concepts</span>
</div>
</div>
<!-- second space, collapsed -->
<div class="space-row">
<svg class="chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span class="space-name">team-research</span>
<button class="btn-icon" style="width: 22px; height: 22px;" title="Space menu">
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
</button>
</div>
<!-- third space, collapsed -->
<div class="space-row">
<svg class="chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span class="space-name">customer-feedback</span>
</div>
<div style="padding: 8px; font-size: 11px; color: var(--muted-soft);">
Pages, sources, ask, lint and history all stay scoped to the selected space.
</div>
</div>
<nav class="nav-scroll-bottom">
<div style="display: flex; flex-direction: column; gap: 2px;">
<div class="nav-link"><svg class="icon" viewBox="0 0 24 24"><path d="M12 7v5l3 2M3 12a9 9 0 1 0 9-9" /></svg><span>History</span></div>
<div class="nav-link"><svg class="icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h12" /></svg><span>Settings</span></div>
</div>
</nav>
</aside>
<main class="canvas">
<div class="crumbs">
<span>default</span>
<span>/</span>
<span>wiki</span>
<span>/</span>
<span style="color: var(--fg);">log.md</span>
</div>
<h1>Wiki log — default space</h1>
<div class="body">
Page detail content lives here. Breadcrumbs always show the active space slug, and the URL contains <code style="font-family: ui-monospace; background: var(--card); padding: 1px 6px; border-radius: 4px;">/wiki/spaces/default/page/...</code> so deep links carry the space context.
</div>
</main>
</div>
</body>
</html>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 119 KiB

@@ -1,224 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="_tokens.css" />
<style>
body { width: 390px; }
.frame {
width: 390px;
height: 844px;
display: flex;
flex-direction: column;
background: var(--bg);
}
.topbar {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.topbar .title {
flex: 1;
font-size: 15px;
font-weight: 600;
}
.nav-row {
display: flex;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
overflow-x: auto;
}
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
border: 1px solid var(--border);
background: var(--card);
color: var(--fg);
white-space: nowrap;
cursor: pointer;
}
.pill.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.pill.add {
background: oklch(0.27 0.06 250);
color: oklch(0.85 0.1 250);
border-color: oklch(0.4 0.12 250);
}
.body {
flex: 1;
overflow-y: auto;
padding: 12px;
}
.section-heading {
display: flex;
align-items: center;
gap: 6px;
padding: 0 8px;
margin: 4px 0 8px;
height: 24px;
}
.section-heading .label {
flex: 1;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--muted);
}
.space-card {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--card);
padding: 10px 12px;
margin-bottom: 10px;
}
.space-card.active {
border-color: oklch(0.45 0.12 250);
background: oklch(0.18 0.04 250 / 0.7);
}
.space-row {
display: flex;
align-items: center;
gap: 8px;
}
.space-row .name {
flex: 1;
font-size: 14px;
font-weight: 600;
color: var(--fg);
}
.space-row .meta {
font-size: 11px;
color: var(--muted);
}
.space-card .pages {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.page-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 6px;
border-radius: 6px;
font-size: 13px;
color: var(--fg);
min-height: 40px; /* tap target */
}
.page-row.selected { background: var(--accent); }
.page-row .file-icon { color: var(--muted); }
.menu-btn {
width: 36px; height: 36px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--card);
display: inline-grid; place-items: center;
color: var(--muted);
}
.anno {
font-size: 10.5px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: oklch(0.27 0.07 305);
color: oklch(0.92 0.1 305);
border: 1px solid oklch(0.45 0.12 305);
padding: 4px 8px;
border-radius: 4px;
display: inline-block;
margin-bottom: 6px;
}
</style>
</head>
<body>
<div class="frame">
<div class="topbar">
<button class="menu-btn" style="width: 32px; height: 32px;">
<svg class="icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18" /></svg>
</button>
<div class="title">Wiki</div>
<button class="menu-btn" style="width: 32px; height: 32px;">
<svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
</button>
</div>
<div class="nav-row">
<span class="pill active"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h18M5 7v13h14V7" /></svg> Wiki</span>
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M9 11h6M9 14h4" /></svg> Ask</span>
<span class="pill add"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg> Add Content</span>
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 7v5l3 2" /><circle cx="12" cy="12" r="9" /></svg> History</span>
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" /><path d="M19 12 21 11M3 13 5 12" /></svg> Settings</span>
</div>
<div class="body">
<div class="section-heading">
<span class="label">Shared Spaces</span>
<button class="menu-btn" style="width: 28px; height: 28px;">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
</button>
</div>
<div class="space-card active">
<div class="space-row">
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<div class="name">default</div>
<span class="tag tag-shared" style="height: 18px; padding: 0 6px; font-size: 10px;">shared</span>
<button class="menu-btn" style="width: 30px; height: 30px;">
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
</button>
</div>
<div class="meta" style="margin-top: 4px;">42 pages · 18 sources · healthy</div>
<div class="pages">
<div class="page-row">
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M14 3v5h5M5 21V3h9l5 5v13z" /></svg>
<span>wiki/index.md</span>
</div>
<div class="page-row selected">
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M14 3v5h5M5 21V3h9l5 5v13z" /></svg>
<span>wiki/log.md</span>
</div>
<div class="page-row">
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span>wiki/sources/</span>
</div>
<div class="page-row">
<svg class="icon icon-sm file-icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span>wiki/projects/</span>
</div>
</div>
</div>
<div class="space-card">
<div class="space-row">
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<div class="name">team-research</div>
<button class="menu-btn" style="width: 30px; height: 30px;">
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
</button>
</div>
<div class="meta" style="margin-top: 4px;">12 pages · 3 sources</div>
</div>
<div class="space-card">
<div class="space-row">
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<div class="name">customer-feedback</div>
</div>
<div class="meta" style="margin-top: 4px;">5 pages · 2 sources · index refresh queued</div>
</div>
<div class="callout" style="margin-top: 16px;">
Tap a space to expand its pages. Long-press or three-dot menu opens space settings.
</div>
</div>
</div>
</body>
</html>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 147 KiB

@@ -1,142 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="_tokens.css" />
<style>
body { background: var(--bg); padding: 32px; }
.stage {
width: 320px;
border: 1px solid var(--border);
background: var(--bg);
border-radius: 8px;
padding: 12px;
position: relative;
}
.section-label {
padding: 0 8px;
margin-bottom: 6px;
}
.space-row {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 6px;
background: var(--accent);
cursor: pointer;
position: relative;
}
.space-row .name {
flex: 1;
font-size: 13px;
font-weight: 600;
}
.menu-btn {
width: 22px; height: 22px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg);
display: inline-grid; place-items: center;
color: var(--fg);
}
.menu {
position: absolute;
top: 36px;
right: 8px;
min-width: 220px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 12px 32px rgb(0 0 0 / 0.55);
padding: 4px;
z-index: 10;
}
.menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
font-size: 13px;
color: var(--fg);
cursor: pointer;
}
.menu-item:hover { background: var(--accent); }
.menu-item .shortcut {
margin-left: auto;
font-size: 11px;
color: var(--muted);
}
.menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
.menu-item.danger { color: var(--destructive); }
.menu-item.disabled {
color: var(--muted-soft);
cursor: not-allowed;
}
.annotate {
position: absolute;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: oklch(0.92 0.1 305);
background: oklch(0.27 0.07 305);
border: 1px solid oklch(0.45 0.12 305);
padding: 4px 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<div style="display: flex; gap: 60px; align-items: flex-start;">
<div class="stage">
<div class="section-label" style="font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted);">Shared Spaces</div>
<div class="space-row">
<svg class="icon icon-sm" viewBox="0 0 24 24" style="transform: rotate(90deg);"><path d="m9 6 6 6-6 6" /></svg>
<svg class="icon icon-md" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span class="name">team-research</span>
<span class="tag tag-shared" style="height: 18px; padding: 0 6px; font-size: 10px;">shared</span>
<button class="menu-btn" data-state="open">
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
</button>
<div class="menu" role="menu">
<div class="menu-item">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4z" /></svg>
<span>Edit space</span>
<span class="shortcut">⌘E</span>
</div>
<div class="menu-item">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-3-6.7L21 8" /><path d="M21 3v5h-5" /></svg>
<span>Refresh index</span>
</div>
<div class="menu-item">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h12" /></svg>
<span>Open in History</span>
</div>
<div class="menu-divider"></div>
<div class="menu-item disabled">
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M9 12h6M12 9v6" /></svg>
<span>New page in this space</span>
</div>
<div class="menu-divider"></div>
<div class="menu-item danger">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14" /></svg>
<span>Archive space…</span>
</div>
</div>
</div>
<div style="height: 220px;"></div>
<div class="annotate" style="left: 320px; top: 62px; white-space: nowrap;">
Trigger: hover/focus reveals btn (28×26 hit, ⌘E shortcut for keyboard)
</div>
<div class="annotate" style="left: 320px; top: 110px; white-space: nowrap;">
Default space: Archive disabled with "Default space cannot be archived" tooltip
</div>
<div class="annotate" style="left: 320px; top: 218px; white-space: nowrap;">
Single-source actions only — bulk ops live in Settings → Spaces
</div>
</div>
</div>
</body>
</html>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

@@ -1,321 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="_tokens.css" />
<style>
body { background: var(--bg); }
.stage {
width: 1440px;
height: 900px;
display: grid;
place-items: center;
background:
radial-gradient(at 30% 20%, oklch(0.2 0.04 250 / 0.4), transparent 50%),
radial-gradient(at 70% 80%, oklch(0.2 0.04 305 / 0.3), transparent 50%),
var(--bg);
position: relative;
}
.scrim {
position: absolute;
inset: 0;
background: rgb(0 0 0 / 0.55);
backdrop-filter: blur(6px);
}
.modal {
position: relative;
width: 560px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 30px 80px rgb(0 0 0 / 0.6);
overflow: hidden;
max-height: 760px;
display: flex;
flex-direction: column;
}
.modal-head {
padding: 18px 22px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
}
.modal-head .title {
font-size: 16px;
font-weight: 600;
flex: 1;
}
.modal-body {
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 18px;
overflow-y: auto;
}
.modal-foot {
padding: 14px 22px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
justify-content: flex-end;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.label { font-size: 12px; font-weight: 500; color: var(--fg); }
.help { font-size: 11px; color: var(--muted); }
.input {
height: 36px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
padding: 0 12px;
font-size: 13px;
font-family: inherit;
}
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.input:focus { outline: 2px solid oklch(0.45 0.12 250); outline-offset: 0; }
.seg {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 4px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
}
.seg-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border-radius: 6px;
cursor: pointer;
border: 1px solid transparent;
}
.seg-item.selected {
background: var(--accent);
border-color: var(--border);
}
.seg-item.disabled {
opacity: 0.55;
cursor: not-allowed;
}
.seg-item .head {
display: flex;
align-items: center;
gap: 8px;
}
.seg-item .head .name {
font-size: 13px;
font-weight: 600;
flex: 1;
}
.seg-item .desc {
font-size: 11px;
color: var(--muted);
}
.radio-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.radio-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
cursor: pointer;
}
.radio-row.selected {
border-color: oklch(0.45 0.12 250);
background: oklch(0.18 0.04 250 / 0.7);
}
.radio-row .dot {
width: 14px; height: 14px;
border-radius: 999px;
border: 1px solid var(--muted);
margin-top: 2px;
position: relative;
flex-shrink: 0;
}
.radio-row.selected .dot { border-color: oklch(0.7 0.12 250); }
.radio-row.selected .dot::after {
content: "";
position: absolute;
inset: 3px;
background: oklch(0.7 0.12 250);
border-radius: 999px;
}
.radio-row .body { flex: 1; }
.radio-row .body .name { font-size: 13px; font-weight: 500; }
.radio-row .body .desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.access-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.access-tile {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
background: var(--bg);
}
.access-tile.selected {
border-color: oklch(0.45 0.12 250);
background: oklch(0.18 0.04 250 / 0.7);
}
.access-tile.future {
opacity: 0.7;
}
.access-tile .head {
display: flex; align-items: center; gap: 6px;
}
.access-tile .name { font-size: 12.5px; font-weight: 600; }
.access-tile .desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.anno {
position: absolute;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: oklch(0.92 0.1 305);
background: oklch(0.27 0.07 305);
border: 1px solid oklch(0.45 0.12 305);
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="stage">
<div class="scrim"></div>
<div class="modal">
<div class="modal-head">
<svg class="icon icon-md" viewBox="0 0 24 24" style="color: oklch(0.85 0.1 250);"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<div class="title">Create shared space</div>
<button class="btn-icon">
<svg class="icon" viewBox="0 0 24 24"><path d="M6 6 18 18M18 6 6 18" /></svg>
</button>
</div>
<div class="modal-body">
<div class="callout">
Spaces partition pages, sources, ingest history, ask, and lint. Create one per project, team, or dataset you want kept separate.
</div>
<div class="field-row">
<div class="field">
<label class="label">Display name</label>
<input class="input" value="Team research" />
</div>
<div class="field">
<label class="label">Slug</label>
<input class="input mono" value="team-research" />
<span class="help">Used in URLs · <code>/wiki/spaces/<b>team-research</b>/…</code></span>
</div>
</div>
<div class="field">
<label class="label">Type</label>
<div class="seg">
<div class="seg-item selected">
<div class="head">
<svg class="icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<div class="name">Folder</div>
<span class="tag tag-shared" style="height: 18px; padding: 0 6px; font-size: 10px;">enabled</span>
</div>
<div class="desc">Local folder on this machine.</div>
</div>
<div class="seg-item disabled">
<div class="head">
<svg class="icon" viewBox="0 0 24 24"><path d="M3 15a4 4 0 0 1 1-7.9A6 6 0 0 1 16 5a4 4 0 0 1 4 4 4 4 0 0 1 0 8H6a3 3 0 0 1-3-2z" /></svg>
<div class="name">Cloud</div>
<span class="tag tag-soon">Coming soon</span>
</div>
<div class="desc">Notion, Google Drive, S3 connectors.</div>
</div>
</div>
</div>
<div class="field">
<label class="label">Folder source</label>
<div class="radio-group">
<div class="radio-row selected">
<span class="dot"></span>
<div class="body">
<div class="name">New managed folder</div>
<div class="desc">Creates <code>spaces/team-research/</code> under the configured wiki root, with the standard <code>raw/</code>, <code>wiki/</code>, AGENTS.md and IDEA.md scaffold.</div>
</div>
</div>
<div class="radio-row">
<span class="dot"></span>
<div class="body">
<div class="name">Existing folder under wiki root</div>
<div class="desc">Bind to a folder already inside the wiki root. Path-containment checks must pass.</div>
</div>
</div>
<div class="radio-row" style="opacity: 0.55;">
<span class="dot"></span>
<div class="body">
<div class="name">Existing absolute path <span class="tag tag-soon" style="margin-left: 6px;">Pending host capability</span></div>
<div class="desc">Disabled until the host adds dynamic plugin local-folder bindings (security-reviewed).</div>
</div>
</div>
</div>
</div>
<div class="field">
<label class="label">Access scope</label>
<div class="access-grid">
<div class="access-tile selected">
<div class="head">
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" /><circle cx="17" cy="9" r="3" /></svg>
<div class="name">Shared</div>
</div>
<div class="desc">Everyone in the company.</div>
</div>
<div class="access-tile future">
<div class="head">
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" /><path d="M5 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2" /></svg>
<div class="name">Personal</div>
<span class="tag tag-future" style="height: 16px; padding: 0 5px; font-size: 9.5px;">Future</span>
</div>
<div class="desc">Only the owner. Stored, not enforced.</div>
</div>
<div class="access-tile future">
<div class="head">
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="9" cy="7" r="4" /><circle cx="17" cy="7" r="3" /><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" /></svg>
<div class="name">Team</div>
<span class="tag tag-future" style="height: 16px; padding: 0 5px; font-size: 9.5px;">Future</span>
</div>
<div class="desc">A named team. Stored, not enforced.</div>
</div>
</div>
<span class="help">Personal/Team scopes are saved as metadata for the upcoming permissions feature. They do not block access today.</span>
</div>
</div>
<div class="modal-foot">
<button class="btn btn-ghost">Cancel</button>
<button class="btn btn-primary">
<svg class="icon icon-sm" viewBox="0 0 24 24" style="color: var(--primary-fg);"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
Create space
</button>
</div>
</div>
<div class="anno" style="left: calc(50% + 300px); top: 110px;">name auto-generates slug; both editable</div>
<div class="anno" style="left: calc(50% + 300px); top: 240px;">Cloud disabled but visible — sets product roadmap expectation</div>
<div class="anno" style="left: calc(50% + 300px); top: 410px;">Third radio disabled until host capability lands (PAP-3635 phase 3)</div>
<div class="anno" style="left: calc(50% + 300px); top: 600px;">Personal/Team are metadata only — explicit "Future" tag prevents misread</div>
</div>
</body>
</html>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 280 KiB

@@ -1,251 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="_tokens.css" />
<style>
body { background: var(--bg); }
.stage {
width: 390px;
height: 844px;
background: var(--bg);
position: relative;
overflow: hidden;
}
.scrim {
position: absolute; inset: 0;
background: rgb(0 0 0 / 0.6);
}
.sheet {
position: absolute;
left: 0; right: 0; bottom: 0;
background: var(--card);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border: 1px solid var(--border);
border-bottom: 0;
max-height: 92%;
display: flex;
flex-direction: column;
}
.sheet-head {
padding: 14px 18px 10px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--border);
}
.sheet-head .grabber {
position: absolute;
top: 6px; left: 50%;
transform: translateX(-50%);
width: 36px; height: 4px;
background: var(--border);
border-radius: 999px;
}
.sheet-head .title {
flex: 1;
font-size: 15px;
font-weight: 600;
}
.sheet-body {
padding: 14px 18px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.sheet-foot {
padding: 12px 18px;
border-top: 1px solid var(--border);
display: flex;
gap: 10px;
}
.sheet-foot .btn { flex: 1; height: 44px; justify-content: center; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 12px; font-weight: 500; color: var(--fg); }
.help { font-size: 11px; color: var(--muted); }
.input {
height: 44px; /* min mobile tap target */
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
padding: 0 14px;
font-size: 14px;
font-family: inherit;
}
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.seg-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 4px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
}
.seg-tile {
padding: 12px;
border-radius: 6px;
border: 1px solid transparent;
display: flex;
flex-direction: column;
gap: 4px;
}
.seg-tile.selected { background: var(--accent); border-color: var(--border); }
.seg-tile.disabled { opacity: 0.55; }
.seg-tile .head { display: flex; align-items: center; gap: 8px; }
.seg-tile .name { font-size: 13px; font-weight: 600; flex: 1; }
.seg-tile .desc { font-size: 11px; color: var(--muted); }
.radio-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg);
min-height: 64px;
}
.radio-row.selected {
border-color: oklch(0.45 0.12 250);
background: oklch(0.18 0.04 250 / 0.6);
}
.radio-row .dot {
width: 18px; height: 18px;
border-radius: 999px;
border: 1.5px solid var(--muted);
margin-top: 1px;
position: relative;
flex-shrink: 0;
}
.radio-row.selected .dot { border-color: oklch(0.7 0.12 250); }
.radio-row.selected .dot::after {
content: ""; position: absolute; inset: 4px;
background: oklch(0.7 0.12 250); border-radius: 999px;
}
.radio-row .body .name { font-size: 13.5px; font-weight: 500; }
.radio-row .body .desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.access-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.access-tile {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
text-align: center;
background: var(--bg);
}
.access-tile.selected {
border-color: oklch(0.45 0.12 250);
background: oklch(0.18 0.04 250 / 0.7);
}
.access-tile.future { opacity: 0.65; }
.access-tile .name { font-size: 12px; font-weight: 600; }
.access-tile .desc { font-size: 10px; color: var(--muted); margin-top: 2px; }
</style>
</head>
<body>
<div class="stage">
<div class="scrim"></div>
<div class="sheet">
<div class="grabber"></div>
<div class="sheet-head" style="position: relative;">
<svg class="icon icon-md" viewBox="0 0 24 24" style="color: oklch(0.85 0.1 250);"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<div class="title">Create shared space</div>
<button class="btn-icon" style="width: 32px; height: 32px;">
<svg class="icon" viewBox="0 0 24 24"><path d="M6 6 18 18M18 6 6 18" /></svg>
</button>
</div>
<div class="sheet-body">
<div class="field">
<label class="label">Display name</label>
<input class="input" value="Team research" />
</div>
<div class="field">
<label class="label">Slug</label>
<input class="input mono" value="team-research" />
<span class="help">Used in URL: /wiki/spaces/<b>team-research</b>/…</span>
</div>
<div class="field">
<label class="label">Type</label>
<div class="seg-row">
<div class="seg-tile selected">
<div class="head">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<div class="name">Folder</div>
</div>
<div class="desc">Local folder on this machine.</div>
</div>
<div class="seg-tile disabled">
<div class="head">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 15a4 4 0 0 1 1-7.9A6 6 0 0 1 16 5a4 4 0 0 1 4 4 4 4 0 0 1 0 8H6a3 3 0 0 1-3-2z" /></svg>
<div class="name">Cloud</div>
</div>
<div class="desc"><span class="tag tag-soon" style="height: 16px; padding: 0 5px; font-size: 9.5px;">Coming soon</span></div>
</div>
</div>
</div>
<div class="field">
<label class="label">Folder source</label>
<div style="display: flex; flex-direction: column; gap: 8px;">
<div class="radio-row selected">
<span class="dot"></span>
<div class="body">
<div class="name">New managed folder</div>
<div class="desc">spaces/team-research/ under wiki root.</div>
</div>
</div>
<div class="radio-row">
<span class="dot"></span>
<div class="body">
<div class="name">Existing folder under wiki root</div>
<div class="desc">Pick a subfolder already in the wiki root.</div>
</div>
</div>
<div class="radio-row" style="opacity: 0.55;">
<span class="dot"></span>
<div class="body">
<div class="name">Absolute path <span class="tag tag-soon" style="height: 14px; padding: 0 5px; font-size: 9px; margin-left: 4px;">Pending host</span></div>
<div class="desc">Awaiting security-reviewed host capability.</div>
</div>
</div>
</div>
</div>
<div class="field">
<label class="label">Access scope</label>
<div class="access-row">
<div class="access-tile selected">
<div class="name">Shared</div>
<div class="desc">Whole company</div>
</div>
<div class="access-tile future">
<div class="name">Personal</div>
<div class="desc">Future</div>
</div>
<div class="access-tile future">
<div class="name">Team</div>
<div class="desc">Future</div>
</div>
</div>
<span class="help">Personal & Team are stored as metadata. Permissions are not enforced yet.</span>
</div>
</div>
<div class="sheet-foot">
<button class="btn btn-ghost" style="border: 1px solid var(--border);">Cancel</button>
<button class="btn btn-primary">Create space</button>
</div>
</div>
</div>
</body>
</html>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 178 KiB

@@ -1,398 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="_tokens.css" />
<style>
body { background: var(--bg); }
.stage {
width: 1440px;
min-height: 900px;
display: grid;
grid-template-columns: 264px 1fr;
background: var(--bg);
}
aside {
border-right: 1px solid var(--border);
padding: 14px;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
color: var(--muted);
}
aside .group { margin-top: 12px; }
aside .group-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--muted);
padding: 0 8px;
margin-bottom: 6px;
}
aside .row {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
}
aside .row.active {
background: var(--accent);
color: var(--fg);
font-weight: 500;
}
aside .row:hover { background: oklch(0.269 0 0 / 0.5); color: var(--fg); }
aside .crumb {
display: flex; align-items: center; gap: 6px;
padding: 4px 8px; font-size: 12px; color: var(--muted);
}
.panel {
padding: 28px;
max-width: 920px;
}
.panel-header {
display: flex;
align-items: flex-start;
gap: 16px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
margin-bottom: 22px;
}
.panel-header h1 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.panel-header .sub {
font-size: 12.5px;
color: var(--muted);
margin-top: 4px;
}
.panel-header .crumb {
font-size: 11.5px;
color: var(--muted);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 16px;
overflow: hidden;
}
.card-head {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 10px;
}
.card-head .title {
font-size: 14px;
font-weight: 600;
flex: 1;
}
.card-head .desc {
font-size: 11.5px;
color: var(--muted);
}
.card-body {
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
.field-row {
display: grid;
grid-template-columns: 200px 1fr;
align-items: center;
gap: 16px;
}
.field-row.stack { grid-template-columns: 1fr; }
.field-row .label {
font-size: 12.5px;
font-weight: 500;
color: var(--fg);
}
.field-row .help {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
.field-row .control {
display: flex; flex-direction: column; gap: 4px;
}
.input {
height: 34px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
padding: 0 12px;
font-size: 13px;
font-family: inherit;
width: 100%;
}
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.input[disabled] { opacity: 0.6; cursor: not-allowed; }
.toggle {
display: inline-flex;
align-items: center;
gap: 8px;
}
.toggle .track {
width: 32px; height: 18px;
background: var(--border);
border-radius: 999px;
position: relative;
flex-shrink: 0;
}
.toggle.on .track {
background: oklch(0.55 0.16 145);
}
.toggle .track::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
background: white;
border-radius: 999px;
transition: transform 0.15s;
}
.toggle.on .track::after { transform: translateX(14px); }
.health-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.actions {
display: flex;
align-items: center;
gap: 10px;
padding-top: 8px;
}
.anno {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: oklch(0.92 0.1 305);
background: oklch(0.27 0.07 305);
border: 1px solid oklch(0.45 0.12 305);
padding: 3px 8px;
border-radius: 4px;
display: inline-block;
}
</style>
</head>
<body>
<div class="stage">
<aside>
<div class="crumb">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="m15 6-6 6 6 6" /></svg>
<span>Wiki / Settings</span>
</div>
<div class="group">
<div class="group-label">Workspace</div>
<div class="row">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
Root folder
</div>
<div class="row">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h12" /></svg>
Distillation
</div>
<div class="row">
<svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /></svg>
Routines
</div>
</div>
<div class="group">
<div class="group-label">Spaces</div>
<div class="row active">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
team-research
</div>
<div class="row">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
default
</div>
<div class="row">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
customer-feedback
</div>
<div class="row" style="color: var(--muted);">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
Add space…
</div>
</div>
</aside>
<div class="panel">
<div class="panel-header">
<svg class="icon" viewBox="0 0 24 24" style="width: 28px; height: 28px; color: oklch(0.85 0.1 250); margin-top: 2px;"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<div style="flex: 1;">
<div class="crumb">Spaces · Edit</div>
<h1>team-research</h1>
<div class="sub">Local folder · 12 pages · 3 sources · indexed 2 minutes ago</div>
</div>
<button class="btn btn-ghost" style="border: 1px solid var(--border);">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-3-6.7L21 8" /><path d="M21 3v5h-5" /></svg>
Refresh index
</button>
<button class="btn">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
Open ingest
</button>
</div>
<div class="card">
<div class="card-head">
<svg class="icon" viewBox="0 0 24 24"><path d="M5 8 12 3l7 5v8l-7 5-7-5z" /></svg>
<div class="title">Identity</div>
</div>
<div class="card-body">
<div class="field-row">
<label class="label">Display name<div class="help">Shown in the sidebar.</div></label>
<div class="control"><input class="input" value="team-research" /></div>
</div>
<div class="field-row">
<label class="label">Slug<div class="help">URL segment; lock by default.</div></label>
<div class="control">
<input class="input mono" value="team-research" disabled />
<span style="font-size: 11px; color: var(--muted);">Slug is locked once a space has indexed pages. Contact platform team to migrate.</span>
</div>
</div>
<div class="field-row">
<label class="label">Type</label>
<div class="control" style="display: flex; align-items: center; gap: 8px;">
<span class="tag tag-shared" style="height: 22px; padding: 0 8px;">Folder</span>
<span style="font-size: 12px; color: var(--muted);">(Cloud connectors coming soon)</span>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-head">
<svg class="icon" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<div class="title">Folder source &amp; health</div>
</div>
<div class="card-body">
<div class="field-row">
<label class="label">Mode</label>
<div class="control">
<span style="font-size: 13px;">New managed folder</span>
<span class="help">Created under the configured wiki root.</span>
</div>
</div>
<div class="field-row">
<label class="label">Path</label>
<div class="control">
<input class="input mono" value="/Users/jane/wiki-root/spaces/team-research" />
<span class="help">Real path: same · access: read &amp; write</span>
</div>
</div>
<div class="field-row stack">
<div class="health-list">
<div class="health-row">
<span class="check"><svg width="8" height="8" viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
<span class="label">Folder readable</span>
<span style="color: var(--muted); font-size: 11px;">/Users/jane/wiki-root/spaces/team-research</span>
</div>
<div class="health-row">
<span class="check"><svg width="8" height="8" viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
<span class="label">Folder writable</span>
</div>
<div class="health-row">
<span class="check"><svg width="8" height="8" viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
<span class="label">Required dirs (raw/, wiki/) present</span>
</div>
<div class="health-row warn">
<span class="check"><svg width="8" height="8" viewBox="0 0 24 24"><path d="M12 8v4M12 16v0" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
<span class="label">AGENTS.md missing</span>
<button class="btn btn-ghost" style="border: 1px solid var(--border); height: 26px; padding: 0 10px; font-size: 11.5px;">Recreate baseline</button>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-head">
<svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /></svg>
<div class="title">Maintenance</div>
</div>
<div class="card-body">
<div class="field-row">
<label class="label">Lint &amp; structural checks<div class="help">Runs on the company lint cadence.</div></label>
<div class="control"><div class="toggle on"><span class="track"></span><span style="font-size: 12px;">Enabled</span></div></div>
</div>
<div class="field-row">
<label class="label">Auto distillation<div class="help">Backfills wiki pages from new sources.</div></label>
<div class="control"><div class="toggle on"><span class="track"></span><span style="font-size: 12px;">Enabled</span></div></div>
</div>
<div class="field-row">
<label class="label">Per-space billing code<div class="help">Optional · used on operation issues.</div></label>
<div class="control"><input class="input mono" value="research-2026" /></div>
</div>
</div>
</div>
<div class="card">
<div class="card-head">
<svg class="icon" viewBox="0 0 24 24"><circle cx="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" /></svg>
<div class="title">Access</div>
<span class="tag tag-future" style="margin-left: auto;">Future enforcement</span>
</div>
<div class="card-body">
<div class="callout warn">
Permissions are stored but <strong>not enforced</strong> in this release. Anyone in the company can still read and write every space.
</div>
<div class="field-row">
<label class="label">Scope</label>
<div class="control" style="display: flex; gap: 8px;">
<span class="tag" style="background: var(--space-tint); color: var(--space-tint-fg); height: 22px; padding: 0 10px;">Shared</span>
<span class="tag tag-future" style="height: 22px; padding: 0 10px;">Personal · stored only</span>
<span class="tag tag-future" style="height: 22px; padding: 0 10px;">Team · stored only</span>
</div>
</div>
<div class="field-row">
<label class="label">Owner user<div class="help">Stored for upcoming permission rules.</div></label>
<div class="control"><input class="input" value="jane.doe@paperclip.ing" /></div>
</div>
<div class="field-row">
<label class="label">Owner team key</label>
<div class="control"><input class="input mono" value="research" /></div>
</div>
</div>
</div>
<div class="card" style="border-color: oklch(0.42 0.18 25 / 0.6);">
<div class="card-head">
<svg class="icon" viewBox="0 0 24 24" style="color: oklch(0.7 0.18 25);"><path d="M12 9v4M12 17v0M3 18 12 3l9 15z" /></svg>
<div class="title" style="color: oklch(0.85 0.13 25);">Danger zone</div>
</div>
<div class="card-body">
<div class="field-row">
<label class="label">Archive this space<div class="help">Hides it from the sidebar and stops scheduled lint/index. Pages remain on disk.</div></label>
<div class="control"><button class="btn" style="border-color: oklch(0.42 0.18 25 / 0.6); color: oklch(0.85 0.13 25);">Archive…</button></div>
</div>
<div class="field-row">
<label class="label">Delete<div class="help">Removes DB rows. Files on disk are kept and must be removed manually.</div></label>
<div class="control"><button class="btn" style="border-color: oklch(0.42 0.18 25); background: oklch(0.27 0.1 25); color: oklch(0.92 0.13 25);">Delete space…</button></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 358 KiB

@@ -1,298 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="_tokens.css" />
<style>
body { background: var(--bg); }
.frame {
width: 390px;
min-height: 844px;
background: var(--bg);
display: flex;
flex-direction: column;
}
.topbar {
display: flex; align-items: center; gap: 8px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.topbar .back, .topbar .menu {
width: 36px; height: 36px;
border-radius: 8px;
border: 1px solid var(--border);
display: inline-grid; place-items: center;
color: var(--fg);
}
.topbar .title { flex: 1; font-size: 15px; font-weight: 600; }
.topbar .crumb { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
.hero {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.hero .name {
font-size: 16px;
font-weight: 600;
flex: 1;
}
.hero .meta {
font-size: 11.5px;
color: var(--muted);
margin-top: 2px;
}
.section {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.section-head {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.row {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 6px;
min-height: 56px;
}
.row:last-child { border-bottom: 0; }
.row .row-label {
font-size: 12px;
color: var(--muted);
}
.row .row-value {
font-size: 13.5px;
color: var(--fg);
word-break: break-all;
}
.row.button-row {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.row .toggle .track {
width: 36px; height: 20px;
background: var(--border);
border-radius: 999px;
position: relative;
flex-shrink: 0;
}
.row .toggle.on .track { background: oklch(0.55 0.16 145); }
.row .toggle .track::after {
content: ""; position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
background: white; border-radius: 999px;
transition: transform 0.15s;
}
.row .toggle.on .track::after { transform: translateX(16px); }
.health-row {
padding: 10px 16px;
display: flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
}
.health-row .check {
width: 16px; height: 16px;
border-radius: 999px;
background: oklch(0.27 0.06 145);
color: oklch(0.85 0.1 145);
display: inline-grid; place-items: center;
flex-shrink: 0;
}
.health-row.warn .check {
background: oklch(0.27 0.07 70);
color: oklch(0.88 0.1 70);
}
.health-row .label { flex: 1; }
.health-row .fix {
font-size: 11.5px;
color: oklch(0.85 0.1 250);
}
.danger {
border-color: oklch(0.42 0.18 25 / 0.6);
}
.danger .section-head { color: oklch(0.85 0.13 25); }
.danger .row .row-value.btn-text { color: oklch(0.85 0.13 25); }
.input {
height: 44px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
padding: 0 12px;
font-size: 14px;
width: 100%;
font-family: inherit;
}
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.callout-warn {
background: oklch(0.22 0.05 70);
color: oklch(0.88 0.1 70);
border: 1px solid oklch(0.45 0.12 70);
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
margin: 0 16px 12px;
}
</style>
</head>
<body>
<div class="frame">
<div class="topbar">
<button class="back">
<svg class="icon" viewBox="0 0 24 24"><path d="m15 6-6 6 6 6" /></svg>
</button>
<div style="flex: 1;">
<div class="crumb">Spaces · Edit</div>
<div class="title" style="padding: 0;">team-research</div>
</div>
<button class="menu">
<svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
</button>
</div>
<div class="body">
<div class="hero">
<svg class="icon icon-md" viewBox="0 0 24 24" style="color: oklch(0.85 0.1 250);"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<div style="flex: 1;">
<div class="name">team-research</div>
<div class="meta">Local folder · 12 pages · 3 sources</div>
</div>
<span class="tag tag-shared" style="height: 22px; padding: 0 8px;">shared</span>
</div>
<div style="display: flex; gap: 8px;">
<button class="btn" style="flex: 1; height: 44px; justify-content: center; border: 1px solid var(--border);">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-3-6.7L21 8" /><path d="M21 3v5h-5" /></svg>
Refresh
</button>
<button class="btn btn-primary" style="flex: 1; height: 44px; justify-content: center;">
<svg class="icon icon-sm" viewBox="0 0 24 24" style="color: var(--primary-fg);"><path d="M12 5v14M5 12h14" /></svg>
Add content
</button>
</div>
<div class="section">
<div class="section-head">Identity</div>
<div class="row">
<span class="row-label">Display name</span>
<input class="input" value="team-research" />
</div>
<div class="row">
<span class="row-label">Slug · locked</span>
<input class="input mono" value="team-research" disabled style="opacity: 0.7;" />
</div>
<div class="row button-row">
<span class="row-value">Type</span>
<span class="tag tag-shared" style="height: 22px; padding: 0 8px;">Folder</span>
</div>
</div>
<div class="section">
<div class="section-head">Folder &amp; Health</div>
<div class="row">
<span class="row-label">Path</span>
<span class="row-value" style="font-family: ui-monospace; font-size: 12px;">/Users/jane/wiki-root/spaces/team-research</span>
</div>
<div style="padding: 6px 0;">
<div class="health-row">
<span class="check"><svg width="9" height="9" viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
<span class="label">Readable / writable</span>
</div>
<div class="health-row">
<span class="check"><svg width="9" height="9" viewBox="0 0 24 24"><path d="m5 12 5 5L20 7" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
<span class="label">raw/, wiki/ exist</span>
</div>
<div class="health-row warn">
<span class="check"><svg width="9" height="9" viewBox="0 0 24 24"><path d="M12 8v4M12 16v0" stroke="currentColor" fill="none" stroke-width="3" /></svg></span>
<span class="label">AGENTS.md missing</span>
<span class="fix">Recreate</span>
</div>
</div>
</div>
<div class="section">
<div class="section-head">Maintenance</div>
<div class="row button-row">
<div>
<span class="row-value">Lint &amp; checks</span>
<div class="row-label">Runs on company cadence</div>
</div>
<span class="toggle on"><span class="track"></span></span>
</div>
<div class="row button-row">
<div>
<span class="row-value">Auto distillation</span>
<div class="row-label">Backfills pages from sources</div>
</div>
<span class="toggle on"><span class="track"></span></span>
</div>
<div class="row">
<span class="row-label">Billing code</span>
<input class="input mono" value="research-2026" />
</div>
</div>
<div class="section">
<div class="section-head">
Access
<span class="tag tag-future" style="margin-left: 6px; height: 16px; padding: 0 6px; font-size: 9.5px; vertical-align: middle;">Future enforcement</span>
</div>
<div class="callout-warn">Stored only — not enforced yet. Everyone in the company can still see this space.</div>
<div class="row button-row">
<span class="row-value">Scope</span>
<span class="tag tag-shared" style="height: 22px; padding: 0 8px;">Shared</span>
</div>
<div class="row">
<span class="row-label">Owner user</span>
<input class="input" value="jane.doe@paperclip.ing" />
</div>
<div class="row">
<span class="row-label">Owner team key</span>
<input class="input mono" value="research" />
</div>
</div>
<div class="section danger">
<div class="section-head">Danger zone</div>
<div class="row">
<span class="row-label">Hides this space from sidebar and pauses lint/index</span>
<span class="row-value btn-text">Archive space…</span>
</div>
<div class="row">
<span class="row-label">Removes DB rows; on-disk files are preserved</span>
<span class="row-value btn-text">Delete space…</span>
</div>
</div>
</div>
</div>
</body>
</html>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 278 KiB

@@ -1,241 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="_tokens.css" />
<style>
body { background: var(--bg); }
.stage {
width: 1440px;
height: 900px;
display: grid;
grid-template-columns: 264px 1fr;
background: var(--bg);
}
aside {
border-right: 1px solid var(--border);
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.nav-link {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px; border-radius: 6px;
font-size: 13px; font-weight: 500;
color: rgb(245 245 245 / 0.8);
}
.nav-link.active { background: var(--accent); color: var(--fg); }
.panel {
padding: 28px;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
h1 {
margin: 0;
font-size: 22px;
font-weight: 600;
}
.sub {
font-size: 13px;
color: var(--muted);
margin-top: 4px;
}
.space-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
position: relative;
}
.space-bar .label {
font-size: 12px;
color: var(--muted);
}
.space-select {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
min-width: 220px;
}
.space-select .name { flex: 1; }
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.tile {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 200px;
}
.tile h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
}
.tile p { margin: 0; font-size: 12px; color: var(--muted); }
.tile .input {
height: 34px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
padding: 0 12px;
font-size: 13px;
font-family: inherit;
}
.tile textarea {
min-height: 80px;
resize: vertical;
padding: 8px 12px;
font-size: 13px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
font-family: inherit;
}
.drop {
min-height: 110px;
border: 1.5px dashed var(--border);
border-radius: 8px;
display: grid;
place-items: center;
color: var(--muted);
font-size: 12.5px;
}
/* Open dropdown popover */
.popover {
position: absolute;
width: 280px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 12px 32px rgb(0 0 0 / 0.55);
padding: 4px;
z-index: 10;
}
.popover .item {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
border-radius: 6px;
font-size: 13px;
}
.popover .item:hover { background: var(--accent); }
.popover .item.selected { background: var(--accent); }
.popover .meta { margin-left: auto; font-size: 11px; color: var(--muted); }
.popover .divider { height: 1px; background: var(--border); margin: 4px 0; }
.popover .item.create { color: oklch(0.85 0.1 250); }
.anno {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: oklch(0.92 0.1 305);
background: oklch(0.27 0.07 305);
border: 1px solid oklch(0.45 0.12 305);
padding: 3px 8px;
border-radius: 4px;
display: inline-block;
}
</style>
</head>
<body>
<div class="stage">
<aside>
<div style="padding: 8px; font-size: 11px; color: var(--muted); margin-bottom: 8px;">Wiki primary nav</div>
<div class="nav-link"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M9 11h6M9 14h4" /></svg>Ask</div>
<div class="nav-link active"><svg class="icon" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>Add Content</div>
<div style="padding: 6px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted); margin-top: 12px;">Shared Spaces</div>
<div style="padding: 4px 8px; font-size: 12.5px; color: var(--muted);">default · team-research · customer-feedback</div>
</aside>
<div class="panel" style="position: relative;">
<div>
<div style="font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px;">Add Content</div>
<h1>Capture into a space</h1>
<div class="sub">Pick the destination space, then add a source by URL, paste, or drop. Each ingest becomes an operation issue scoped to the chosen space.</div>
</div>
<div class="space-bar">
<span class="label">Space</span>
<button class="space-select">
<svg class="icon icon-sm" viewBox="0 0 24 24" style="color: oklch(0.85 0.1 250);"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span class="name">team-research</span>
<span style="color: var(--muted); font-size: 11px;">shared</span>
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6" /></svg>
</button>
<span style="font-size: 12px; color: var(--muted);">Defaults to last used space, or <code style="font-family: ui-monospace; padding: 1px 5px; background: var(--accent); border-radius: 4px;">default</code> on first run.</span>
<!-- popover -->
<div class="popover" style="left: 60px; top: calc(100% + 6px);">
<div class="item selected">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span>team-research</span>
<span class="meta">12 pages</span>
</div>
<div class="item">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span>default</span>
<span class="meta">42 pages</span>
</div>
<div class="item">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<span>customer-feedback</span>
<span class="meta">5 pages</span>
</div>
<div class="divider"></div>
<div class="item create">
<svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
<span>New shared space…</span>
</div>
</div>
</div>
<div class="grid">
<div class="tile">
<h3><svg class="icon" viewBox="0 0 24 24" style="display: inline; vertical-align: -3px; margin-right: 4px;"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1" /><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1" /></svg>From URL</h3>
<p>Fetch a page; we'll snapshot it and queue ingest into <strong>team-research</strong>.</p>
<input class="input" placeholder="https://" />
</div>
<div class="tile">
<h3><svg class="icon" viewBox="0 0 24 24" style="display: inline; vertical-align: -3px; margin-right: 4px;"><path d="M9 4h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8z" /><path d="M9 4v4h4" /></svg>Paste markdown</h3>
<p>Paste any text or markdown; we'll capture it as a new source in <strong>team-research</strong>.</p>
<textarea placeholder="Paste content…"></textarea>
</div>
<div class="tile">
<h3><svg class="icon" viewBox="0 0 24 24" style="display: inline; vertical-align: -3px; margin-right: 4px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" /></svg>Drop files</h3>
<p>Drag local files anywhere on the page. The ingest modal opens with this space pre-selected.</p>
<div class="drop">Drop files here · or click to browse</div>
</div>
</div>
<div class="callout">
<strong>One space at a time.</strong> Switching the space dropdown after typing/dropping content will warn before re-binding. Cross-space copy is a separate flow (Settings → Spaces → Copy pages).
</div>
</div>
</div>
</body>
</html>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 180 KiB

@@ -1,207 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="_tokens.css" />
<style>
body { background: var(--bg); }
.frame {
width: 390px;
min-height: 844px;
background: var(--bg);
display: flex;
flex-direction: column;
}
.topbar {
display: flex; align-items: center; gap: 8px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.topbar .menu, .topbar .back {
width: 36px; height: 36px;
border-radius: 8px;
border: 1px solid var(--border);
display: inline-grid; place-items: center;
color: var(--fg);
}
.topbar .title {
flex: 1;
font-size: 15px;
font-weight: 600;
}
.nav-row {
display: flex; gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
overflow-x: auto;
}
.pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px; font-weight: 500;
border: 1px solid var(--border);
background: var(--card);
white-space: nowrap;
}
.pill.active { background: oklch(0.27 0.06 250); color: oklch(0.85 0.1 250); border-color: oklch(0.4 0.12 250); }
.body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
.space-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
}
.space-card .label {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 6px;
}
.space-card .row {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
min-height: 48px;
}
.space-card .row .name { flex: 1; font-weight: 600; font-size: 14px; }
.space-card .row .chev { color: var(--muted); }
.space-card .meta { font-size: 11px; color: var(--muted); margin-top: 6px; }
.tile {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.tile h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
}
.tile p { margin: 0; font-size: 12px; color: var(--muted); }
.tile .input {
height: 44px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
padding: 0 12px;
font-size: 14px;
width: 100%;
font-family: inherit;
}
.tile textarea {
min-height: 100px;
resize: vertical;
padding: 10px 12px;
font-size: 14px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
font-family: inherit;
}
.drop {
min-height: 100px;
border: 1.5px dashed var(--border);
border-radius: 8px;
display: grid; place-items: center;
color: var(--muted);
font-size: 12.5px;
}
.sticky-foot {
position: sticky;
bottom: 0;
padding: 12px 16px;
background: linear-gradient(to top, var(--bg) 70%, transparent);
display: flex;
gap: 8px;
}
.sticky-foot .btn {
flex: 1;
height: 48px;
justify-content: center;
font-size: 14px;
font-weight: 600;
}
.callout {
font-size: 12px;
}
</style>
</head>
<body>
<div class="frame">
<div class="topbar">
<button class="back">
<svg class="icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18" /></svg>
</button>
<div class="title">Add Content</div>
<button class="menu">
<svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="18" cy="12" r="1" /></svg>
</button>
</div>
<div class="nav-row">
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M3 7h18M5 7v13h14V7" /></svg> Wiki</span>
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M9 11h6M9 14h4" /></svg> Ask</span>
<span class="pill active"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg> Add Content</span>
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M12 7v5l3 2" /><circle cx="12" cy="12" r="9" /></svg> History</span>
<span class="pill"><svg class="icon icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" /></svg> Settings</span>
</div>
<div class="body">
<div class="space-card">
<div class="label">Destination space</div>
<div class="row">
<svg class="icon icon-md" viewBox="0 0 24 24" style="color: oklch(0.85 0.1 250);"><path d="M3 7h6l2 2h10v10H3z" /></svg>
<div class="name">team-research</div>
<span class="tag tag-shared" style="height: 18px; padding: 0 6px; font-size: 10px;">shared</span>
<svg class="icon icon-sm chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6" /></svg>
</div>
<div class="meta">Tap to switch · last used selected by default</div>
</div>
<div class="tile">
<h3>From URL</h3>
<p>Snapshot a webpage into <strong>team-research</strong>.</p>
<input class="input" placeholder="https://" />
</div>
<div class="tile">
<h3>Paste markdown</h3>
<p>Capture any markdown or plain text.</p>
<textarea placeholder="Paste content…"></textarea>
</div>
<div class="tile">
<h3>Files</h3>
<p>Tap to choose; opens the ingest modal pre-bound to <strong>team-research</strong>.</p>
<div class="drop">Tap to choose files</div>
</div>
<div class="callout">
Switching the space resets the in-progress ingest. To copy pages between spaces, use Settings → Spaces.
</div>
</div>
<div class="sticky-foot">
<button class="btn btn-primary">Capture into team-research</button>
</div>
</div>
</body>
</html>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 176 KiB

@@ -1,223 +0,0 @@
/* Mirrors the LLM Wiki plugin tokens (dark mode) so mockups match production. */
:root {
--border: oklch(0.269 0 0);
--card: oklch(0.205 0 0);
--bg: oklch(0.145 0 0);
--fg: oklch(0.985 0 0);
--muted: oklch(0.708 0 0);
--muted-soft: oklch(0.55 0 0);
--accent: oklch(0.269 0 0);
--accent-hover: oklch(0.32 0 0);
--primary: oklch(0.985 0 0);
--primary-fg: oklch(0.205 0 0);
--destructive: oklch(0.637 0.237 25.331);
--status-done: oklch(0.65 0.16 145);
--status-running: oklch(0.7 0.13 200);
--status-blocked: oklch(0.6 0.21 25);
--status-todo: oklch(0.6 0.17 250);
--space-tint: oklch(0.27 0.06 250);
--space-tint-fg: oklch(0.85 0.1 250);
}
* {
box-sizing: border-box;
}
button {
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
}
html,
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--fg);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
}
.frame {
background: var(--bg);
color: var(--fg);
display: grid;
min-height: 100vh;
}
.icon {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.icon-sm {
width: 12px;
height: 12px;
}
.icon-md {
width: 16px;
height: 16px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
border: 1px solid var(--border);
background: var(--card);
color: var(--fg);
cursor: pointer;
}
.btn-primary {
background: var(--primary);
color: var(--primary-fg);
border-color: var(--primary);
}
.btn-ghost {
background: transparent;
border-color: transparent;
color: var(--muted);
}
.btn-ghost:hover {
background: var(--accent);
color: var(--fg);
}
.btn-icon {
width: 26px;
height: 26px;
padding: 0;
display: inline-grid;
place-items: center;
border-radius: 6px;
border: 1px solid transparent;
background: transparent;
color: var(--muted);
cursor: pointer;
}
.btn-icon:hover,
.btn-icon[data-state="hover"] {
background: var(--accent);
color: var(--fg);
}
.section-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--muted);
}
.kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
background: var(--accent);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
color: var(--fg);
}
.callout {
background: oklch(0.2 0.04 250);
color: oklch(0.85 0.08 250);
border: 1px solid oklch(0.4 0.1 250);
border-radius: 6px;
padding: 10px 12px;
font-size: 12px;
}
.callout.warn {
background: oklch(0.22 0.05 70);
color: oklch(0.88 0.1 70);
border-color: oklch(0.45 0.12 70);
}
.callout.success {
background: oklch(0.2 0.05 145);
color: oklch(0.85 0.1 145);
border-color: oklch(0.4 0.12 145);
}
.tag {
display: inline-flex;
align-items: center;
gap: 4px;
height: 20px;
padding: 0 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
}
.tag-future {
background: oklch(0.27 0.07 305);
color: oklch(0.85 0.1 305);
}
.tag-soon {
background: oklch(0.25 0 0);
color: var(--muted);
border: 1px dashed var(--border);
}
.tag-shared {
background: var(--space-tint);
color: var(--space-tint-fg);
}
.health-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--muted);
padding: 6px 0;
}
.health-row .check {
width: 14px;
height: 14px;
border-radius: 999px;
background: oklch(0.27 0.06 145);
color: oklch(0.85 0.1 145);
display: inline-grid;
place-items: center;
flex-shrink: 0;
}
.health-row.warn .check {
background: oklch(0.27 0.07 70);
color: oklch(0.88 0.1 70);
}
.health-row .label {
flex: 1;
color: var(--fg);
}
.divider {
height: 1px;
background: var(--border);
margin: 16px 0;
}
@@ -1,37 +0,0 @@
import pw from "/Users/dotta/paperclip/node_modules/.pnpm/playwright@1.58.2/node_modules/playwright/index.js";
const { chromium } = pw;
import path from "node:path";
import fs from "node:fs";
import url from "node:url";
const here = path.dirname(url.fileURLToPath(import.meta.url));
const targets = [
{ html: "01-sidebar-desktop.html", png: "01-sidebar-desktop.png", width: 1440, height: 900, dpr: 2 },
{ html: "02-sidebar-mobile.html", png: "02-sidebar-mobile.png", width: 390, height: 844, dpr: 3 },
{ html: "03-three-dot-menu.html", png: "03-three-dot-menu.png", width: 1080, height: 460, dpr: 2 },
{ html: "04-create-space-modal-desktop.html", png: "04-create-space-modal-desktop.png", width: 1440, height: 900, dpr: 2 },
{ html: "05-create-space-modal-mobile.html", png: "05-create-space-modal-mobile.png", width: 390, height: 844, dpr: 3 },
{ html: "06-edit-space-desktop.html", png: "06-edit-space-desktop.png", width: 1440, height: 900, dpr: 2 },
{ html: "07-edit-space-mobile.html", png: "07-edit-space-mobile.png", width: 390, height: 1320, dpr: 3 },
{ html: "08-add-content-ingest-desktop.html", png: "08-add-content-ingest-desktop.png", width: 1440, height: 900, dpr: 2 },
{ html: "09-add-content-ingest-mobile.html", png: "09-add-content-ingest-mobile.png", width: 390, height: 1024, dpr: 3 },
];
const browser = await chromium.launch();
for (const t of targets) {
const ctx = await browser.newContext({
viewport: { width: t.width, height: t.height },
deviceScaleFactor: t.dpr,
colorScheme: "dark",
});
const page = await ctx.newPage();
const fileUrl = url.pathToFileURL(path.join(here, t.html)).toString();
await page.goto(fileUrl, { waitUntil: "networkidle" });
// pad mobile screenshots to fit content
const out = path.join(here, t.png);
await page.screenshot({ path: out, fullPage: t.png.includes("mobile") || t.png.startsWith("06-") || t.png.startsWith("07-") });
console.log("rendered", t.png);
await ctx.close();
}
await browser.close();
console.log("done");
Binary file not shown.

Before

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 386 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 205 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 310 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 232 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 443 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 382 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 258 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 245 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 274 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 262 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 360 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 184 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 138 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 144 KiB