kennel 0.2.3 → 0.2.6

package/kernel/plugins/mail/src/mail-conversation.tsx

@@ -1,153 +0,0 @@
-import { RefreshCw } from "lucide-react"
-
-import { BarkdownMarkdown } from "@raggle-ai/markdown"
-
-import type { ConversationMessagePayload } from "./mail-hooks.js"
-import { conversationPanelState, useMailConversation } from "./mail-hooks.js"
-import { mailErrorText } from "./mail-request.js"
-
-function notice(message: string, onRetry: () => void) {
-  return (
-    <p className="m-0 flex flex-wrap items-center gap-2 text-sm text-[#6c7a6d]">
-      <span className="break-words">{message}</span>
-      <button
-        type="button"
-        className="inline-flex items-center gap-1.5 rounded-md border
-          border-[#dde1dc] bg-white px-2.5 py-1 text-[0.82rem] text-[#4a554b]
-          hover:bg-[#f3f5f2]"
-        onClick={onRetry}
-      >
-        <RefreshCw className="size-3.5" />
-        Retry
-      </button>
-    </p>
-  )
-}
-
-function ConversationMessages({
-  items,
-}: {
-  items: ConversationMessagePayload[]
-}) {
-  return (
-    <ol className="m-0 grid list-none gap-0 p-0">
-      {items.map((message, index) => (
-        <li
-          className={
-            index === 0 ? "px-4 py-4" : "border-t border-[#e7ebe7] px-4 py-4"
-          }
-          key={message.id}
-        >
-          <div className="mb-2 grid gap-1">
-            <p className="m-0 font-semibold break-words text-[#233025]">
-              {message.subject ?? "(no subject)"}
-            </p>
-            <p className="m-0 text-[0.82rem] text-[#6c7a6d]">
-              {message.from ?? "Unknown sender"}
-              {message.date ? ` · ${message.date}` : ""}
-            </p>
-          </div>
-          <div className="prose prose-neutral max-w-none">
-            <BarkdownMarkdown value={message.body} />
-          </div>
-        </li>
-      ))}
-    </ol>
-  )
-}
-
-/**
- * The previous-conversation panel. A disabled query is hidden rather than
- * stuck loading; partial/not-found/timeout outcomes surface inline errors
- * with a retry instead of silently masquerading as an empty conversation.
- */
-export function MailConversationPanel({
-  enabled,
-  folder,
-  mailId,
-}: {
-  enabled: boolean
-  folder: string | null | undefined
-  mailId: string | null | undefined
-}) {
-  const query = useMailConversation(folder, mailId, enabled)
-  const state = conversationPanelState({
-    data: query.data,
-    enabled,
-    error: query.error,
-    isPending: query.isPending,
-  })
-  const retry = () => void query.refetch()
-
-  if (state.variant === "hidden" || state.variant === "empty") return null
-  if (state.variant === "loading") {
-    return <p className="m-0 text-sm text-[#6c7a6d]">Loading conversation…</p>
-  }
-  if (state.variant === "error") {
-    return (
-      <p
-        className="m-0 flex flex-wrap items-center gap-2 text-sm text-[#9c3a3a]"
-      >
-        <span className="break-words">
-          Could not load the conversation. {mailErrorText(query.error)}
-        </span>
-        <RetryInline onRetry={retry} />
-      </p>
-    )
-  }
-
-  const items = query.data?.items ?? []
-
-  return (
-    <section
-      className="overflow-hidden rounded-xl border border-[#e7ebe7] bg-white
-        shadow-[0_1px_2px_rgb(31_41_55/0.05)]"
-    >
-      <header className="border-b border-[#e7ebe7] bg-[#fbfcfb] px-4 py-3">
-        <h2
-          className="m-0 text-[0.75rem] font-medium tracking-wide text-[#6c7a6d]
-            uppercase"
-        >
-          Previous conversation
-        </h2>
-      </header>
-
-      {items.length ? <ConversationMessages items={items} /> : null}
-
-      <footer className="border-t border-[#e7ebe7] bg-[#fbfcfb] px-4 py-3">
-        {state.variant === "partial"
-          ? notice(
-              `Some earlier messages could not be loaded (${state.missing}).`,
-              retry,
-            )
-          : null}
-        {state.variant === "not-found"
-          ? notice("Earlier messages could not be found.", retry)
-          : null}
-        {state.variant === "timeout"
-          ? notice("Loading earlier messages timed out.", retry)
-          : null}
-        {state.variant === "ok" && items.length ? (
-          <p className="m-0 text-[0.82rem] text-[#6c7a6d]">
-            Thread loaded from references.
-          </p>
-        ) : null}
-      </footer>
-    </section>
-  )
-}
-
-function RetryInline({ onRetry }: { onRetry: () => void }) {
-  return (
-    <button
-      type="button"
-      className="inline-flex items-center gap-1.5 rounded-md border
-        border-[#dde1dc] bg-white px-2.5 py-1 text-[0.82rem] text-[#4a554b]
-        hover:bg-[#f3f5f2]"
-      onClick={onRetry}
-    >
-      <RefreshCw className="size-3.5" />
-      Retry
-    </button>
-  )
-}

package/kernel/plugins/mail/src/mail-detail-page.tsx

@@ -1,467 +0,0 @@
-import type { ReactNode } from "react"
-import {
-  Archive,
-  ArrowLeft,
-  ExternalLink,
-  RefreshCw,
-  Trash2,
-  X,
-} from "lucide-react"
-
-import type { FolderPluginViewProps } from "@raggle-ai/folder-plugin/client"
-import { BarkdownMarkdown } from "@raggle-ai/markdown"
-import { CopyContextButton } from "@raggle-ai/ui/components/copy-context"
-import { FilePreview } from "@raggle-ai/ui/components/file-preview"
-import { toast } from "@raggle-ai/ui/components/sonner"
-
-import type { MailPreview } from "./types.js"
-import type { MailDetail } from "./viewer.js"
-import { MailConversationPanel } from "./mail-conversation.js"
-import { useMailAction, useMailDetail, useMailSender } from "./mail-hooks.js"
-import { mailErrorText } from "./mail-request.js"
-import { MailSendBox } from "./mail-send-box.js"
-import { mailItemContext } from "./viewer.js"
-
-function displayTimestamp(value: string | null) {
-  if (!value) return "—"
-  const parsed = Date.parse(value)
-  if (Number.isNaN(parsed)) return value
-  return new Date(parsed).toLocaleString(undefined, {
-    dateStyle: "medium",
-    timeStyle: "short",
-  })
-}
-
-function MailMetaRow({ label, value }: { label: string; value: ReactNode }) {
-  return (
-    <div className="grid grid-cols-[88px_1fr] items-start gap-x-3 gap-y-1">
-      <span
-        className="pt-0.5 text-[0.75rem] font-medium tracking-wide
-          text-[#6c7a6d] uppercase"
-      >
-        {label}
-      </span>
-      <span className="min-w-0 text-sm break-words">{value}</span>
-    </div>
-  )
-}
-
-function RecipientItems({ items, max }: { items: string[]; max?: number }) {
-  if (!items.length) {
-    return <span className="text-[#6c7a6d]">—</span>
-  }
-
-  const visible = max ? items.slice(0, max) : items
-  const extra = max && items.length > max ? items.length - max : 0
-  const pillClassName =
-    "rounded-md bg-[#f3f5f2] px-2 py-1 text-[0.85rem] text-[#2f382f]"
-
-  return (
-    <span className="flex min-w-0 flex-wrap gap-1">
-      {visible.map((recipient) => (
-        <span key={recipient} className={pillClassName} title={recipient}>
-          <span className="break-all">{recipient}</span>
-        </span>
-      ))}
-      {extra ? (
-        <span className={pillClassName} title={`${extra} more recipients`}>
-          +{extra}
-        </span>
-      ) : null}
-    </span>
-  )
-}
-
-/**
- * Attachment cards with an optional per-card remove control. The remove
- * button only unlinks the file from the draft's frontmatter `file:` list;
- * the file stays on disk.
- */
-function AttachmentList({
-  paths,
-  pending,
-  onRemove,
-}: {
-  paths: string[]
-  pending?: boolean
-  onRemove?: (attachment: string) => void
-}) {
-  return (
-    <span className="flex min-w-0 flex-wrap gap-2">
-      {paths.map((path) => {
-        const name = path.slice(path.lastIndexOf("/") + 1)
-        return (
-          <span key={path} className="relative">
-            <FilePreview path={path} />
-            {onRemove ? (
-              <button
-                type="button"
-                aria-label={`Remove ${name} from this draft`}
-                title={`Remove ${name} from this draft}`}
-                className="absolute top-1.5 right-1.5 z-10 flex size-6
-                  cursor-pointer items-center justify-center rounded-full border
-                  border-[#e5c4c4] bg-white text-[#9c3a3a] shadow-xs
-                  hover:bg-[#fbf3f3] disabled:pointer-events-none
-                  disabled:opacity-50"
-                onClick={() => onRemove(path)}
-                disabled={pending}
-              >
-                <X className="size-3.5" />
-              </button>
-            ) : null}
-          </span>
-        )
-      })}
-    </span>
-  )
-}
-
-function MailDetailView({
-  mail,
-  error,
-  preview,
-  refreshing,
-  onRefresh,
-  onArchive,
-  onDelete,
-  actionPending,
-  onOpenPath,
-  onRemoveAttachment,
-}: {
-  mail: MailDetail
-  error?: string
-  preview?: MailPreview
-  refreshing: boolean
-  onRefresh: () => void
-  /** Archive this draft; omit to hide the Archive button. */
-  onArchive?: () => void
-  /** Delete this draft; omit to hide the Delete button. */
-  onDelete?: () => void
-  /** True while an archive or delete request is running. */
-  actionPending?: boolean
-  /** Open a physical file in the host's default app; omit to hide the button. */
-  onOpenPath?: (path: string) => Promise<unknown>
-  /** Unlink one attachment from this draft; omit to hide the remove button. */
-  onRemoveAttachment?: (attachment: string) => void
-}) {
-  return (
-    <div className="grid min-w-0 grid-cols-1 gap-4">
-      <header className="flex flex-wrap items-start justify-between gap-3">
-        <div className="min-w-0">
-          <h1 className="m-0 text-2xl font-semibold break-words text-[#233025]">
-            {mail.subject ?? "(no subject)"}
-          </h1>
-          <p className="m-0 mt-1 text-sm text-[#6c7a6d]">
-            Updated:{" "}
-            {(mail.updatedAt ?? mail.createdAt) ? (
-              <time
-                dateTime={mail.updatedAt ?? mail.createdAt ?? undefined}
-                title={mail.updatedAt ?? mail.createdAt ?? undefined}
-              >
-                {displayTimestamp(mail.updatedAt ?? mail.createdAt)}
-              </time>
-            ) : (
-              "—"
-            )}
-          </p>
-        </div>
-
-        <div className="flex shrink-0 flex-wrap items-center gap-2">
-          <CopyContextButton
-            className="border bg-white text-[#4a554b] shadow-xs
-              hover:bg-[#f3f5f2]"
-            context={() => mailItemContext(mail, preview?.body ?? mail.body)}
-            label={`Copy full context for ${mail.subject ?? "this draft"}`}
-            size="sm"
-            variant="ghost"
-          />
-          <CopyContextButton
-            className="border bg-white text-[#4a554b] shadow-xs
-              hover:bg-[#f3f5f2]"
-            context={mail.filePath}
-            label="Copy draft path"
-            size="sm"
-            variant="ghost"
-          />
-          <button
-            type="button"
-            className="inline-flex items-center gap-2 rounded-md border px-3
-              py-1.5 text-sm"
-            onClick={onRefresh}
-            disabled={refreshing}
-          >
-            <RefreshCw
-              className={refreshing ? "size-4 animate-spin" : "size-4"}
-            />
-            Refresh
-          </button>
-          {onOpenPath ? (
-            <button
-              type="button"
-              className="inline-flex cursor-pointer items-center gap-2
-                rounded-md border px-3 py-1.5 text-sm"
-              onClick={() => void onOpenPath(mail.filePath)}
-            >
-              <ExternalLink className="size-4" />
-              Open
-            </button>
-          ) : null}
-          {onArchive && mail.status !== "sent" ? (
-            <button
-              type="button"
-              className="inline-flex items-center gap-2 rounded-md border px-3
-                py-1.5 text-sm disabled:pointer-events-none disabled:opacity-50"
-              onClick={onArchive}
-              disabled={actionPending}
-            >
-              <Archive className="size-4" />
-              Archive
-            </button>
-          ) : null}
-          {onDelete ? (
-            <button
-              type="button"
-              className="inline-flex items-center gap-2 rounded-md border
-                border-[#e5c4c4] px-3 py-1.5 text-sm text-[#9c3a3a]
-                hover:bg-[#fbf3f3] disabled:pointer-events-none
-                disabled:opacity-50"
-              onClick={onDelete}
-              disabled={actionPending}
-            >
-              <Trash2 className="size-4" />
-              Delete
-            </button>
-          ) : null}
-        </div>
-      </header>
-
-      <div
-        className="grid grid-cols-1 gap-3 rounded-xl border border-[#e7ebe7]
-          bg-white px-4 py-4 shadow-[0_1px_2px_rgb(31_41_55/0.05)]"
-      >
-        {mail.from ? <MailMetaRow label="From" value={mail.from} /> : null}
-        {mail.subject ? (
-          <MailMetaRow label="Subject" value={mail.subject} />
-        ) : null}
-        <MailMetaRow label="To" value={<RecipientItems items={mail.to} />} />
-        <MailMetaRow label="CC" value={<RecipientItems items={mail.cc} />} />
-        <MailMetaRow label="BCC" value={<RecipientItems items={mail.bcc} />} />
-        {mail.noSignature ? (
-          <MailMetaRow label="Signature" value="none" />
-        ) : null}
-        {mail.attachments.length ? (
-          <MailMetaRow
-            label="Attachments"
-            value={
-              <AttachmentList
-                paths={mail.attachments}
-                pending={actionPending}
-                onRemove={onRemoveAttachment}
-              />
-            }
-          />
-        ) : null}
-      </div>
-
-      {error ? <p className="m-0 text-sm text-[#9c3a3a]">{error}</p> : null}
-
-      {preview ? (
-        <article
-          className="overflow-hidden rounded-xl border border-[#e7ebe7] bg-white
-            shadow-[0_1px_2px_rgb(31_41_55/0.05)]"
-        >
-          <section className="px-4 py-4">
-            {!preview.body.trim() && !preview.signature ? (
-              <p className="m-0 text-sm text-[#6c7a6d]">(empty body)</p>
-            ) : (
-              <div className="prose prose-neutral max-w-none">
-                <BarkdownMarkdown
-                  value={
-                    [preview.body, preview.signature]
-                      .filter(Boolean)
-                      .join("\n\n") as string
-                  }
-                />
-              </div>
-            )}
-          </section>
-        </article>
-      ) : null}
-    </div>
-  )
-}
-
-export function MailDetailPage({
-  folder,
-  subpath: mailId,
-  listHref,
-  hostActions,
-}: Pick<
-  FolderPluginViewProps,
-  "folder" | "subpath" | "listHref" | "hostActions"
->) {
-  const query = useMailDetail(folder, mailId)
-  const action = useMailAction(folder)
-
-  async function handleArchive() {
-    if (!mail) return
-    try {
-      await action.mutateAsync({
-        action: "archive",
-        id: mailId,
-        path: folder ?? "",
-        revision: mail.revision,
-      })
-      void query.refetch()
-    } catch (error) {
-      toast.error(mailErrorText(error))
-    }
-  }
-
-  async function handleRemoveAttachment(attachment: string) {
-    if (!mail) return
-    if (
-      !window.confirm(
-        `Remove "${attachment}" from this draft? The file is kept on disk.`,
-      )
-    )
-      return
-    try {
-      await action.mutateAsync({
-        action: "remove-attachment",
-        id: mailId,
-        path: folder ?? "",
-        revision: mail.revision,
-        attachment,
-      })
-      void query.refetch()
-    } catch (error) {
-      toast.error(mailErrorText(error))
-    }
-  }
-
-  async function handleDelete() {
-    if (!mail) return
-    if (
-      !window.confirm(
-        "Delete this draft? It will be moved to draft history first.",
-      )
-    )
-      return
-    try {
-      await action.mutateAsync({
-        action: "delete",
-        id: mailId,
-        path: folder ?? "",
-        revision: mail.revision,
-      })
-      window.location.assign(listHref)
-    } catch (error) {
-      toast.error(mailErrorText(error))
-    }
-  }
-
-  const senderNeeded = Boolean(query.data?.mail && !query.data.mail.from)
-  const fromQuery = useMailSender(folder, mailId, senderNeeded)
-
-  const resolvedFrom =
-    query.data?.mail?.from ??
-    (fromQuery.data?.name && fromQuery.data?.from
-      ? `${fromQuery.data.name} <${fromQuery.data.from}>`
-      : (fromQuery.data?.from ?? null))
-  const mail = query.data?.mail
-    ? { ...query.data.mail, from: resolvedFrom }
-    : undefined
-
-  const conversationEnabled = Boolean(
-    query.data?.mail &&
-    (query.data.mail.inReplyTo ?? query.data.mail.references.length > 0),
-  )
-
-  if (!folder || !mailId) {
-    return (
-      <div
-        className="mx-auto grid w-full max-w-3xl min-w-0 grid-cols-1 gap-4 px-4
-          py-5"
-      >
-        <p className="m-0 text-sm text-[#6c7a6d]">
-          Select a mail from the list.
-        </p>
-        <a
-          className="w-fit cursor-pointer rounded-md border border-[#dde1dc]
-            bg-white px-3 py-1.5 text-[0.85rem] text-[#4a554b]
-            hover:bg-[#f3f5f2]"
-          href={listHref}
-        >
-          Back
-        </a>
-      </div>
-    )
-  }
-
-  return (
-    <div
-      className="mx-auto grid w-full max-w-3xl min-w-0 grid-cols-1 gap-4 px-4
-        py-5"
-    >
-      <a
-        className="inline-flex w-fit items-center gap-2 rounded-md border
-          border-[#dde1dc] bg-white px-3 py-1.5 text-sm text-[#4a554b]
-          no-underline hover:bg-[#f3f5f2]"
-        href={listHref}
-      >
-        <ArrowLeft className="size-4" />
-        Back to Mail
-      </a>
-
-      {query.isPending ? (
-        <p className="m-0 text-sm text-[#6c7a6d]">Loading…</p>
-      ) : null}
-
-      {query.error && !query.data?.mail ? (
-        <p className="m-0 text-sm text-[#9c3a3a]">
-          Could not load mail preview.
-        </p>
-      ) : null}
-
-      {mail ? (
-        <MailDetailView
-          mail={mail}
-          preview={query.error ? undefined : query.data?.preview}
-          error={
-            query.error
-              ? "Could not load mail preview."
-              : query.data?.preview
-                ? undefined
-                : "Could not load mail preview."
-          }
-          refreshing={query.isFetching}
-          onRefresh={() => void query.refetch()}
-          onArchive={
-            mail.status === "sent" ? undefined : () => void handleArchive()
-          }
-          onDelete={() => void handleDelete()}
-          actionPending={action.isPending}
-          onOpenPath={hostActions?.openPath}
-          onRemoveAttachment={(attachment) =>
-            void handleRemoveAttachment(attachment)
-          }
-        />
-      ) : null}
-
-      <MailConversationPanel
-        enabled={conversationEnabled}
-        folder={folder}
-        mailId={mailId}
-      />
-
-      {mail ? (
-        <MailSendBox folder={folder} mailId={mailId} status={mail.status} />
-      ) : null}
-
-      {!query.isPending && !query.error && !query.data?.mail ? (
-        <p className="m-0 text-sm text-[#6c7a6d]">Mail not found.</p>
-      ) : null}
-    </div>
-  )
-}