kennel 0.2.2 → 0.2.5

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>
-  )
-}

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

@@ -1,252 +0,0 @@
-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" }
-  }
-}