@chesapeake/stack 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -6,6 +6,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.5] - 2026-08-03
+
+### Added
+
+- `lib/githubIssue`: product-neutral GitHub issue URL parsing, PR rejection,
+  snapshot normalization, and import keys
+
+## [0.1.4] - 2026-08-03
+
+### Added
+
+- UX task components: `TaskInput`, `TaskCard`, and `TaskList` with
+  application-neutral props and public subpath exports
+- UX connectivity component: `ConnectivityBadge` with tone/status presentation
+- UX runner presentation: `RunnerPairingCard` and `RunnerStatusCard` for pairing
+  command display and runner status chrome
+
 ## [0.1.3] - 2026-03-09
 
 ### Changed
@@ -65,6 +82,7 @@ and this project adheres to
 - Full dark mode support via CSS custom properties
 - Apache 2.0 license
 
+[0.1.4]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.4
 [0.1.3]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.3
 [0.1.2]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.2
 [0.1.1]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.1

package/README.md

@@ -105,6 +105,10 @@ import type {
 
 ### Available Components
 
+The UX task, connectivity, and runner components are application-neutral.
+They accept display values and callbacks; persistence, networking, runner APIs,
+and product-specific task metadata remain in the consuming application.
+
 #### UI Components (`components/ui/`)
 
 - **Button** - Various button variants and sizes

package/components/ux/connectivity/ConnectivityBadge.tsx

@@ -0,0 +1,75 @@
+import type { KeyboardEvent } from "react";
+import {
+  AlertCircle,
+  AlertTriangle,
+  Check,
+  CloudOff,
+  Loader2,
+} from "lucide-react";
+
+export type ConnectivityTone =
+  | "offline"
+  | "syncing"
+  | "online"
+  | "degraded"
+  | "conflict";
+
+export interface ConnectivityBadgeProps {
+  label: string;
+  tone: ConnectivityTone;
+  tooltip?: string;
+  onAction?: () => void;
+  actionLabel?: string;
+  locked?: boolean;
+  className?: string;
+}
+
+export function ConnectivityBadge({
+  label,
+  tone,
+  tooltip,
+  onAction,
+  actionLabel,
+  locked = false,
+  className,
+}: ConnectivityBadgeProps) {
+  const interactive = onAction != null && !locked;
+  const title = tooltip ?? label;
+  const icon =
+    tone === "syncing" ? (
+      <Loader2 className="h-4 w-4 animate-spin" />
+    ) : tone === "degraded" ? (
+      <AlertTriangle className="h-4 w-4" />
+    ) : tone === "conflict" ? (
+      <AlertCircle className="h-4 w-4" />
+    ) : tone === "online" ? (
+      <Check className="h-4 w-4" />
+    ) : (
+      <CloudOff className="h-4 w-4" />
+    );
+
+  return (
+    <div
+      role={interactive ? "button" : "status"}
+      tabIndex={interactive ? 0 : undefined}
+      aria-label={actionLabel ?? label}
+      aria-live="polite"
+      title={title}
+      className={`inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium ${tone === "online" ? "border-primary/60 text-primary bg-primary/5" : tone === "degraded" || tone === "conflict" ? "border-destructive/50 text-destructive bg-destructive/5" : "border-muted-foreground/40 text-muted-foreground bg-muted/40"} ${interactive ? "cursor-pointer" : ""} ${className ?? ""}`}
+      onClick={interactive ? onAction : undefined}
+      onKeyDown={
+        interactive
+          ? (event: KeyboardEvent) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onAction();
+              }
+            }
+          : undefined
+      }
+    >
+      {icon}
+      <span>{label}</span>
+    </div>
+  );
+}

package/components/ux/connectivity/index.ts

@@ -0,0 +1,5 @@
+export { ConnectivityBadge } from "./ConnectivityBadge.tsx";
+export type {
+  ConnectivityBadgeProps,
+  ConnectivityTone,
+} from "./ConnectivityBadge.tsx";

package/components/ux/index.ts

@@ -44,3 +44,7 @@ export type {
   ProfilePageProps,
   StandardLayoutProps,
 } from "./StandardLayout/index.ts";
+
+export * from "./task/index.ts";
+export * from "./connectivity/index.ts";
+export * from "./runner/index.ts";

package/components/ux/runner/RunnerPairingCard.tsx

@@ -0,0 +1,39 @@
+import { Copy } from "lucide-react";
+import { Button } from "../../ui/button.tsx";
+
+export interface RunnerPairingCardProps {
+  command: string;
+  code?: string;
+  expiresAt?: string;
+  onCopy: () => void;
+}
+
+export function RunnerPairingCard({
+  command,
+  code,
+  expiresAt,
+  onCopy,
+}: RunnerPairingCardProps) {
+  return (
+    <div className="bg-muted mt-4 space-y-2 rounded-md border p-3">
+      <p className="text-sm font-medium">Run this command on your device</p>
+      <div className="flex flex-wrap items-center gap-2">
+        <code className="bg-background min-w-0 flex-1 overflow-x-auto rounded border px-3 py-2 text-xs">
+          {command}
+        </code>
+        <Button type="button" size="sm" variant="outline" onClick={onCopy}>
+          <Copy className="mr-2 h-4 w-4" />
+          Copy
+        </Button>
+      </div>
+      {code && (
+        <p className="text-muted-foreground text-xs">
+          Code {code}
+          {expiresAt
+            ? ` expires ${new Date(expiresAt).toLocaleTimeString()}.`
+            : "."}
+        </p>
+      )}
+    </div>
+  );
+}

package/components/ux/runner/RunnerStatusCard.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+import { Card } from "../../ui/card.tsx";
+
+export interface RunnerStatusCardProps {
+  name: string;
+  state: string;
+  details?: string;
+  repositories?: string[];
+  children?: ReactNode;
+  jobs?: ReactNode;
+}
+
+export function RunnerStatusCard({
+  name,
+  state,
+  details,
+  repositories = [],
+  children,
+  jobs,
+}: RunnerStatusCardProps) {
+  return (
+    <Card
+      className="space-y-3 rounded-md border p-4"
+      aria-label={`${name} runner`}
+    >
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <div className="flex flex-wrap items-center gap-2">
+            <h4 className="font-medium">{name}</h4>
+            <span className="bg-muted rounded-full px-2 py-0.5 text-xs">
+              {state}
+            </span>
+          </div>
+          {details && (
+            <p className="text-muted-foreground mt-1 text-xs">{details}</p>
+          )}
+        </div>
+        <div className="flex flex-wrap gap-2">{children}</div>
+      </div>
+      <div>
+        <p className="text-sm font-medium">Repository access</p>
+        {repositories.length ? (
+          <ul className="text-muted-foreground mt-1 list-inside list-disc text-sm">
+            {repositories.map((repository) => (
+              <li key={repository}>{repository}</li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-muted-foreground mt-1 text-sm">
+            No repositories registered.
+          </p>
+        )}
+      </div>
+      {jobs}
+    </Card>
+  );
+}

package/components/ux/runner/index.ts

@@ -0,0 +1,4 @@
+export { RunnerPairingCard } from "./RunnerPairingCard.tsx";
+export type { RunnerPairingCardProps } from "./RunnerPairingCard.tsx";
+export { RunnerStatusCard } from "./RunnerStatusCard.tsx";
+export type { RunnerStatusCardProps } from "./RunnerStatusCard.tsx";

package/components/ux/task/TaskCard.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Card } from "../../ui/card.tsx";
+import { Input } from "../../ui/input.tsx";
+
+export interface TaskCardProps {
+  title: string;
+  completed: boolean;
+  onToggle: () => void;
+  onTitleChange?: (title: string) => void;
+  leading?: ReactNode;
+  content?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+  newlyAdded?: boolean;
+}
+
+export function TaskCard({
+  title,
+  completed,
+  onToggle,
+  onTitleChange,
+  leading,
+  content,
+  actions,
+  className,
+  newlyAdded = false,
+}: TaskCardProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(title);
+  const save = () => {
+    const next = draft.trim();
+    if (next && next !== title) onTitleChange?.(next);
+    setEditing(false);
+  };
+
+  return (
+    <Card
+      role="listitem"
+      className={`bg-background min-w-0 p-4 transition-all hover:shadow-md ${
+        completed ? "bg-muted/50 opacity-75" : ""
+      } ${newlyAdded ? "animate-in slide-in-from-top-2" : ""} ${className ?? ""}`}
+    >
+      <div className="flex min-w-0 items-start gap-2 md:gap-3">
+        {leading}
+        <input
+          type="checkbox"
+          checked={completed}
+          onChange={onToggle}
+          className="mt-1 h-5 w-5 shrink-0 cursor-pointer rounded text-primary focus:ring-2 focus:ring-primary"
+          aria-label={completed ? "Mark incomplete" : "Mark complete"}
+        />
+        <div className="min-w-0 flex-1 space-y-2">
+          {editing ? (
+            <Input
+              autoFocus
+              value={draft}
+              onChange={(event) => {
+                setDraft(event.target.value);
+              }}
+              onBlur={save}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") save();
+                if (event.key === "Escape") setEditing(false);
+              }}
+              aria-label="Edit task title"
+            />
+          ) : (
+            <h3
+              className={`cursor-text transition-colors hover:text-primary ${completed ? "text-muted-foreground line-through" : ""}`}
+              onClick={() => {
+                setDraft(title);
+                if (onTitleChange) setEditing(true);
+              }}
+            >
+              {title}
+            </h3>
+          )}
+          {content}
+        </div>
+        {actions}
+      </div>
+    </Card>
+  );
+}

package/components/ux/task/TaskInput.tsx

@@ -0,0 +1,65 @@
+import { useRef } from "react";
+import type { RefObject } from "react";
+import { Button } from "../../ui/button.tsx";
+
+export interface TaskInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onAdd: () => void;
+  placeholder?: string;
+  inputRef?: RefObject<HTMLInputElement | null>;
+  className?: string;
+  inputClassName?: string;
+  addButtonLabel?: string;
+  /** Optional attribute for consumer product tours / E2E hooks. */
+  inputDataTour?: string;
+}
+
+export function TaskInput({
+  value,
+  onChange,
+  onAdd,
+  placeholder = "Add a task...",
+  inputRef,
+  className,
+  inputClassName,
+  addButtonLabel = "Add task",
+  inputDataTour,
+}: TaskInputProps) {
+  const internalRef = useRef<HTMLInputElement>(null);
+  const ref = inputRef ?? internalRef;
+
+  return (
+    <div
+      className={`border-border bg-background border-b p-4 ${className ?? ""}`}
+    >
+      <div className="flex gap-2">
+        <input
+          ref={ref}
+          data-tour={inputDataTour}
+          className={`border-border bg-background text-foreground placeholder:text-muted-foreground flex-1 rounded border px-2 py-1 ${inputClassName ?? ""}`}
+          value={value}
+          onChange={(event) => {
+            onChange(event.target.value);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") onAdd();
+          }}
+          placeholder={placeholder}
+          aria-label={placeholder}
+        />
+        <Button
+          type="button"
+          variant="default"
+          size="icon"
+          onClick={onAdd}
+          aria-label={addButtonLabel}
+        >
+          <span aria-hidden="true" className="text-xl leading-none">
+            +
+          </span>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/ux/task/TaskList.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+export interface TaskListProps {
+  children: ReactNode;
+  loading?: boolean;
+  empty?: ReactNode;
+  className?: string;
+}
+
+export function TaskList({
+  children,
+  loading = false,
+  empty,
+  className,
+}: TaskListProps) {
+  const content = loading ? (
+    <div className="text-muted-foreground p-8 text-center" role="status">
+      Loading tasks...
+    </div>
+  ) : (
+    (empty ?? children)
+  );
+
+  return (
+    <div
+      className={`flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-4 ${className ?? ""}`}
+      role="list"
+    >
+      {content}
+    </div>
+  );
+}

package/components/ux/task/index.ts

@@ -0,0 +1,6 @@
+export { TaskCard } from "./TaskCard.tsx";
+export type { TaskCardProps } from "./TaskCard.tsx";
+export { TaskInput } from "./TaskInput.tsx";
+export type { TaskInputProps } from "./TaskInput.tsx";
+export { TaskList } from "./TaskList.tsx";
+export type { TaskListProps } from "./TaskList.tsx";

package/index.ts

@@ -26,4 +26,5 @@
 export * from "./components/ui/index.ts";
 export * from "./components/ux/index.ts";
 export * from "./lib/utils.ts";
+export * from "./lib/githubIssue.ts";
 export { default as tailwindPreset } from "./tailwind.preset.ts";

package/lib/githubIssue.ts

@@ -0,0 +1,186 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Product-neutral GitHub issue helpers shared by browser apps (denoise-ui, void-ui).
+ * Does not call GitHub or any product API — parse, validate, and normalize only.
+ */
+
+export interface ParsedGitHubIssueRef {
+  owner: string;
+  repo: string;
+  number: number;
+  /** Canonical https://github.com/{owner}/{repo}/issues/{number} URL. */
+  url: string;
+}
+
+export interface GitHubIssueLabel {
+  id?: number;
+  name: string;
+  color?: string;
+  description?: string | null;
+  default?: boolean;
+}
+
+/** Minimal issue snapshot suitable for local task persistence. */
+export interface GitHubIssueSnapshot {
+  number: number;
+  title: string;
+  body: string | null;
+  state: "open" | "closed";
+  html_url: string;
+  labels: GitHubIssueLabel[];
+  created_at: string;
+  updated_at: string;
+  closed_at: string | null;
+  owner: string;
+  repo: string;
+  repository: string;
+}
+
+const ISSUE_PATH =
+  /^\/([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+)\/issues\/([1-9]\d*)\/?$/;
+
+const PULL_PATH =
+  /^\/([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+)\/pull\/([1-9]\d*)\/?$/;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+/**
+ * Parse a GitHub issue URL into owner/repo/number.
+ * Rejects pull-request URLs (`/pull/N`) and non-github.com hosts.
+ */
+export function parseGitHubIssueUrl(
+  value: string
+): ParsedGitHubIssueRef | null {
+  const trimmed = value.trim();
+  if (trimmed === "") return null;
+
+  let url: URL;
+  try {
+    url = new URL(trimmed);
+  } catch {
+    return null;
+  }
+
+  if (url.protocol !== "https:" || url.hostname !== "github.com") {
+    return null;
+  }
+
+  if (PULL_PATH.test(url.pathname)) {
+    return null;
+  }
+
+  const match = ISSUE_PATH.exec(url.pathname);
+  if (!match) return null;
+
+  const owner = match[1];
+  const repo = match[2];
+  const number = Number(match[3]);
+  if (!Number.isSafeInteger(number) || number < 1) return null;
+
+  return {
+    owner,
+    repo,
+    number,
+    url: canonicalGitHubIssueUrl(owner, repo, number),
+  };
+}
+
+export function canonicalGitHubIssueUrl(
+  owner: string,
+  repo: string,
+  number: number
+): string {
+  return `https://github.com/${owner}/${repo}/issues/${String(number)}`;
+}
+
+export function githubIssueImportKey(
+  owner: string,
+  repo: string,
+  number: number
+): string {
+  return `${owner}/${repo}#${String(number)}`.toLowerCase();
+}
+
+/** True when a GitHub Issues API payload represents a pull request. */
+export function isGitHubPullRequestPayload(value: unknown): boolean {
+  if (!isRecord(value)) return false;
+  return value.pull_request != null;
+}
+
+export function isValidRepoName(value: string): boolean {
+  return /^[A-Za-z0-9_.-]+$/.test(value) && value.length > 0 && value.length <= 100;
+}
+
+export function isValidIssueNumber(value: unknown): value is number {
+  return typeof value === "number" && Number.isSafeInteger(value) && value >= 1;
+}
+
+function parseLabels(value: unknown): GitHubIssueLabel[] {
+  if (!Array.isArray(value)) return [];
+  const labels: GitHubIssueLabel[] = [];
+  for (const item of value) {
+    if (!isRecord(item) || typeof item.name !== "string") continue;
+    labels.push({
+      ...(typeof item.id === "number" ? { id: item.id } : {}),
+      name: item.name,
+      ...(typeof item.color === "string" ? { color: item.color } : {}),
+      ...(item.description === null || typeof item.description === "string"
+        ? { description: item.description }
+        : {}),
+      ...(typeof item.default === "boolean" ? { default: item.default } : {}),
+    });
+  }
+  return labels;
+}
+
+/**
+ * Normalize a GitHub Issues API payload (or a Void API response) into a
+ * snapshot. Returns null for pull requests or malformed payloads.
+ */
+export function normalizeGitHubIssue(
+  value: unknown,
+  owner: string,
+  repo: string
+): GitHubIssueSnapshot | null {
+  if (!isRecord(value)) return null;
+  if (isGitHubPullRequestPayload(value)) return null;
+
+  if (
+    typeof value.number !== "number" ||
+    !isValidIssueNumber(value.number) ||
+    typeof value.title !== "string" ||
+    (value.state !== "open" && value.state !== "closed") ||
+    typeof value.html_url !== "string" ||
+    value.html_url.trim() === "" ||
+    typeof value.created_at !== "string" ||
+    typeof value.updated_at !== "string"
+  ) {
+    return null;
+  }
+
+  const body =
+    value.body === null || typeof value.body === "string" ? value.body : null;
+  const closedAt =
+    value.closed_at === null || typeof value.closed_at === "string"
+      ? value.closed_at
+      : null;
+
+  return {
+    number: value.number,
+    title: value.title,
+    body,
+    state: value.state,
+    html_url: value.html_url,
+    labels: parseLabels(value.labels),
+    created_at: value.created_at,
+    updated_at: value.updated_at,
+    closed_at: closedAt,
+    owner,
+    repo,
+    repository: `${owner}/${repo}`,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chesapeake/stack",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A simple, reusable React component library and design system built on shadcn/ui with Tailwind CSS",
   "type": "module",
   "packageManager": "npm@10.2.0",
@@ -107,6 +107,15 @@
     "./components/ux/auth/google/AuthProvider": "./components/ux/auth/google/AuthProvider.tsx",
     "./components/ux/auth/google/AuthCallback": "./components/ux/auth/google/AuthCallback.tsx",
     "./components/ux/auth/google/types": "./components/ux/auth/google/types.ts",
+    "./components/ux/task": "./components/ux/task/index.ts",
+    "./components/ux/task/TaskInput": "./components/ux/task/TaskInput.tsx",
+    "./components/ux/task/TaskCard": "./components/ux/task/TaskCard.tsx",
+    "./components/ux/task/TaskList": "./components/ux/task/TaskList.tsx",
+    "./components/ux/connectivity": "./components/ux/connectivity/index.ts",
+    "./components/ux/connectivity/ConnectivityBadge": "./components/ux/connectivity/ConnectivityBadge.tsx",
+    "./components/ux/runner": "./components/ux/runner/index.ts",
+    "./components/ux/runner/RunnerPairingCard": "./components/ux/runner/RunnerPairingCard.tsx",
+    "./components/ux/runner/RunnerStatusCard": "./components/ux/runner/RunnerStatusCard.tsx",
     "./components/ux/auth/github": "./components/ux/auth/github/index.ts",
     "./components/ux/auth/github/client": "./components/ux/auth/github/client.ts",
     "./components/ux/auth/github/default-client": "./components/ux/auth/github/default-client.ts",
@@ -114,6 +123,7 @@
     "./components/ux/auth/github/AuthCallback": "./components/ux/auth/github/AuthCallback.tsx",
     "./components/ux/auth/github/types": "./components/ux/auth/github/types.ts",
     "./lib/utils": "./lib/utils.ts",
+    "./lib/githubIssue": "./lib/githubIssue.ts",
     "./types/user": "./types/user.ts",
     "./styles": "./styles/index.css",
     "./tailwind.preset": "./tailwind.preset.ts",