kennel 0.2.1 → 0.2.2

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

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

package/kernel/plugins/mail/src/mail-hooks.ts

@@ -0,0 +1,252 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+
+import { folderPathId } from "@raggle-ai/folder-plugin/client"
+
+import { mailRequest } from "./mail-request.js"
+
+export type MailListResponse = {
+  folder: string
+  items: MailListItemPayload[]
+}
+
+export type MailListItemPayload = {
+  attachments: string[]
+  bcc: string[]
+  cc: string[]
+  createdAt: string | null
+  excerpt: string
+  filePath: string
+  folder: string | null
+  from: string | null
+  id: string
+  inReplyTo: string | null
+  references: string[]
+  revision: string
+  status: string | null
+  subject: string | null
+  tags: string[]
+  to: string[]
+  updatedAt: string | null
+  noSignature: boolean
+}
+
+export type MailDetailPayload = Omit<MailListItemPayload, "excerpt"> & {
+  body: string
+}
+
+export type MailSenderPayload = {
+  from: string | null
+  name: string | null
+  ok: boolean
+}
+
+export type ConversationMessagePayload = {
+  body: string
+  date: string | null
+  from: string | null
+  id: string
+  subject: string | null
+  to: string | null
+}
+
+export type ConversationOutcome =
+  "empty" | "ok" | "partial" | "not-found" | "timeout"
+
+export type ConversationPayload = {
+  items: ConversationMessagePayload[]
+  missing: string[]
+  outcome: ConversationOutcome
+}
+
+export type MailSendPreviewPayload = {
+  dryRun: true
+  output: string
+  revision: string
+}
+
+export type MailSendResultPayload = {
+  dryRun: false
+  output: string
+}
+
+function mailPath(folder: string | null | undefined) {
+  return { path: folder ?? "" }
+}
+
+function folderCacheKey(folder: string | null | undefined) {
+  return ["folder", folder ? folderPathId(folder) : "none", "mail"] as const
+}
+
+export function useMailList(folder: string | null | undefined) {
+  return useQuery({
+    enabled: Boolean(folder),
+    gcTime: 5 * 60_000,
+    queryFn: ({ signal }) =>
+      mailRequest<MailListResponse>("/api/mail", {
+        search: mailPath(folder),
+        signal,
+      }),
+    queryKey: [...folderCacheKey(folder)],
+    staleTime: 15_000,
+  })
+}
+
+export type MailPreviewPayload = {
+  body: string
+  signature: string | null
+}
+
+export type MailDetailResponsePayload = {
+  mail: MailDetailPayload
+  preview?: MailPreviewPayload
+}
+
+export function useMailDetail(
+  folder: string | null | undefined,
+  mailId: string | null | undefined,
+) {
+  return useQuery<MailDetailResponsePayload>({
+    enabled: Boolean(folder && mailId),
+    gcTime: 5 * 60_000,
+    queryFn: ({ signal }) =>
+      mailRequest<MailDetailResponsePayload>("/api/mail/item", {
+        search: { ...mailPath(folder), id: mailId ?? "" },
+        signal,
+      }),
+    queryKey: [...folderCacheKey(folder), mailId ?? ""],
+    retry: false,
+    staleTime: 15_000,
+  })
+}
+
+/** Lazy sender resolution: runs only when the draft has no recorded From. */
+export function useMailSender(
+  folder: string | null | undefined,
+  mailId: string | null | undefined,
+  enabled: boolean,
+) {
+  return useQuery({
+    enabled: Boolean(enabled && mailId),
+    gcTime: 5 * 60_000,
+    queryFn: ({ signal }) =>
+      mailRequest<MailSenderPayload>("/api/mail/from", {
+        search: { ...mailPath(folder), id: mailId ?? "" },
+        signal,
+      }),
+    queryKey: [...folderCacheKey(folder), mailId ?? "", "from"],
+    retry: false,
+    staleTime: 15_000,
+  })
+}
+
+export function useMailConversation(
+  folder: string | null | undefined,
+  mailId: string | null | undefined,
+  enabled: boolean,
+) {
+  return useQuery<ConversationPayload>({
+    enabled: Boolean(enabled && mailId),
+    gcTime: 5 * 60_000,
+    queryFn: ({ signal }) =>
+      mailRequest<ConversationPayload>("/api/mail/conversation", {
+        search: { ...mailPath(folder), id: mailId ?? "" },
+        signal,
+      }),
+    queryKey: [...folderCacheKey(folder), mailId ?? "", "conversation"],
+    retry: false,
+    staleTime: 5 * 60_000,
+  })
+}
+
+export type MailActionInput = {
+  action: "archive" | "delete" | "remove-attachment"
+  id: string
+  path: string
+  revision: string
+  /** Absolute attachment path; used only with the remove-attachment action. */
+  attachment?: string
+}
+
+export function useMailAction(folder: string | null | undefined) {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (input: MailActionInput) =>
+      mailRequest<{ action: string; id: string; ok: true }>(
+        "/api/mail/action",
+        {
+          body: input,
+          method: "POST",
+        },
+      ),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({
+        queryKey: [...folderCacheKey(folder)],
+      })
+    },
+  })
+}
+
+export function useMailSend(folder: string | null | undefined) {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (input: { dryRun: boolean; id: string; revision?: string }) =>
+      mailRequest<MailSendPreviewPayload | MailSendResultPayload>(
+        "/api/mail/send",
+        {
+          body: { path: folder ?? "", ...input },
+          method: "POST",
+        },
+      ),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({
+        queryKey: [...folderCacheKey(folder)],
+      })
+    },
+  })
+}
+
+export type ConversationPanelState =
+  | { variant: "hidden" }
+  | { variant: "loading" }
+  | { variant: "error"; message: string }
+  | { variant: "empty" }
+  | { variant: "ok" }
+  | { variant: "partial"; missing: number }
+  | { variant: "not-found" }
+  | { variant: "timeout" }
+
+/**
+ * Pure mapping from the conversation query to a UI state. A disabled query
+ * (no references, or the detail still loading) is "hidden" — never an
+ * endless loading spinner.
+ */
+export function conversationPanelState(input: {
+  data?: ConversationPayload
+  enabled: boolean
+  error: unknown
+  isPending: boolean
+}): ConversationPanelState {
+  if (!input.enabled) return { variant: "hidden" }
+  if (input.isPending && !input.data) return { variant: "loading" }
+  if (input.error && !input.data) {
+    const message =
+      input.error instanceof Error
+        ? input.error.message
+        : "Could not load the conversation."
+    return { variant: "error", message }
+  }
+  switch (input.data?.outcome) {
+    case "empty":
+      return { variant: "empty" }
+    case "ok":
+      return input.data.items.length ? { variant: "ok" } : { variant: "empty" }
+    case "partial":
+      return { variant: "partial", missing: input.data.missing.length }
+    case "not-found":
+      return { variant: "not-found" }
+    case "timeout":
+      return { variant: "timeout" }
+    default:
+      return { variant: "hidden" }
+  }
+}