@vintasoftware/pr-review-canvas 0.2.0 → 0.4.0

package/static/styles/skin-github.css

@@ -9,7 +9,7 @@
 
    Dark is GitHub's "dark dimmed": a softer grey-blue ground rather than the near-black one. */
 
-:root[data-skin="github"] {
+:root[data-skin='github'] {
   --r: 6px;
   --gap: 16px;
   --main-pad: 16px 16px 40px;
@@ -70,45 +70,38 @@
 }
 
 /* ---- Header ---- */
-[data-skin="github"] .hdr-bar {
+[data-skin='github'] .hdr-bar {
   background: light-dark(#ffffff, #151b23);
 }
 
-[data-skin="github"] .brand {
+[data-skin='github'] .brand {
   text-transform: none;
   letter-spacing: normal;
   font-size: 14px;
-  align-items: center;
-}
-[data-skin="github"] .brand .box {
-  border-width: 1px;
-  border-radius: var(--r);
-  background: var(--panel-2);
-  padding: 3px 8px;
 }
 /* The rainbow bar becomes the hairline that runs under GitHub's page header. */
-[data-skin="github"] .stripe {
+[data-skin='github'] .stripe {
   height: 1px;
   background: var(--ink);
 }
-[data-skin="github"] .hdr-actions {
+[data-skin='github'] .hdr-actions {
   gap: 8px;
   align-items: center;
 }
-[data-skin="github"] .hdr-title {
+[data-skin='github'] .hdr-title {
   padding-bottom: 16px;
 }
 
 /* ---- Commands ---- */
-[data-skin="github"] .cmd::before,
-[data-skin="github"] .cmd::after {
+[data-skin='github'] .cmd::before,
+[data-skin='github'] .cmd::after {
   content: none;
 }
-[data-skin="github"] .cmd {
+[data-skin='github'] .cmd {
   font-weight: 500;
 }
 /* The header's commands read as GitHub's toolbar buttons; commands inside the page stay links. */
-[data-skin="github"] .hdr-actions .cmd {
+[data-skin='github'] .hdr-actions .cmd {
   padding: 3px 12px;
   border: 1px solid var(--line);
   border-radius: var(--r);
@@ -117,16 +110,16 @@
   font-size: 12px;
   line-height: 20px;
 }
-[data-skin="github"] .hdr-actions .cmd:hover {
+[data-skin='github'] .hdr-actions .cmd:hover {
   background: var(--btn-bg-hover);
   text-decoration: none;
 }
-[data-skin="github"] .hdr-actions .cmd:disabled,
-[data-skin="github"] .hdr-actions .cmd[aria-disabled="true"] {
+[data-skin='github'] .hdr-actions .cmd:disabled,
+[data-skin='github'] .hdr-actions .cmd[aria-disabled='true'] {
   color: var(--fg-dim);
 }
-[data-skin="github"] .cmd.fill,
-[data-skin="github"] .cmd.big {
+[data-skin='github'] .cmd.fill,
+[data-skin='github'] .cmd.big {
   border: 1px solid transparent;
   border-radius: var(--r);
   background: var(--btn-primary);
@@ -134,56 +127,62 @@
   box-shadow: none;
   padding: 5px 16px;
 }
-[data-skin="github"] .cmd.big {
+[data-skin='github'] .cmd.big {
   padding: 8px 20px;
   font-size: 14px;
 }
-[data-skin="github"] .cmd.fill:hover,
-[data-skin="github"] .cmd.big:hover,
-[data-skin="github"] .cmd.fill:active {
+[data-skin='github'] .cmd.fill:hover,
+[data-skin='github'] .cmd.big:hover,
+[data-skin='github'] .cmd.fill:active {
   background: var(--btn-primary-hover);
   transform: none;
   box-shadow: none;
 }
-[data-skin="github"] .chat-composer .cmd.fill {
+[data-skin='github'] .chat-composer .cmd.fill {
   box-shadow: none;
 }
 
 /* ---- Pills: GitHub's rounded labels, with the state ones filled ---- */
-[data-skin="github"] .pill {
+[data-skin='github'] .pill {
   border-radius: 2em;
   padding: 0 8px;
   font-size: 12px;
   line-height: 20px;
   border-color: var(--line);
 }
-[data-skin="github"] .pill.open,
-[data-skin="github"] .pill.merged,
-[data-skin="github"] .pill.closed,
-[data-skin="github"] .pill.draft {
+[data-skin='github'] .pill.open,
+[data-skin='github'] .pill.merged,
+[data-skin='github'] .pill.closed,
+[data-skin='github'] .pill.draft,
+[data-skin='github'] .pill.branch,
+[data-skin='github'] .pill.uncommitted {
   border-color: transparent;
   color: #ffffff;
 }
-[data-skin="github"] .pill.open {
+[data-skin='github'] .pill.open {
   background: light-dark(#1f883d, #347d39);
 }
-[data-skin="github"] .pill.merged {
+[data-skin='github'] .pill.merged {
   background: light-dark(#8250df, #8256d0);
 }
-[data-skin="github"] .pill.closed {
+[data-skin='github'] .pill.closed {
   background: light-dark(#cf222e, #c93c37);
 }
-[data-skin="github"] .pill.draft {
+[data-skin='github'] .pill.draft {
   background: light-dark(#6e7781, #636e7b);
 }
-[data-skin="github"] .pill.risk,
-[data-skin="github"] .pill.kind,
-[data-skin="github"] .pill.agent {
+[data-skin='github'] .pill.branch,
+[data-skin='github'] .pill.uncommitted {
+  background: light-dark(#0969da, #1f6feb);
+}
+[data-skin='github'] .pill.risk,
+[data-skin='github'] .pill.kind,
+[data-skin='github'] .pill.agent {
   background: var(--panel-2);
   color: var(--fg-muted);
   font-weight: 500;
 }
-[data-skin="github"] .pill.test-tag {
+[data-skin='github'] .pill.test-tag {
   background: var(--accent-bg);
   color: var(--accent);
   border-color: transparent;
@@ -193,164 +192,164 @@
 }
 
 /* ---- Cards ---- */
-[data-skin="github"] .panel,
-[data-skin="github"] .layer,
-[data-skin="github"] .diagram {
+[data-skin='github'] .panel,
+[data-skin='github'] .layer,
+[data-skin='github'] .diagram {
   border-radius: var(--r);
 }
-[data-skin="github"] .panel-h,
-[data-skin="github"] .layer-h,
-[data-skin="github"] .diagram-h {
+[data-skin='github'] .panel-h,
+[data-skin='github'] .layer-h,
+[data-skin='github'] .diagram-h {
   border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
 }
-[data-skin="github"] .chev {
+[data-skin='github'] .chev {
   color: var(--fg-muted);
 }
-[data-skin="github"] .summary h3,
-[data-skin="github"] .judgment .lbl,
-[data-skin="github"] .role,
-[data-skin="github"] .diff th {
+[data-skin='github'] .summary h3,
+[data-skin='github'] .judgment .lbl,
+[data-skin='github'] .role,
+[data-skin='github'] .diff th {
   text-transform: none;
   letter-spacing: normal;
 }
-[data-skin="github"] .summary h3 {
+[data-skin='github'] .summary h3 {
   font-size: 14px;
   color: var(--fg);
 }
-[data-skin="github"] .prose ul {
+[data-skin='github'] .prose ul {
   list-style: disc;
 }
-[data-skin="github"] .sq {
+[data-skin='github'] .sq {
   border-radius: 2px;
 }
-[data-skin="github"] .sevsum > .legend {
+[data-skin='github'] .sevsum > .legend {
   border-radius: var(--r);
   box-shadow: var(--drop-shadow);
 }
 /* GitHub draws progress as a filled track rather than a hairline. */
-[data-skin="github"] .pline {
+[data-skin='github'] .pline {
   background: var(--line);
   border-radius: var(--r);
 }
-[data-skin="github"] .pline span {
+[data-skin='github'] .pline span {
   border-radius: var(--r);
 }
 
 /* ---- Rail ---- */
-[data-skin="github"] .tree a {
+[data-skin='github'] .tree a {
   margin: 0 8px;
   padding: 6px 8px;
   border-radius: var(--r);
 }
-[data-skin="github"] .tree .layers a {
+[data-skin='github'] .tree .layers a {
   padding-left: 20px;
 }
-[data-skin="github"] .tree a[aria-current] {
+[data-skin='github'] .tree a[aria-current] {
   background: var(--accent-bg);
   box-shadow: inset 3px 0 0 var(--accent);
 }
 
 /* ---- Diff ---- */
-[data-skin="github"] .plus {
+[data-skin='github'] .plus {
   border: 0;
   border-radius: var(--r);
   background: var(--accent);
   color: #ffffff;
 }
-[data-skin="github"] .av {
+[data-skin='github'] .av {
   border-radius: 50%;
   border-color: var(--line);
   background: var(--panel-2);
 }
-[data-skin="github"] tr.hunk td {
+[data-skin='github'] tr.hunk td {
   color: light-dark(#0550ae, #9198a1);
 }
 
-[data-skin="github"] .diff .ln {
+[data-skin='github'] .diff .ln {
   border-right-color: light-dark(#d1d9e0, transparent);
 }
-[data-skin="github"] tr.add .ln {
+[data-skin='github'] tr.add .ln {
   background: light-dark(#e6ffec, #31503d);
   color: light-dark(#818b98, #d1d7e0);
 }
-[data-skin="github"] tr.del .ln {
+[data-skin='github'] tr.del .ln {
   background: light-dark(#ffebe9, rgba(229, 83, 75, 0.3));
   color: light-dark(#818b98, #d1d7e0);
 }
 
 /* ---- Boxes, menus, and overlays ---- */
-[data-skin="github"] code,
-[data-skin="github"] .snip,
-[data-skin="github"] .ctx-chip,
-[data-skin="github"] .diagram-src,
-[data-skin="github"] .cmdbox code,
-[data-skin="github"] .notice,
-[data-skin="github"] .callout,
-[data-skin="github"] .stale-bar,
-[data-skin="github"] .proposed,
-[data-skin="github"] .proposed-invalid,
-[data-skin="github"] .drop,
-[data-skin="github"] .prose pre,
-[data-skin="github"] dialog.settings .panel-ro {
+[data-skin='github'] code,
+[data-skin='github'] .snip,
+[data-skin='github'] .ctx-chip,
+[data-skin='github'] .diagram-src,
+[data-skin='github'] .cmdbox code,
+[data-skin='github'] .notice,
+[data-skin='github'] .callout,
+[data-skin='github'] .stale-bar,
+[data-skin='github'] .proposed,
+[data-skin='github'] .proposed-invalid,
+[data-skin='github'] .drop,
+[data-skin='github'] .prose pre,
+[data-skin='github'] dialog.settings .panel-ro {
   border-radius: var(--r);
 }
-[data-skin="github"] code {
+[data-skin='github'] code {
   border: 0;
   background: light-dark(rgba(129, 139, 152, 0.2), rgba(99, 110, 123, 0.4));
   padding: 0.2em 0.4em;
 }
-[data-skin="github"] .cmdbox code,
-[data-skin="github"] .diagram-src {
+[data-skin='github'] .cmdbox code,
+[data-skin='github'] .diagram-src {
   background: var(--panel-2);
   border: 1px solid var(--line);
 }
-[data-skin="github"] .drop {
+[data-skin='github'] .drop {
   border-width: 1px;
   background: var(--panel-2);
 }
-[data-skin="github"] .drop:hover,
-[data-skin="github"] .drop.over {
+[data-skin='github'] .drop:hover,
+[data-skin='github'] .drop.over {
   transform: none;
   background: var(--accent-bg);
 }
-[data-skin="github"] .proposed,
-[data-skin="github"] .cmd.unseen,
-[data-skin="github"] .qq-menu {
+[data-skin='github'] .proposed,
+[data-skin='github'] .cmd.unseen,
+[data-skin='github'] .qq-menu {
   border-width: 1px;
 }
-[data-skin="github"] .cmd.unseen,
-[data-skin="github"] .qq-menu,
-[data-skin="github"] .toast {
+[data-skin='github'] .cmd.unseen,
+[data-skin='github'] .qq-menu,
+[data-skin='github'] .toast {
   border-radius: var(--r);
   box-shadow: var(--drop-shadow);
 }
-[data-skin="github"] select,
-[data-skin="github"] input,
-[data-skin="github"] textarea,
-[data-skin="github"] .composer-box textarea,
-[data-skin="github"] dialog.signoff-dialog textarea {
+[data-skin='github'] select,
+[data-skin='github'] input,
+[data-skin='github'] textarea,
+[data-skin='github'] .composer-box textarea,
+[data-skin='github'] dialog.signoff-dialog textarea {
   border-width: 1px;
   border-color: var(--line);
   border-radius: var(--r);
   padding: 5px 12px;
 }
-[data-skin="github"] dialog {
+[data-skin='github'] dialog {
   border-width: 1px;
   border-color: var(--line);
   border-radius: 12px;
   box-shadow: var(--drop-shadow);
 }
-[data-skin="github"] dialog::backdrop {
+[data-skin='github'] dialog::backdrop {
   background: rgba(28, 33, 40, 0.6);
 }
 
 @media (max-width: 1000px) {
   /* The rail is a strip of chips at this width; the current one is underlined, not filled. */
-  [data-skin="github"] .tree a {
+  [data-skin='github'] .tree a {
     margin: 0;
     border-radius: var(--r);
   }
-  [data-skin="github"] .tree a[aria-current] {
+  [data-skin='github'] .tree a[aria-current] {
     box-shadow: inset 0 -3px 0 var(--accent);
   }
 }

package/static/styles.css

@@ -1,14 +1,15 @@
 /* Keep this order: shared styles, components, responsive rules, interaction controls, and the
    github skin last, because it repaints the rules above it. */
-@import "./styles/base.css";
-@import "./styles/commands.css";
-@import "./styles/header.css";
-@import "./styles/layout.css";
-@import "./styles/review.css";
-@import "./styles/diff.css";
-@import "./styles/chat.css";
-@import "./styles/panels.css";
-@import "./styles/responsive.css";
-@import "./styles/review-actions.css";
-@import "./styles/chat-tools.css";
-@import "./styles/skin-github.css";
+@import './styles/base.css';
+@import './styles/commands.css';
+@import './styles/header.css';
+@import './styles/layout.css';
+@import './styles/review.css';
+@import './styles/diff.css';
+@import './styles/chat.css';
+@import './styles/panels.css';
+@import './styles/responsive.css';
+@import './styles/review-actions.css';
+@import './styles/chat-tools.css';
+@import './styles/skin-github.css';
+@import './styles/chat-panel.css';

package/src/github/gh.ts

@@ -1,196 +0,0 @@
-import { execFile } from 'node:child_process'
-
-/**
- * The GitHub operations the tool needs, all through the `gh` CLI so the user's own login is
- * used and no token is ever read by this code. Routes receive an implementation through
- * AppContext; tests use an in-memory fake.
- */
-export interface GitHubClient {
-  /** `gh api --method GET <path>` with optional query params; returns the parsed JSON body. */
-  api(path: string, params?: Record<string, string>): Promise<unknown>
-  /** `gh api -i --method GET <path>`: the response headers as well as the body. */
-  apiWithHeaders(path: string): Promise<GhResponse>
-  /** `gh api --method POST <path> --input -`; the JSON body goes over stdin, never the command line. */
-  post(path: string, body: unknown): Promise<unknown>
-  /** `gh api graphql`; returns the parsed `data` object. */
-  graphql(query: string, variables: Record<string, string | number>): Promise<unknown>
-  /** `gh auth status`: is the CLI installed and logged in? */
-  authStatus(): Promise<{ installed: boolean; authenticated: boolean; detail: string }>
-  /**
-   * `gh auth token`: the token of the current login, or null when there is none. Callers keep it
-   * in a local variable for the length of one request; it is never logged or written to disk.
-   */
-  authToken(): Promise<string | null>
-}
-
-/** One HTTP answer from `gh api -i`: the status, the header names in lower case, and the body. */
-export interface GhResponse {
-  status: number
-  headers: Record<string, string>
-  body: unknown
-}
-
-/**
- * Splits the output of `gh api -i` into the last header block and the body. A redirect prints
- * one block per hop, and only the final one describes the answer.
- */
-export function parseIncludedResponse(stdout: string): GhResponse {
-  const normalized = stdout.replace(/\r\n/g, '\n')
-  const parts = normalized.split('\n\n')
-  let body: unknown = null
-  const headerBlocks: string[] = []
-  for (const [i, part] of parts.entries()) {
-    if (/^HTTP\/[\d.]+ \d{3}/.test(part)) {
-      headerBlocks.push(part)
-      continue
-    }
-    // Everything after the last header block is the body, which may hold blank lines itself.
-    body = parseJsonOrNull(parts.slice(i).join('\n\n'))
-    break
-  }
-  const last = headerBlocks[headerBlocks.length - 1] ?? ''
-  const lines = last.split('\n').filter(l => l.trim() !== '')
-  const status = Number(/^HTTP\/[\d.]+ (\d{3})/.exec(lines[0] ?? '')?.[1] ?? 0)
-  const headers: Record<string, string> = {}
-  for (const line of lines.slice(1)) {
-    const at = line.indexOf(':')
-    if (at > 0) {
-      headers[line.slice(0, at).trim().toLowerCase()] = line.slice(at + 1).trim()
-    }
-  }
-  return { status, headers, body }
-}
-
-function parseJsonOrNull(text: string): unknown {
-  if (text.trim() === '') {
-    return null
-  }
-  try {
-    return JSON.parse(text) as unknown
-  } catch {
-    return null
-  }
-}
-
-export class GitHubApiError extends Error {
-  readonly path: string
-  readonly stderr: string
-  readonly exitCode: number
-  /** True when the `gh` binary is not on PATH. */
-  readonly missingBinary: boolean
-
-  constructor(path: string, stderr: string, exitCode: number, missingBinary = false) {
-    super(`gh api ${path} failed (${exitCode}): ${stderr.trim()}`)
-    this.name = 'GitHubApiError'
-    this.path = path
-    this.stderr = stderr
-    this.exitCode = exitCode
-    this.missingBinary = missingBinary
-  }
-  /** `gh api` exits 1 with "HTTP 404" in stderr for a missing resource. */
-  get notFound(): boolean {
-    return /HTTP 404/.test(this.stderr)
-  }
-  get unauthenticated(): boolean {
-    return /HTTP 401|not logged into|gh auth login/i.test(this.stderr)
-  }
-}
-
-interface ExecResult {
-  stdout: string
-  stderr: string
-  code: number
-  missingBinary: boolean
-}
-
-export interface GhExecOptions {
-  binary?: string
-  /** Written to the child's stdin, for `gh api --input -`. */
-  input?: string
-}
-
-export function execGh(args: string[], opts: GhExecOptions = {}): Promise<ExecResult> {
-  return new Promise(resolve => {
-    const child = execFile(
-      opts.binary ?? 'gh',
-      args,
-      { encoding: 'utf8', maxBuffer: 64 * 1024 * 1024 },
-      (error, stdout, stderr) => {
-        const missingBinary = error !== null && 'code' in error && error.code === 'ENOENT'
-        const code = error && typeof error.code === 'number' ? error.code : error ? 1 : 0
-        resolve({ stdout, stderr, code, missingBinary })
-      }
-    )
-    if (opts.input !== undefined) {
-      child.stdin?.on('error', () => undefined)
-      child.stdin?.end(opts.input)
-    }
-  })
-}
-
-export type GhExec = typeof execGh
-
-export function createGitHubClient(exec: GhExec = execGh): GitHubClient {
-  return {
-    api: async (path, params = {}) => {
-      // `gh api` switches to POST as soon as a field is given; these are reads, so pin GET.
-      const args = ['api', '--method', 'GET', path]
-      for (const [k, v] of Object.entries(params)) {
-        args.push('-F', `${k}=${v}`)
-      }
-      const r = await exec(args)
-      if (r.code !== 0) {
-        throw new GitHubApiError(path, r.missingBinary ? 'gh: command not found' : r.stderr, r.code, r.missingBinary)
-      }
-      return JSON.parse(r.stdout) as unknown
-    },
-    apiWithHeaders: async path => {
-      const r = await exec(['api', '-i', '--method', 'GET', path])
-      if (r.code !== 0) {
-        throw new GitHubApiError(path, r.missingBinary ? 'gh: command not found' : r.stderr, r.code, r.missingBinary)
-      }
-      return parseIncludedResponse(r.stdout)
-    },
-    post: async (path, body) => {
-      // The payload goes over stdin, so no comment text ever appears in an argument list.
-      const r = await exec(['api', '--method', 'POST', path, '--input', '-'], { input: JSON.stringify(body) })
-      if (r.code !== 0) {
-        throw new GitHubApiError(path, r.missingBinary ? 'gh: command not found' : r.stderr, r.code, r.missingBinary)
-      }
-      return JSON.parse(r.stdout) as unknown
-    },
-    graphql: async (query, variables) => {
-      const args = ['api', 'graphql', '-f', `query=${query}`]
-      for (const [k, v] of Object.entries(variables)) {
-        args.push(typeof v === 'number' ? '-F' : '-f', `${k}=${v}`)
-      }
-      const r = await exec(args)
-      if (r.code !== 0) {
-        throw new GitHubApiError(
-          'graphql',
-          r.missingBinary ? 'gh: command not found' : r.stderr,
-          r.code,
-          r.missingBinary
-        )
-      }
-      const body = JSON.parse(r.stdout) as { data?: unknown; errors?: Array<{ message: string }> }
-      if (body.errors && body.errors.length > 0) {
-        throw new GitHubApiError('graphql', body.errors.map(e => e.message).join('; '), 1)
-      }
-      return body.data
-    },
-    authStatus: async () => {
-      const r = await exec(['auth', 'status'])
-      if (r.missingBinary) {
-        return { installed: false, authenticated: false, detail: 'gh is not on PATH' }
-      }
-      const detail = (r.stdout + r.stderr).trim().split('\n')[0] ?? ''
-      return { installed: true, authenticated: r.code === 0, detail }
-    },
-    authToken: async () => {
-      const r = await exec(['auth', 'token'])
-      const token = r.stdout.trim()
-      return r.code === 0 && token !== '' ? token : null
-    },
-  }
-}