João Salavisa
0f1081d423
* feat(share): add public share links via GitHub Gists Adds a Share button to the chat panel header that publishes the current session as a secret GitHub Gist on the user's account. The share link routes through gistpreview.github.io to render share.html as a styled kandev-themed page; snapshot.json + README.md ride along for machine-readable + fallback views. Snapshots run a redaction pass (absolute paths, common credential shapes, .env contents, shell env vars) and strip <kandev-system> prompt blocks via the shared sysprompt helper. Message filtering whitelists user prose + tool_* types so internal noise never leaks into shares. Spec at docs/specs/public-share-links/spec.md. * fix(share): coerce pendingClarification to bool for ClarificationSection A late refactor extracted ClarificationSection with `pendingClarification: boolean` on its props, but the call site passes the actual Message|null value. CI's tsc build catches the mismatch; runtime was unaffected because the section only uses the value in a truthiness check. Coerce with Boolean() at the call site to keep the prop's intent narrow. * fix(share): address PR #995 review feedback Bugs (flagged by Greptile, Cubic, Claude): - abs-path redaction split on `root + "/"` so sibling dirs like /home/user/proj2 don't get corrupted when workspaceRoot is /home/user/proj; regression test added. - GHClient.DeleteGist now wraps "HTTP 404" stderr as *GitHubAPIError so share.IsAlreadyGone matches consistently with the PAT client; this restores the "gist already revoked upstream" soft-success path for CLI-authenticated users. - SnapshotSizeBytes is now measured from the same MarshalIndent payload the gist backend uploads, so the size shown in the UI matches the actual gist bytes (was ~20-40% underreported). Polish (flagged by CodeRabbit, Cubic): - Tool name + tool output now HTML-escaped; tool call args and output render via <pre><code> instead of triple-backtick fences so payloads containing ``` can't break out of the code block. - share-list.tsx: clear `busy` via finally and break error layout out of the justify-between row. - use-shares.ts: convert UseSharesResult to interface (repo TS rules); reset error+isLoading when ids are missing. - use-shares.test.tsx: wait on the actual async outcome (shares populated, listShares called) instead of isLoading flipping false. - provider.go: replace `repo.Close` cleanup with an explicit noop closure so the comment ("Cleanup is a no-op") and the impl match. - spec.md: aligned the shareability rule across What/Failure/Scenarios/ Out-of-scope — any non-prehistory state can be shared; added language tags to fenced code blocks for markdownlint. Skipped intentionally (reply on each thread): - HTML-escape every metadata badge: the values are controlled enum strings from kandev's own schema, not user input. Defense-in-depth noise. Tool name (which can come from agent runtime) IS escaped. - useShares request-token guard against stale responses: the dialog owns the hook lifecycle and opens against a single (taskId, sessionId) — the race the comment describes can't occur here. * fix(share): redact paths for every worktree, not just the first A single TaskSession can carry multiple worktrees when the task spans multiple repos. The redactor previously only saw the first worktree path, so absolute paths from secondary worktrees leaked into public shares instead of being rewritten to repo-relative form. NewRedactor is now variadic and applies the abs-path rule against every root it receives, sorted longest-first so a root that is a prefix of another (e.g. /workspace vs /workspace/repo1) gets matched by the more specific one first. workspaceRootFor in builder.go becomes workspaceRootsFor and emits every WorktreePath plus the WorkspacePath fallback. Flagged by Cubic on PR #995. * fix(share): address PR #995 review round 3 Bugs (flagged by Cubic + Claude on gh_client.go:714): - DeleteGist now calls the existing isNotFoundErr helper instead of an inline strings.Contains(err, "HTTP 404"). The helper also covers "404 Not Found" and "status: 404", which some gh versions emit, so the share service's "gist already revoked upstream" soft-success path now fires consistently across CLI auth users. Bugs (flagged by Claude on builder.go:220): - toolCallBlock used to read metadata["tool_name"] and metadata["args"] but production never writes those keys; the typed payload lives under metadata["normalized"] (a *streams.NormalizedPayload) and the tool kind is on Message.Type. Switched to deriving ToolName from strings.TrimPrefix(m.Type, "tool_") (gives "read", "execute", "edit", …) and reading args from metadata["normalized"], with backward-compat fallback to the older "tool_name"/"args" keys for the debug-fixture replay path. New TestBuildSnapshot_ToolCall_ProductionMetadataShape exercises the real session shape. Bugs (flagged by CodeRabbit on redaction.go:110): - Bare workspace-root occurrences (pwd output, end-of-sentence, quoted paths) used to leak because the matcher only handled root + "/". Switched to a precompiled regex per root — regexp.QuoteMeta(root) + `(?:/|\b)` — so both `root/...` and standalone `root` get stripped, while sibling dirs like /workspace2 still don't match. Test TestRedactor_AbsPath_StandaloneRootStripped covers the bare-root variants. Doc (flagged by Claude on spec.md): - Two malformed fence closers (`go and `text on closing fences) corrected to plain ``` so the file is markdownlint-clean. * fix(share): narrow abs-path boundary to avoid sibling-prefix corruption Round 4 review (Claude + CodeRabbit) caught a regression in the regex introduced by 436cb66: `(?:/|\b)` used `\b` (word boundary) to catch bare-root cases, but `\b` fires on any word↔non-word transition. So a sibling path like `/workspace.bak`, `/workspace-old`, or `/workspace-other` would false-match the `/workspace` root (since e→. and e→- are word boundaries), stripping it and leaving a corrupted `.bak` / `-old/file.ts` in the share. Replaced the matcher with `(/|\s|$)`: path separator, whitespace, or end-of-string only — never punctuation or quote chars. The boundary is captured and re-emitted via ReplaceAllStringFunc (or dropped, in the `/` case) so prose loses only the root, not the surrounding space. Added TestRedactor_AbsPath_SiblingsWithPunctuationNotCorrupted covering `.bak`, `-old`, `_alt` siblings; the digit-sibling test still passes. The quoted-bare-root case (`"/workspace"`) no longer matches and was dropped from the standalone-root test — contrived enough that a small leak there is preferable to corrupting realistic sibling paths. * refactor(share): move share button into chat status bar Replaces the dedicated PanelHeaderBarSplit above the message list with a slot in ChatStatusBar (the existing row holding TodoIndicator and PRStatusChip just above the chat input). The button anchors right via ml-auto; when the "proceed to next step" affordance is present it takes the right anchor instead and the share button stays inline. Also tightens the iconOnly variant in ShareButton to a ghost style that matches the muted-foreground chips in the status bar, and exports shareableSessionStateClient from share-button.tsx so the gating logic lives next to the entry point it controls. Net -23 lines in task-chat-panel.tsx: the extra header bar and the local gate helper are gone. * docs(share): broaden tooltip + add share/ to CLAUDE.md tree The share tooltip read "Share this completed task with a public link", but shareableSessionStateClient allows RUNNING / IDLE / WAITING_FOR_INPUT / FAILED / CANCELLED too. A user hovering mid-run saw misleading copy; reworded to "Share this task conversation as a public link" which matches the actual gate. Also added the missing internal/task/share/ entry to the task/ subtree in CLAUDE.md so the new package shows up in the repo map — flagged across multiple rounds. * docs: add internal/task/share/ to repo map Carryover from the share PR — AGENTS.md (which CLAUDE.md symlinks to) was missing the share/ subpackage under task/. Adding it now so the repo map matches what's checked in. --------- Co-authored-by: Kandev Agent <agent@kandev.dev>
387 lines
10 KiB
Go
387 lines
10 KiB
Go
package share
|
|
|
|
// shareCSS is the inlined stylesheet for the rendered share.html page.
|
|
// Self-contained — no @import, no external fonts — so the page renders
|
|
// identically on a fresh CDN with no network outside itself.
|
|
//
|
|
// Color tokens mirror kandev's dark-mode palette
|
|
// (apps/packages/theme/src/globals.css). We use the same oklch() values
|
|
// so the share page reads as part of the product rather than a separate
|
|
// site. oklch() has full support in current Chrome/Safari/Firefox.
|
|
//
|
|
// Layout: classic chat. User bubbles right-aligned with the primary
|
|
// (purple) fill; assistant content left-aligned in the card surface;
|
|
// system messages centered and de-emphasised. Tool calls render inline
|
|
// as collapsed pills inside the assistant bubble. Diffs are full-width
|
|
// code blocks with per-line tinting for adds/dels/hunks.
|
|
const shareCSS = `
|
|
:root {
|
|
color-scheme: dark;
|
|
|
|
/* — Kandev dark-mode tokens (oklch, ported from globals.css) — */
|
|
--bg: oklch(0.145 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.205 0 0);
|
|
--muted: oklch(0.269 0 0);
|
|
--muted-foreground: oklch(0.708 0 0);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--border-strong: oklch(1 0 0 / 18%);
|
|
--primary: oklch(0.59 0.2 277);
|
|
--primary-foreground: oklch(0.96 0.02 272);
|
|
--accent: oklch(0.62 0.18 276);
|
|
--accent-strong: oklch(0.79 0.1 275);
|
|
--success: oklch(0.68 0.12 150);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
|
|
/* — Derived semantic aliases used in the share layout — */
|
|
--text: var(--foreground);
|
|
--text-dim: var(--muted-foreground);
|
|
--text-faint: oklch(0.55 0 0);
|
|
--surface: var(--card);
|
|
--surface-2: oklch(0.235 0 0);
|
|
|
|
--diff-add-bg: color-mix(in oklab, var(--success) 14%, transparent);
|
|
--diff-add-text: oklch(0.85 0.14 150);
|
|
--diff-del-bg: color-mix(in oklab, var(--destructive) 14%, transparent);
|
|
--diff-del-text: oklch(0.82 0.16 22);
|
|
--diff-hunk: var(--accent-strong);
|
|
|
|
--radius: 0.375rem;
|
|
--radius-lg: 0.625rem;
|
|
--radius-xl: 0.875rem;
|
|
|
|
--mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
--sans: "Figtree", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--sans);
|
|
font-size: 15px;
|
|
line-height: 1.55;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
a { color: var(--accent-strong); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
code, pre { font-family: var(--mono); }
|
|
::selection { background: var(--primary); color: var(--primary-foreground); }
|
|
|
|
/* ─── Hero ─────────────────────────────────────────────────────── */
|
|
|
|
.hero {
|
|
max-width: 880px;
|
|
margin: 0 auto;
|
|
padding: 56px 24px 28px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--text-dim);
|
|
font-size: 13px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.brand a { color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
|
|
.brand-sep { color: var(--text-faint); }
|
|
.brand-tag { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
|
|
|
|
.hero h1 {
|
|
margin: 0 0 18px;
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.015em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 8px;
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-dim);
|
|
font-size: 12px;
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
.redaction {
|
|
margin: 16px 0 0;
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
}
|
|
.redaction code {
|
|
padding: 1px 6px;
|
|
background: var(--surface);
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ─── Conversation ────────────────────────────────────────────── */
|
|
|
|
.conv {
|
|
max-width: 880px;
|
|
margin: 0 auto;
|
|
padding: 32px 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.group {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.group-user { flex-direction: row-reverse; }
|
|
.group-assistant { flex-direction: row; }
|
|
.group-system { justify-content: center; }
|
|
|
|
.avatar {
|
|
flex-shrink: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border-strong);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.group-user .avatar {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
}
|
|
.group-system .avatar { display: none; }
|
|
|
|
.bubble {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px 16px;
|
|
border-radius: var(--radius-xl);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.group-assistant .bubble {
|
|
border-bottom-left-radius: var(--radius);
|
|
flex: 1;
|
|
}
|
|
.group-user .bubble {
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
border-color: var(--primary);
|
|
border-bottom-right-radius: var(--radius);
|
|
max-width: 75%;
|
|
}
|
|
.group-system .bubble {
|
|
background: transparent;
|
|
border-style: dashed;
|
|
color: var(--text-dim);
|
|
font-size: 13px;
|
|
max-width: 480px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Role label sits above the content. Hidden inside user bubbles since
|
|
the right-alignment + color already convey "you said this." */
|
|
.role {
|
|
font-size: 10.5px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-faint);
|
|
margin: -2px 0 -4px;
|
|
}
|
|
.group-user .role { display: none; }
|
|
.group-assistant .role { color: var(--accent-strong); }
|
|
|
|
/* ─── Text inside bubbles ─────────────────────────────────────── */
|
|
|
|
.text > * { margin: 0; }
|
|
.text > * + * { margin-top: 8px; }
|
|
.text p { line-height: 1.6; }
|
|
.group-user .text { font-size: 15px; }
|
|
|
|
code.inline {
|
|
background: color-mix(in oklab, var(--foreground) 8%, transparent);
|
|
padding: 1px 5px;
|
|
border-radius: 4px;
|
|
font-size: 0.9em;
|
|
}
|
|
.group-user code.inline {
|
|
background: color-mix(in oklab, white 22%, transparent);
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
pre.code {
|
|
margin: 4px 0;
|
|
padding: 12px 14px;
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
overflow-x: auto;
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
color: var(--text);
|
|
}
|
|
.group-user pre.code {
|
|
background: color-mix(in oklab, black 25%, transparent);
|
|
border-color: color-mix(in oklab, white 14%, transparent);
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
/* ─── Tool call / result pills ────────────────────────────────── */
|
|
|
|
.tool {
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-lg);
|
|
background: color-mix(in oklab, var(--foreground) 3%, transparent);
|
|
overflow: hidden;
|
|
}
|
|
.tool > summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
padding: 7px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
user-select: none;
|
|
}
|
|
.tool > summary::-webkit-details-marker { display: none; }
|
|
.tool > summary:hover { background: color-mix(in oklab, var(--foreground) 4%, transparent); }
|
|
|
|
.tool-icon { font-size: 13px; }
|
|
.tool-name {
|
|
color: var(--text);
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
}
|
|
.tool-summary {
|
|
flex: 1;
|
|
color: var(--text-faint);
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
.tool-chev {
|
|
color: var(--text-faint);
|
|
font-size: 10px;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
.tool[open] > summary .tool-chev { transform: rotate(90deg); }
|
|
|
|
.args, .output {
|
|
margin: 0;
|
|
padding: 12px 14px;
|
|
background: var(--bg);
|
|
border-top: 1px solid var(--border);
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
overflow-x: auto;
|
|
white-space: pre;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ─── Diff blocks ─────────────────────────────────────────────── */
|
|
|
|
.diff {
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg);
|
|
overflow: hidden;
|
|
}
|
|
.diff-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
background: var(--surface-2);
|
|
}
|
|
.diff-head code { color: var(--text); font-size: 12px; }
|
|
.diff-body {
|
|
margin: 0;
|
|
padding: 8px 0;
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
overflow-x: auto;
|
|
}
|
|
.diff-body > span {
|
|
display: block;
|
|
padding: 0 14px;
|
|
white-space: pre;
|
|
}
|
|
.diff-add { background: var(--diff-add-bg); color: var(--diff-add-text); }
|
|
.diff-del { background: var(--diff-del-bg); color: var(--diff-del-text); }
|
|
.diff-hunk { color: var(--diff-hunk); }
|
|
.diff-file { color: var(--text-faint); }
|
|
|
|
/* ─── Misc ────────────────────────────────────────────────────── */
|
|
|
|
.empty {
|
|
text-align: center;
|
|
color: var(--text-faint);
|
|
padding: 48px 0;
|
|
}
|
|
|
|
.page-footer {
|
|
max-width: 880px;
|
|
margin: 0 auto;
|
|
padding: 32px 24px 48px;
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: var(--text-faint);
|
|
}
|
|
.cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 6px 12px;
|
|
border-radius: var(--radius);
|
|
background: var(--primary);
|
|
color: var(--primary-foreground) !important;
|
|
font-weight: 500;
|
|
}
|
|
.cta:hover { text-decoration: none; background: var(--accent); }
|
|
.foot-sep { color: var(--text-faint); }
|
|
.foot-link { color: var(--text-dim); }
|
|
.foot-version { color: var(--text-faint); font-family: var(--mono); font-size: 12px; }
|
|
|
|
/* ─── Mobile ──────────────────────────────────────────────────── */
|
|
|
|
@media (max-width: 640px) {
|
|
.hero { padding: 32px 16px 20px; }
|
|
.hero h1 { font-size: 22px; }
|
|
.conv { padding: 20px 12px; gap: 18px; }
|
|
.group { gap: 8px; }
|
|
.avatar { width: 26px; height: 26px; font-size: 14px; }
|
|
.bubble { padding: 10px 12px; border-radius: var(--radius-lg); }
|
|
.group-user .bubble { max-width: 85%; }
|
|
}
|
|
`
|