mirror of
https://github.com/Ar9av/obsidian-wiki.git
synced 2026-09-14 20:36:34 +08:00
ar9av
d3e545b012
The brain-capture extension only went one way: browser -> vault. This adds the return path — read the form on the current page, answer what the vault supports, and leave the rest blank — and folds both directions into a single two-tab extension renamed from "Brain Vault Capture" to "Brain". Retrieval never calls a model. `obsidian-wiki context-pack --json` ranks the vault deterministically and the model does one narrow job: map retrieved facts onto fields. One `claude -p` / `codex exec` invocation per fill, billed to the subscription the user already has. Nothing is ever submitted. A native messaging host bridges the two, staged into ~/.obsidian-wiki/ rather than run from the checkout. Chrome's children do not inherit your shell, and all three consequences bite: - macOS TCC: ~/Documents is mode 700 with an ACL, and a native host inherits Chrome's TCC context, so a checkout there cannot be exec'd at all. Chrome reports this as "Native host has exited", identical to a crash. - PATH: Chrome passes a minimal PATH, hiding claude/codex in ~/.local/bin. - USER/LOGNAME: Claude Code reads OAuth credentials from the macOS login Keychain and needs these to find them, else "Not logged in" despite a valid session. The host bookends every run in its log so those failures stay distinguishable, re-validates every returned fill against the real form schema (an injected value cannot reach a field the page never advertised), and forwards the pack's instruction_policy so vault excerpts stay data rather than instruction. Form-schema extraction resolves labels via aria-labelledby before aria-label: Google Forms puts aria-label="Your answer" on every paragraph field while the real question sits behind aria-labelledby, so checking aria-label first silently mislabelled exactly the textarea fields. Values are written through the native setter with input/change dispatched, so React-controlled forms see a genuine edit. Docs: docs/browser-extension.md, linked from both READMEs and the docs index. Also backfills the untranslated tagline from #159 into README_TW.md.
377 lines
6.4 KiB
CSS
377 lines
6.4 KiB
CSS
:root {
|
|
--bg: #050607;
|
|
--panel: #0c0f11;
|
|
--panel-soft: #101416;
|
|
--ink: #eef2ee;
|
|
--muted: #8a9490;
|
|
--faint: #5f6965;
|
|
--line: rgba(238, 242, 238, 0.12);
|
|
--accent: #8ee7d2;
|
|
--accent-dim: rgba(142, 231, 210, 0.16);
|
|
--error: #e58f85;
|
|
--success: #9be2b5;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-width: 368px;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(circle at 22% 12%, rgba(142, 231, 210, 0.08), transparent 30%),
|
|
linear-gradient(145deg, #050607, #020303);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
}
|
|
|
|
button,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
.shell {
|
|
position: relative;
|
|
padding: 16px;
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 68px 1fr;
|
|
gap: 14px;
|
|
align-items: center;
|
|
padding: 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
background: rgba(12, 15, 17, 0.94);
|
|
}
|
|
|
|
.eyebrow,
|
|
.label {
|
|
margin: 0;
|
|
color: var(--accent);
|
|
font-size: 0.66rem;
|
|
font-weight: 750;
|
|
letter-spacing: 0.09em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.label-row {
|
|
display: flex;
|
|
gap: 7px;
|
|
align-items: center;
|
|
}
|
|
|
|
.help-button {
|
|
display: inline-grid;
|
|
width: 18px;
|
|
height: 18px;
|
|
place-items: center;
|
|
padding: 0;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
color: var(--muted);
|
|
background: transparent;
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.help-button:hover,
|
|
.help-button:focus-visible {
|
|
color: var(--accent);
|
|
border-color: rgba(142, 231, 210, 0.42);
|
|
outline: none;
|
|
}
|
|
|
|
h1 {
|
|
margin: 5px 0 6px;
|
|
font-size: 1.42rem;
|
|
line-height: 1;
|
|
letter-spacing: -0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.lede {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 0.78rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.brain-mark {
|
|
width: 58px;
|
|
height: 58px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
background: #070a0b;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.target-card {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 12px;
|
|
align-items: center;
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: var(--panel);
|
|
}
|
|
|
|
.folder-status {
|
|
margin: 4px 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.74rem;
|
|
line-height: 1.35;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.hint {
|
|
margin: 9px 2px 0;
|
|
color: var(--faint);
|
|
font-size: 0.68rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.path-panel {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
border: 1px solid rgba(142, 231, 210, 0.2);
|
|
border-radius: 12px;
|
|
background: rgba(142, 231, 210, 0.06);
|
|
}
|
|
|
|
.path-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.path-panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
align-items: center;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.path-panel-header p,
|
|
.path-panel-header span {
|
|
margin: 0;
|
|
color: var(--faint);
|
|
font-size: 0.66rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.path-panel-header span {
|
|
color: var(--success);
|
|
}
|
|
|
|
.path-panel code {
|
|
display: block;
|
|
max-height: 92px;
|
|
overflow: auto;
|
|
padding: 9px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
color: var(--ink);
|
|
background: #050707;
|
|
font-size: 0.66rem;
|
|
line-height: 1.45;
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.field {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 13px;
|
|
color: var(--muted);
|
|
font-size: 0.68rem;
|
|
font-weight: 750;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
min-height: 72px;
|
|
resize: vertical;
|
|
padding: 11px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
outline: none;
|
|
color: var(--ink);
|
|
background: var(--panel-soft);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
textarea::placeholder {
|
|
color: rgba(138, 148, 144, 0.72);
|
|
}
|
|
|
|
textarea:focus {
|
|
border-color: rgba(142, 231, 210, 0.48);
|
|
box-shadow: 0 0 0 3px var(--accent-dim);
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.primary,
|
|
.secondary {
|
|
border-radius: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.primary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 9px;
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
padding: 13px 16px;
|
|
color: #04100d;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.secondary {
|
|
padding: 9px 11px;
|
|
color: var(--ink);
|
|
background: #182022;
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: wait;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.help-button:disabled {
|
|
cursor: pointer;
|
|
opacity: 1;
|
|
}
|
|
|
|
.pulse {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 999px;
|
|
background: #04100d;
|
|
}
|
|
|
|
.status {
|
|
min-height: 18px;
|
|
margin: 10px 2px 0;
|
|
color: var(--muted);
|
|
font-size: 0.74rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.status[data-tone="success"] {
|
|
color: var(--success);
|
|
}
|
|
|
|
.status[data-tone="error"] {
|
|
color: var(--error);
|
|
}
|
|
|
|
/* ── Tabs ───────────────────────────────────────────────────────────────── */
|
|
|
|
.tabs {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6px;
|
|
margin-top: 12px;
|
|
padding: 4px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--panel);
|
|
}
|
|
|
|
.tab {
|
|
padding: 8px 10px;
|
|
border-radius: 9px;
|
|
color: var(--muted);
|
|
background: transparent;
|
|
font-size: 0.68rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tab:hover {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.tab.is-active {
|
|
color: #04100d;
|
|
background: var(--accent);
|
|
}
|
|
|
|
select.secondary {
|
|
appearance: none;
|
|
padding: 9px 11px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* ── Fill results ───────────────────────────────────────────────────────── */
|
|
|
|
.results {
|
|
max-height: 190px;
|
|
overflow-y: auto;
|
|
margin: 12px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.results:empty {
|
|
display: none;
|
|
}
|
|
|
|
.results li {
|
|
padding: 9px 10px;
|
|
margin-bottom: 6px;
|
|
border: 1px solid var(--line);
|
|
border-left: 2px solid var(--success);
|
|
border-radius: 10px;
|
|
background: var(--panel);
|
|
}
|
|
|
|
.results li[data-confident="false"] {
|
|
border-left-color: var(--error);
|
|
}
|
|
|
|
.results .result-label {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
font-size: 0.7rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.results li[data-confident="false"] .result-label::after {
|
|
content: " · check";
|
|
color: var(--error);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.results .result-value {
|
|
margin: 3px 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.68rem;
|
|
line-height: 1.4;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.results .result-meta {
|
|
margin: 4px 0 0;
|
|
color: var(--faint);
|
|
font-size: 0.62rem;
|
|
overflow-wrap: anywhere;
|
|
}
|