kennel 0.2.2 → 0.2.5

package/kernel/plugins/tasks/src/ui/compact-todo-list.tsx

@@ -1,372 +0,0 @@
-import type { ReactNode } from "react"
-import { useCallback, useEffect, useMemo, useState } from "react"
-import { Effect } from "effect"
-import { Check, ChevronRight } from "lucide-react"
-
-import { CopyContextButton } from "@raggle-ai/ui/components/copy-context"
-
-import type {
-  JsonTodo,
-  TodoDataset,
-  TodoDatasetOptions,
-  TodoFilter,
-  TodoFilterSelection,
-  TodoState,
-  UiTodoItem,
-} from "../data/todo-model.js"
-import { qualifiedTaskId } from "../data/task-id.js"
-import {
-  fetchTodoDataset,
-  initialState,
-  visibleTodos,
-} from "../data/todo-model.js"
-import { TodoFilterBar } from "./todo-filter-bar.js"
-import { todoItemContext } from "./todo-item.js"
-
-export type CompactTodoListProps = TodoDatasetOptions & {
-  readonly dataset?: TodoDataset | null
-  readonly className?: string
-  /** When set, each task title links to this href (a task detail view). */
-  readonly itemHref?: (item: UiTodoItem) => string | undefined
-  /** When set, rows get a complete/reopen tick button. */
-  readonly onToggle?: (item: UiTodoItem) => void
-  /** When set, the status/tag/agent filter line is shown. */
-  readonly filters?: boolean
-  /** Filter controls rendered in front of the filter line (e.g. folder
-   * chips), so all filter areas share one horizontal row. */
-  readonly leadingFilters?: ReactNode
-  /** Controls rendered at the right end of the filter line (e.g. the
-   * warnings modal trigger). */
-  readonly trailingFilters?: ReactNode
-}
-
-export function CompactTodoList({
-  dataset = null,
-  className = "",
-  filters = false,
-  leadingFilters,
-  trailingFilters,
-  itemHref,
-  onToggle,
-  ...options
-}: CompactTodoListProps) {
-  const [filter, setFilter] = useState<TodoFilter>(initialState.filter)
-  const [tag, setTag] = useState<TodoFilterSelection>([])
-  const [assignee, setAssignee] = useState<TodoFilterSelection>([])
-  // URL-driven usage (no `dataset` prop) fetches the dataset itself.
-  const [fetched, setFetched] = useState<TodoDataset | null>(null)
-  const [error, setError] = useState<string | null>(null)
-
-  const activeDataset = dataset ?? fetched
-
-  // Fetch only when a dataset is not provided by the caller. State updates
-  // happen inside the promise callback, never synchronously in the effect.
-  useEffect(() => {
-    if (dataset) return
-    let cancelled = false
-    void Effect.runPromise(
-      Effect.either(
-        fetchTodoDataset({
-          dataUrl: options.dataUrl,
-          path: options.path,
-          schemaUrl: options.schemaUrl,
-        }),
-      ),
-    ).then((result) => {
-      if (cancelled) return
-      if (result._tag === "Left") {
-        setError(result.left.message)
-      } else {
-        setError(null)
-        setFetched(result.right)
-      }
-    })
-    return () => {
-      cancelled = true
-    }
-  }, [dataset, options.dataUrl, options.path, options.schemaUrl])
-
-  const todos = useMemo(() => {
-    const state: TodoState = {
-      ...initialState,
-      dataset: activeDataset,
-      filter,
-      tag,
-      assignee,
-    }
-    return Effect.runSync(visibleTodos(state))
-  }, [activeDataset, filter, tag, assignee])
-  const loading = !activeDataset && !error
-
-  return (
-    <main
-      className={["min-h-full bg-transparent text-slate-950", className]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      <section className="mx-auto w-full max-w-3xl px-3 py-4 sm:px-5 sm:py-5">
-        {error ? (
-          <p
-            className="mb-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2
-              text-sm text-red-700"
-          >
-            {error}
-          </p>
-        ) : null}
-
-        {filters ? (
-          <TodoFilterBar
-            assignee={assignee}
-            className="mb-3"
-            dataset={activeDataset}
-            filter={filter}
-            leading={leadingFilters}
-            trailing={trailingFilters}
-            onAssigneeChange={setAssignee}
-            onFilterChange={setFilter}
-            onTagChange={setTag}
-            tag={tag}
-          />
-        ) : null}
-
-        {loading ? (
-          <p className="py-8 text-center text-sm text-slate-500">
-            Loading tasks…
-          </p>
-        ) : todos.length === 0 ? (
-          <p className="py-8 text-center text-sm text-slate-500">
-            {emptyFilterText(filter, tag)}
-          </p>
-        ) : (
-          <ol className="space-y-2">
-            {todos.map((item) => (
-              <CompactTodoRow
-                // Row identity uses the workspace-qualified address, not the
-                // bare file-local id: merged nested task files repeat ids
-                // like "todo:0" across folders.
-                key={
-                  qualifiedTaskId(item.jsonTodo.source?.id, item.jsonTodo) ??
-                  item.id
-                }
-                item={item}
-                folderPath={options.path}
-                itemHref={itemHref}
-                onToggle={onToggle}
-              />
-            ))}
-          </ol>
-        )}
-      </section>
-    </main>
-  )
-}
-
-function CompactTodoRow({
-  item,
-  folderPath,
-  itemHref,
-  onToggle,
-}: {
-  item: UiTodoItem
-  folderPath?: string
-  itemHref?: (item: UiTodoItem) => string | undefined
-  onToggle?: (item: UiTodoItem) => void
-}) {
-  const meta = compactMeta(item)
-  const href = itemHref?.(item)
-  // Build the prompt on click (wait function), not on render.
-  const context = useCallback(
-    () => compactTodoPrompt(item, folderPath),
-    [item, folderPath],
-  )
-
-  return (
-    <li
-      // One border/background style per row: Tailwind sorts same-property
-      // classes alphabetically, so stacked classes override each other.
-      className={[
-        "rounded-md border px-3 py-2",
-        item.overdue
-          ? "border-red-400 bg-red-50"
-          : item.status === "blocked"
-            ? "border-rose-300 bg-rose-50/60"
-            : "border-slate-200 bg-white",
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      <div className="flex items-start gap-3">
-        {onToggle ? (
-          <button
-            type="button"
-            aria-pressed={item.status === "done"}
-            aria-label={
-              item.status === "done"
-                ? `Reopen ${item.title}`
-                : `Complete ${item.title}`
-            }
-            title={item.status === "done" ? "Reopen task" : "Complete task"}
-            onClick={() => onToggle(item)}
-            className={[
-              "mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full",
-              "border transition-colors",
-              item.status === "done"
-                ? "border-emerald-500 bg-emerald-500 text-white hover:bg-emerald-600"
-                : item.status === "blocked"
-                  ? "border-rose-300 bg-rose-100 text-rose-600"
-                  : "border-slate-300 bg-white text-transparent hover:border-emerald-500 hover:bg-emerald-50 hover:text-emerald-600",
-            ].join(" ")}
-          >
-            <Check className="h-3 w-3" />
-          </button>
-        ) : null}
-        <div className="min-w-0 flex-1 space-y-1">
-          {href ? (
-            <a
-              href={href}
-              className={[
-                "inline-flex items-center gap-1 text-sm leading-5 font-medium",
-                "text-slate-900 no-underline hover:text-indigo-700",
-                item.status === "done" ? "text-slate-500 line-through" : "",
-              ]
-                .filter(Boolean)
-                .join(" ")}
-            >
-              <span>{item.title}</span>
-              <ChevronRight
-                aria-hidden="true"
-                className="h-3.5 w-3.5 text-slate-400"
-              />
-            </a>
-          ) : (
-            <p
-              className={[
-                "text-sm leading-5 font-medium text-slate-900",
-                item.status === "done" ? "text-slate-500 line-through" : "",
-              ].join(" ")}
-            >
-              {item.title}
-            </p>
-          )}
-          {meta.status || meta.folder ? (
-            <p className="text-xs leading-4 text-slate-500">
-              {meta.status ? (
-                <span
-                  className={item.overdue ? "font-medium text-red-600" : ""}
-                >
-                  {meta.status}
-                </span>
-              ) : null}
-              {meta.folder ? (
-                <span>
-                  {meta.status ? " • " : ""}
-                  {meta.folder}
-                </span>
-              ) : null}
-            </p>
-          ) : null}
-        </div>
-        <CopyContextButton
-          className="shrink-0 text-slate-500 hover:text-slate-900"
-          context={context}
-          label={`Copy prompt for ${item.title}`}
-        />
-      </div>
-    </li>
-  )
-}
-
-const emptyFilterText = (filter: TodoFilter, tag: TodoFilterSelection) => {
-  const status =
-    filter === "done"
-      ? "done"
-      : filter === "blocked"
-        ? "blocked"
-        : filter === "overdue"
-          ? "late"
-          : filter === "all"
-            ? ""
-            : "open"
-  if (tag.length)
-    return `No ${status ? `${status} ` : ""}tasks with the selected tags`
-  switch (filter) {
-    case "done":
-      return "No done tasks"
-    case "blocked":
-      return "No blocked tasks"
-    case "overdue":
-      return "No late tasks"
-    case "all":
-      return "No tasks"
-    default:
-      return "No open tasks"
-  }
-}
-
-/** Row meta: the status label, then the folder the task file lives in. */
-const compactMeta = (item: UiTodoItem) => ({
-  status:
-    item.status === "blocked"
-      ? "Blocked"
-      : item.overdue
-        ? "Late"
-        : item.status === "done"
-          ? "Done"
-          : "",
-  folder: item.jsonTodo.source.title.replace(/ tasks$/, ""),
-})
-
-const compactTodoPrompt = (item: UiTodoItem, folderPath?: string) => {
-  const todoJsonPath = folderPath ? `${folderPath}/todo.json` : "todo.json"
-  const relatedFiles = relatedReadFiles(item.jsonTodo)
-
-  return [
-    `The model is instructed to complete this specific todo: ${item.title}`,
-    "",
-    todoItemContext(item),
-    "",
-    `Todo JSON: ${todoJsonPath}`,
-    relatedFiles.length ? "Read these relative files before you start:" : null,
-    relatedFiles.length
-      ? relatedFiles.map((path) => `- ${path}`).join("\n")
-      : null,
-  ]
-    .filter((line): line is string => Boolean(line))
-    .join("\n")
-}
-
-const relatedReadFiles = (todo: JsonTodo) =>
-  unique(relativePathsFromCustomFields(todo.customFields))
-
-const relativePathsFromCustomFields = (
-  fields: ReadonlyArray<{ id: string; value: unknown }>,
-) =>
-  fields.flatMap((field) =>
-    fileFieldName(field.id) ? relativePathsFromValue(field.value) : [],
-  )
-
-const fileFieldName = (value: string) =>
-  /(file|path|read|context|source|doc)/i.test(value)
-
-const relativePathsFromValue = (value: unknown): string[] => {
-  if (typeof value === "string") {
-    return isRelativeFilePath(value) ? [value] : []
-  }
-  if (Array.isArray(value)) {
-    return value.flatMap((entry) => relativePathsFromValue(entry))
-  }
-  if (value && typeof value === "object") {
-    return Object.entries(value).flatMap(([key, entry]) =>
-      fileFieldName(key) ? relativePathsFromValue(entry) : [],
-    )
-  }
-  return []
-}
-
-const isRelativeFilePath = (value: string) =>
-  Boolean(value) &&
-  !value.startsWith("/") &&
-  !/^[a-z]+:\/\//i.test(value) &&
-  /[./\\]/.test(value)
-
-const unique = (values: ReadonlyArray<string>) => [...new Set(values)]

package/kernel/plugins/tasks/src/ui/error-details.tsx

@@ -1,78 +0,0 @@
-import type { ReactNode } from "react"
-import { useState } from "react"
-import { ChevronDown } from "lucide-react"
-
-import type { CopyContextSource } from "@raggle-ai/ui/components/copy-context"
-import { Button } from "@raggle-ai/ui/components/button"
-import { CopyContextButton } from "@raggle-ai/ui/components/copy-context"
-
-export type ErrorDetailsProps = {
-  /** Short heading, e.g. "Task data is not valid." */
-  title: string
-  /** Full error text. Collapsed to a short preview by default. */
-  error: string
-  /** What "Copy context" writes; defaults to the error text. */
-  context?: CopyContextSource
-  /** Accessible name and tooltip for the copy button. */
-  copyLabel?: string
-  /** Optional extra action next to copy, e.g. a Retry button. */
-  action?: ReactNode
-}
-
-/**
- * Collapsible red error panel for the tasks viewer. Long schema and
- * validation dumps take one small collapsed row by default; the full text,
- * plus a copy-context button for pasting the failure back to an agent, is
- * one click away.
- */
-export function ErrorDetails({
-  title,
-  error,
-  context,
-  copyLabel = "Copy error context",
-  action,
-}: ErrorDetailsProps): ReactNode {
-  const [expanded, setExpanded] = useState(false)
-  const isLong = error.length > 200 || error.includes("\n")
-
-  return (
-    <div className="rounded-md border border-[#9c3a3a]/40 p-4">
-      <div className="flex items-start justify-between gap-2">
-        <p className="m-0 text-sm font-semibold text-[#9c3a3a]">{title}</p>
-        <div className="flex shrink-0 items-center gap-1">
-          {action}
-          <CopyContextButton
-            className="text-[#9c3a3a] hover:text-[#6f2020]"
-            context={context ?? error}
-            label={copyLabel}
-          />
-        </div>
-      </div>
-      <p
-        className={`m-0 mt-1 text-[13px] text-[#9c3a3a] ${
-          expanded || !isLong
-            ? "break-words whitespace-pre-wrap"
-            : "line-clamp-2"
-          }`}
-      >
-        {error}
-      </p>
-      {isLong ? (
-        <Button
-          className="mt-1 -ml-2 text-[#9c3a3a] hover:text-[#6f2020]"
-          onClick={() => setExpanded((value) => !value)}
-          size="sm"
-          type="button"
-          variant="ghost"
-        >
-          {expanded ? "Show less" : "Show more"}
-          <ChevronDown
-            className={`size-3.5 transition-transform ${
-              expanded ? "rotate-180" : ""
-            }`}
-          />
-        </Button>
-      ) : null}
-    </div>
-  )
-}