kennel 0.2.3 → 0.2.6

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

@@ -1,494 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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}
-    />
-  )
-}