kennel 0.2.0 → 0.2.2

package/kernel/plugins/tasks/src/ui/todo-item.tsx

@@ -0,0 +1,494 @@
+import {
+  CircleDot,
+  CirclePause,
+  ExternalLink,
+  FileText,
+  GitBranch,
+  GitCommitHorizontal,
+  GitPullRequest,
+  Link2,
+  MessageSquare,
+} from "lucide-react"
+
+import { Badge } from "@raggle-ai/ui/components/badge"
+import { Button } from "@raggle-ai/ui/components/button"
+import { CopyContextButton } from "@raggle-ai/ui/components/copy-context"
+import {
+  NoteCard,
+  noteReferenceContext,
+} from "@raggle-ai/ui/components/note-card"
+
+import type {
+  TodoItemData,
+  TodoItemLink,
+  TodoItemRelation,
+  TodoItemStatus,
+  TodoItemStep,
+} from "../data/todo-model.js"
+
+export type TodoItemProps = {
+  item: TodoItemData
+  canToggle?: boolean
+  onToggle: (id: string) => void
+  /**
+   * Host document-route builder for local note references; when absent
+   * (or for hosts that do not serve documents) note chips render as labels.
+   */
+  documentHref?: (folder: string, relativePath: string) => string | undefined
+}
+
+const priorityTone: Record<TodoItemData["priority"], string> = {
+  1: "border-red-300 bg-red-100 text-red-800",
+  2: "border-orange-300 bg-orange-100 text-orange-800",
+  3: "border-amber-300 bg-amber-100 text-amber-800",
+  4: "border-sky-300 bg-sky-100 text-sky-800",
+  5: "border-slate-300 bg-slate-100 text-slate-700",
+}
+
+const statusLabel: Record<TodoItemStatus, string> = {
+  open: "Open",
+  blocked: "Blocked",
+  done: "Done",
+}
+
+const statusTone: Record<TodoItemStatus, string> = {
+  open: "border-blue-200 bg-blue-50 text-blue-700",
+  blocked: "border-violet-200 bg-violet-50 text-violet-700",
+  done: "border-emerald-200 bg-emerald-50 text-emerald-700",
+}
+
+export function TodoItem({
+  item,
+  canToggle = true,
+  onToggle,
+  documentHref,
+}: TodoItemProps) {
+  const isDone = item.status === "done"
+  const isBlocked = item.status === "blocked"
+  const isOverdue = Boolean(item.overdue && !isDone)
+  // A description that is only check lines becomes a checklist instead of
+  // prose; with explicit steps it stays intro text beside the Steps section.
+  const descSteps =
+    item.description && !item.steps?.length
+      ? parseDescription(item.description)
+      : null
+  const plainDescription =
+    item.description && descSteps?.kind !== "steps"
+      ? item.description
+      : undefined
+  const dueDate = item.dueDate ? new Date(`${item.dueDate}T12:00:00`) : null
+  const dueText =
+    dueDate && !Number.isNaN(dueDate.valueOf())
+      ? new Intl.DateTimeFormat(undefined, {
+          day: "numeric",
+          month: "short",
+        }).format(dueDate)
+      : item.dueDate
+  const contextText = todoItemContext(item, dueText)
+
+  return (
+    <article
+      className="min-w-0 overflow-hidden rounded-lg border border-slate-200
+        bg-white shadow-sm"
+    >
+      <header
+        className={[
+          "border-b px-4 py-4 sm:px-5",
+          isOverdue
+            ? "border-red-200 bg-red-50/80"
+            : isBlocked
+              ? "border-violet-200 bg-violet-50/60"
+              : "border-slate-100 bg-slate-50/70",
+        ].join(" ")}
+      >
+        <div
+          className="flex min-w-0 flex-wrap items-start justify-between gap-3
+            sm:flex-nowrap"
+        >
+          <div className="min-w-0">
+            {item.key ? (
+              <p className="m-0 pb-1 font-mono text-xs text-slate-500">
+                {item.key}
+              </p>
+            ) : null}
+            <h2
+              className={[
+                "m-0 text-lg leading-tight font-semibold text-slate-950",
+                isDone ? "text-slate-400 line-through" : "",
+              ].join(" ")}
+            >
+              {item.title}
+            </h2>
+            {plainDescription ? (
+              <p
+                className="mt-1.5 mb-0 max-w-3xl text-sm leading-6
+                  whitespace-pre-wrap text-slate-600"
+              >
+                {plainDescription}
+              </p>
+            ) : null}
+          </div>
+          <div className="flex shrink-0 items-center gap-1.5">
+            <Button
+              type="button"
+              className={
+                isDone
+                  ? ""
+                  : `border-emerald-500 bg-emerald-500 text-white
+                    hover:bg-emerald-600`
+              }
+              size="sm"
+              variant={isDone ? "outline" : "default"}
+              disabled={!canToggle}
+              onClick={() => onToggle(item.id)}
+            >
+              {isBlocked ? <CirclePause className="h-3.5 w-3.5" /> : "✓"}
+              {isDone ? "Reopen" : isBlocked ? "Complete anyway" : "Complete"}
+            </Button>
+            <CopyContextButton
+              className="text-slate-500 hover:text-slate-900"
+              context={contextText}
+              label={`Copy full context for ${item.title}`}
+            />
+          </div>
+        </div>
+        <div className="mt-3 flex flex-wrap items-center gap-1.5 text-xs">
+          {item.type ? (
+            <Badge variant="secondary" className="font-normal capitalize">
+              {item.type}
+            </Badge>
+          ) : null}
+          <Badge variant="outline" className={priorityTone[item.priority]}>
+            P{item.priority}
+          </Badge>
+          {dueText ? (
+            <Badge
+              variant="outline"
+              className={[
+                isOverdue
+                  ? "border-red-300 bg-red-100 font-medium text-red-800"
+                  : "border-amber-200 bg-amber-50 text-amber-700",
+              ].join(" ")}
+            >
+              Due {dueText}
+            </Badge>
+          ) : null}
+          {item.source ? (
+            <span className="text-slate-400" title={`${item.source}/todo.json`}>
+              {item.source.split("/").pop()}
+            </span>
+          ) : null}
+          {item.tags.map((tag) => (
+            <Badge
+              key={tag}
+              variant="outline"
+              className="border-indigo-100 bg-indigo-50 text-indigo-700"
+            >
+              #{tag}
+            </Badge>
+          ))}
+        </div>
+      </header>
+      {item.links?.length ? (
+        <div
+          className="flex flex-wrap items-center gap-1.5 border-b
+            border-slate-100 px-4 py-2.5 sm:px-5"
+        >
+          {item.links.map((link) => (
+            <a
+              key={link.id}
+              className="inline-flex items-center gap-1.5 rounded-md border
+                border-slate-200 bg-white px-2 py-1 text-xs text-slate-600
+                no-underline transition-colors hover:bg-slate-50
+                hover:text-slate-900"
+              href={link.url}
+              rel="noreferrer"
+              target="_blank"
+              title={linkLabel(link)}
+            >
+              <TodoLinkIcon link={link} />
+              {link.title ?? link.repository ?? linkLabel(link)}
+            </a>
+          ))}
+        </div>
+      ) : null}
+      <div className="grid grid-cols-1 divide-y divide-slate-100">
+        {item.acceptanceCriteria?.length ? (
+          <TodoChecklist
+            label="Acceptance criteria"
+            steps={item.acceptanceCriteria}
+          />
+        ) : null}
+        {item.steps?.length ? (
+          <TodoChecklist label="Steps" steps={item.steps} />
+        ) : null}
+        {descSteps?.kind === "steps" ? (
+          <TodoChecklist
+            label={descSteps.intro ?? "Steps"}
+            steps={descSteps.steps}
+          />
+        ) : null}
+        {item.relations?.length ? (
+          <TodoRelations relations={item.relations} />
+        ) : null}
+        {item.notes?.length ? (
+          <TodoNotes
+            notes={item.notes}
+            source={item.source}
+            documentHref={documentHref}
+          />
+        ) : null}
+      </div>
+    </article>
+  )
+}
+
+type DescriptionView =
+  | { readonly kind: "plain"; readonly text: string }
+  | {
+      readonly kind: "steps"
+      readonly intro?: string
+      readonly steps: ReadonlyArray<TodoItemStep>
+    }
+
+const stepPattern = /^[-*]\s+\[(x|X| )\]\s+(.+)$/
+
+const parseDescription = (description: string): DescriptionView => {
+  const lines = description
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean)
+  const steps = lines
+    .map((line, index) => {
+      const match = stepPattern.exec(line)
+      const marker = match?.[1]
+      const text = match?.[2]
+      return marker && text
+        ? {
+            id: `description-step-${index}`,
+            done: marker.toLowerCase() === "x",
+            text,
+          }
+        : null
+    })
+    .filter((step): step is TodoItemStep => step != null)
+
+  if (steps.length === 0) {
+    return { kind: "plain", text: description }
+  }
+
+  const intro = lines.find((line) => !stepPattern.test(line)) ?? "Steps"
+  return { kind: "steps", intro: intro.replace(/:$/, ""), steps }
+}
+
+function TodoChecklist({
+  label,
+  steps,
+}: {
+  label: string
+  steps: ReadonlyArray<TodoItemStep>
+}) {
+  const doneCount = steps.filter((step) => step.done).length
+  return (
+    <section className="px-4 py-3 sm:px-5">
+      <div className="mb-2 flex items-baseline gap-2">
+        <span
+          className="text-xs font-semibold tracking-wide text-slate-500
+            uppercase"
+        >
+          {label}
+        </span>
+        <span className="text-xs text-slate-400">
+          {doneCount} of {steps.length}
+        </span>
+      </div>
+      <ul className="m-0 list-none grid-cols-1 space-y-1.5 pl-0">
+        {steps.map((step) => (
+          <li
+            key={step.id}
+            className="grid grid-cols-[1.25rem_minmax(0,1fr)] items-start gap-2
+              text-sm text-slate-600"
+          >
+            <span
+              className={[
+                "mt-0.5 grid h-4 w-4 place-items-center rounded-full border",
+                step.done
+                  ? "border-emerald-500 bg-emerald-500 text-[10px] text-white"
+                  : "border-slate-300 bg-white text-transparent",
+              ].join(" ")}
+              aria-hidden="true"
+            >
+              ✓
+            </span>
+            <span className={step.done ? "text-slate-400 line-through" : ""}>
+              {step.text}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+function TodoRelations({
+  relations,
+}: {
+  relations: ReadonlyArray<TodoItemRelation>
+}) {
+  return (
+    <section className="px-4 py-3 sm:px-5">
+      <span
+        className="text-xs font-semibold tracking-wide text-slate-500 uppercase"
+      >
+        Related tasks
+      </span>
+      <div className="mt-2 flex flex-wrap gap-1.5">
+        {relations.map((relation, index) => (
+          <Badge
+            key={`${relation.type}-${relation.targetTaskId}-${index}`}
+            className="max-w-full gap-1 font-normal outline-none"
+            variant="outline"
+          >
+            {relation.type}
+            <span className="font-mono text-[11px] text-slate-700">
+              {relation.targetTaskId}
+            </span>
+            {relation.description ? (
+              <span className="truncate text-slate-400">
+                — {relation.description}
+              </span>
+            ) : null}
+          </Badge>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function TodoNotes({
+  notes,
+  source,
+  documentHref,
+}: {
+  notes: ReadonlyArray<string>
+  source: string
+  documentHref?: (folder: string, relativePath: string) => string | undefined
+}) {
+  return (
+    <section className="px-4 py-3 sm:px-5">
+      <span
+        className="text-xs font-semibold tracking-wide text-slate-500 uppercase"
+      >
+        Notes
+      </span>
+      <div className="mt-2 grid gap-1.5">
+        {notes.map((note) => {
+          const isUrl = /^https?:\/\//i.test(note)
+          const reference = isUrl ? note : (note.split("#", 1)[0] ?? "").trim()
+          const href = isUrl
+            ? note
+            : reference && documentHref
+              ? documentHref(source, reference)
+              : undefined
+          return (
+            <NoteCard
+              key={note}
+              context={() => noteReferenceContext(note, source)}
+              href={href}
+              path={isUrl ? undefined : note}
+              title={isUrl ? note.replace(/^https?:\/\//, "") : note}
+            />
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+function TodoLinkIcon({ link }: { link: TodoItemLink }) {
+  if (link.provider === "github" && link.kind === "pull_request")
+    return <GitPullRequest className="h-3.5 w-3.5" />
+  if (link.provider === "github" && link.kind === "commit")
+    return <GitCommitHorizontal className="h-3.5 w-3.5" />
+  if (link.provider === "github" && link.kind === "issue")
+    return <CircleDot className="h-3.5 w-3.5" />
+  if (link.provider === "github") return <GitBranch className="h-3.5 w-3.5" />
+  if (link.kind === "document" || link.kind === "design")
+    return <FileText className="h-3.5 w-3.5" />
+  if (link.kind === "discussion")
+    return <MessageSquare className="h-3.5 w-3.5" />
+  if (link.provider === "web") return <ExternalLink className="h-3.5 w-3.5" />
+  return <Link2 className="h-3.5 w-3.5" />
+}
+
+const linkLabel = (link: TodoItemLink) => {
+  const provider = link.provider === "web" ? "external" : link.provider
+  const title = link.title ?? link.repository ?? link.url
+  return `${provider} ${link.kind.replace(/_/g, " ")}: ${title}`
+}
+
+export const todoItemContext = (item: TodoItemData, dueText?: string) =>
+  [
+    "You are helping complete a todo item. Use the context below to identify the next concrete action, gather or update any required evidence, and produce a concise fix plan.",
+    "",
+    "Instructions for the LLM:",
+    "- Treat the todo title as the objective.",
+    "- Use the description and steps as the authoritative task context.",
+    "- Do not mark the task complete unless every unfinished step is resolved.",
+    "- If information is missing, state the exact missing input or file needed.",
+    "- Return: 1) current status, 2) next action, 3) commands/files to inspect or update, 4) completion criteria.",
+    "",
+    "Todo context:",
+    item.key ? `- Key: ${item.key}` : null,
+    `- Title: ${item.title}`,
+    item.type ? `- Type: ${item.type}` : null,
+    item.description ? `- Description: ${item.description}` : null,
+    `- Status: ${statusLabel[item.status]}`,
+    `- Priority: P${item.priority}`,
+    dueText ? `- Due: ${dueText}` : null,
+    `- Source JSON: ${item.source}`,
+    item.acceptanceCriteria?.length ? "" : null,
+    item.acceptanceCriteria?.length ? "Acceptance criteria:" : null,
+    item.acceptanceCriteria?.length
+      ? item.acceptanceCriteria
+          .map(
+            (criterion) =>
+              `- [${criterion.done ? "x" : " "}] ${criterion.text}`,
+          )
+          .join("\n")
+      : null,
+    item.steps?.length ? "" : null,
+    item.steps?.length ? "Steps:" : null,
+    item.steps?.length
+      ? item.steps
+          .map((step) => `- [${step.done ? "x" : " "}] ${step.text}`)
+          .join("\n")
+      : null,
+    item.relations?.length ? "" : null,
+    item.relations?.length ? "Task relations:" : null,
+    item.relations?.length
+      ? item.relations
+          .map(
+            (relation) =>
+              `- ${relation.type}: ${relation.targetTaskId}${relation.description ? ` - ${relation.description}` : ""}`,
+          )
+          .join("\n")
+      : null,
+    item.links?.length ? "" : null,
+    item.links?.length ? "External links:" : null,
+    item.links?.length
+      ? item.links
+          .map(
+            (link) =>
+              `- ${link.provider}/${link.kind}/${link.relation}: ${link.title ?? link.repository ?? link.id} (${link.url})`,
+          )
+          .join("\n")
+      : null,
+    item.notes?.length ? "" : null,
+    item.notes?.length ? "Accompanying notes and file references:" : null,
+    item.notes?.length
+      ? item.notes.map((note) => `- ${note}`).join("\n")
+      : null,
+  ]
+    .filter((line): line is string => line != null)
+    .join("\n")

package/kernel/plugins/tasks/src/ui/todo-status-filter.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from "react"
+
+import { FilterSelect } from "@raggle-ai/ui/components/filter-select"
+
+import type { TodoDataset, TodoFilter } from "../data/todo-model.js"
+import { todoItems } from "../data/todo-model.js"
+
+const options: ReadonlyArray<{
+  readonly label: string
+  readonly value: TodoFilter
+}> = [
+  { value: "all", label: "All" },
+  { value: "open", label: "Open" },
+  { value: "done", label: "Done" },
+  { value: "blocked", label: "Blocked" },
+  { value: "overdue", label: "Late" },
+]
+
+export type TodoStatusFilterProps = {
+  readonly dataset: TodoDataset | null
+  readonly value: TodoFilter
+  readonly onChange: (value: TodoFilter) => void
+  readonly className?: string
+}
+
+/** Status filter dropdown: all/open/done/blocked/late with task counts.
+ * The trigger shows the active value, so no label sits beside it. */
+export function TodoStatusFilter({
+  dataset,
+  value,
+  onChange,
+  className = "",
+}: TodoStatusFilterProps) {
+  const items = useMemo(() => todoItems(dataset), [dataset])
+  const counts = useMemo(
+    () => ({
+      all: items.length,
+      open: items.filter((item) => item.status === "open").length,
+      done: items.filter((item) => item.status === "done").length,
+      blocked: items.filter((item) => item.status === "blocked").length,
+      overdue: items.filter((item) => item.overdue && item.status !== "done")
+        .length,
+    }),
+    [items],
+  )
+
+  return (
+    <FilterSelect
+      ariaLabel="Filter tasks by status"
+      className={className}
+      onChange={(next) => onChange(next as TodoFilter)}
+      options={options.map((option) => ({
+        ...option,
+        count: counts[option.value],
+      }))}
+      triggerClassName="w-28"
+      value={value}
+    />
+  )
+}

package/kernel/plugins/tasks/src/ui/todo-tag-filter.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from "react"
+
+import { FilterChipPanel } from "@raggle-ai/ui/components/filter-chip-panel"
+
+import type { TodoDataset, TodoFilterSelection } from "../data/todo-model.js"
+import { todoItems } from "../data/todo-model.js"
+
+export type TodoTagFilterProps = {
+  readonly dataset: TodoDataset | null
+  /** Selected tags; empty shows tasks with any tags. */
+  readonly value: TodoFilterSelection
+  readonly onChange: (value: TodoFilterSelection) => void
+  readonly className?: string
+}
+
+/** Tag filter: expand/collapse chip panel, one chip per tag, with counts. */
+export function TodoTagFilter({
+  dataset,
+  value: selectedTags,
+  onChange,
+  className = "",
+}: TodoTagFilterProps) {
+  const tags = useMemo(() => {
+    const items = todoItems(dataset)
+    return [...new Set(items.flatMap((item) => item.tags).filter(Boolean))]
+      .sort((a, b) => a.localeCompare(b))
+      .map((tag) => ({
+        tag,
+        count: items.filter((item) => item.tags.includes(tag)).length,
+      }))
+  }, [dataset])
+  if (!tags.length) return null
+
+  return (
+    <FilterChipPanel
+      ariaLabel="Filter tasks by tag"
+      className={className}
+      label="Tag"
+      onChange={onChange}
+      options={tags.map((entry) => ({
+        value: entry.tag,
+        label: entry.tag,
+        count: entry.count,
+      }))}
+      selected={selectedTags}
+    />
+  )
+}