From bbe39ef72f3dde37e58b447e4d10bf3abee8c0e2 Mon Sep 17 00:00:00 2001
From: Stephen <scook@tightknit.ai>
Date: Wed, 20 May 2026 14:03:40 -0700
Subject: [PATCH 1/3] feat(task-card): edit details and output rich-text fields
 in the UI

The task_card editor only exposed title, task_id, status, and sources.
Slack's task_card block also accepts rich-text `details` and `output`
fields, but the only way to set them was to drop in a palette variant
that already included them. Add togglable rich-text sections for both,
backed by the existing rich-text editor, with add/remove affordances
that map cleanly to the optional payload shape.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/editors/task-card-editor.tsx | 83 ++++++++++++++++++++-
 1 file changed, 79 insertions(+), 4 deletions(-)

diff --git a/src/components/editors/task-card-editor.tsx b/src/components/editors/task-card-editor.tsx
index 30abfab..55a8ffb 100644
--- a/src/components/editors/task-card-editor.tsx
+++ b/src/components/editors/task-card-editor.tsx
@@ -1,19 +1,27 @@
 import { Plus, Trash2 } from 'lucide-react';
+import type { RichTextBlock } from 'slack-web-api-client';
 import { Button } from '../../lib/ui/button';
 import { Input } from '../../lib/ui/input';
 import { Label } from '../../lib/ui/label';
 import { RadioGroup, RadioGroupItem } from '../../lib/ui/radio-group';
 import type { TaskCardBlock, TaskCardStatus, UrlSourceElement } from '../../types';
 import { EditorField } from './field';
+import { RichTextEditor } from './rich-text-editor';
 import type { BlockEditorProps } from './types';
 
 const STATUSES: readonly TaskCardStatus[] = ['pending', 'in_progress', 'complete', 'error'] as const;
 
+const EMPTY_RICH_TEXT: RichTextBlock = {
+  type: 'rich_text',
+  elements: [{ type: 'rich_text_section', elements: [{ type: 'text', text: '' }] }]
+};
+
 /**
- * Editor form for task_card blocks. Edits the task id, title, status, and
- * the cited sources list. The rich-text `details` and `output` fields
- * round-trip through the payload but are not editable in the visual
- * builder — palette variants that include them keep them on save.
+ * Editor form for task_card blocks. Edits the task id, title, status,
+ * the cited sources list, and the optional rich-text `details` and
+ * `output` fields. Details and output are togglable — adding one swaps
+ * in an empty rich_text block; removing one drops the field from the
+ * payload.
  * @param props - editor props
  * @param props.block - the task_card block to edit
  * @param props.onChange - called with the updated block payload
@@ -62,6 +70,20 @@ export function TaskCardEditor({ block, onChange }: BlockEditorProps<TaskCardBlo
         </RadioGroup>
       </EditorField>
 
+      <RichTextField
+        label="Details"
+        help="Optional rich-text body shown inside the card."
+        value={block.details}
+        onChange={(next) => onChange({ ...block, details: next })}
+      />
+
+      <RichTextField
+        label="Output"
+        help="Optional rich-text result Slack renders beneath the details."
+        value={block.output}
+        onChange={(next) => onChange({ ...block, output: next })}
+      />
+
       <SourcesField
         sources={block.sources ?? []}
         onChange={(next) => onChange({ ...block, sources: next.length > 0 ? next : undefined })}
@@ -70,6 +92,59 @@ export function TaskCardEditor({ block, onChange }: BlockEditorProps<TaskCardBlo
   );
 }
 
+/**
+ * Sub-editor for an optional rich-text field on the task card (`details`
+ * or `output`). When the field is unset, renders an "Add" button that
+ * swaps in an empty rich_text block; once set, renders the standard
+ * {@link RichTextEditor} plus a remove affordance.
+ * @param props - field props
+ * @param props.label - visible label for the field
+ * @param props.help - one-line helper text
+ * @param props.value - the current rich_text payload, if any
+ * @param props.onChange - called with the new payload or `undefined`
+ * @returns the rendered field
+ */
+function RichTextField({
+  label,
+  help,
+  value,
+  onChange
+}: {
+  label: string;
+  help?: string;
+  value: RichTextBlock | undefined;
+  onChange: (next: RichTextBlock | undefined) => void;
+}) {
+  if (!value) {
+    return (
+      <div className="flex flex-col gap-1.5">
+        <Label>{label}</Label>
+        <Button type="button" size="sm" variant="outline" className="self-start" onClick={() => onChange(EMPTY_RICH_TEXT)}>
+          <Plus className="h-3.5 w-3.5" /> Add {label.toLowerCase()}
+        </Button>
+        {help && <p className="text-[11px] leading-snug text-muted-foreground">{help}</p>}
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center justify-between">
+        <Label>{label}</Label>
+        <button
+          type="button"
+          aria-label={`Remove ${label.toLowerCase()}`}
+          onClick={() => onChange(undefined)}
+          className="rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </button>
+      </div>
+      <RichTextEditor block={value} onChange={onChange} />
+      {help && <p className="text-[11px] leading-snug text-muted-foreground">{help}</p>}
+    </div>
+  );
+}
+
 /**
  * Sub-editor for the task card's `sources` list. Each source is a
  * `{ text, url }` pair Slack renders as a labeled link beneath the card.

From c00b88f58aaf44e4d8727bb1237b97d4803fd544 Mon Sep 17 00:00:00 2001
From: Stephen <scook@tightknit.ai>
Date: Wed, 20 May 2026 14:06:26 -0700
Subject: [PATCH 2/3] style(task-card): apply biome formatter to the new Button
 block

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/editors/task-card-editor.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/editors/task-card-editor.tsx b/src/components/editors/task-card-editor.tsx
index 55a8ffb..1d93571 100644
--- a/src/components/editors/task-card-editor.tsx
+++ b/src/components/editors/task-card-editor.tsx
@@ -119,7 +119,13 @@ function RichTextField({
     return (
       <div className="flex flex-col gap-1.5">
         <Label>{label}</Label>
-        <Button type="button" size="sm" variant="outline" className="self-start" onClick={() => onChange(EMPTY_RICH_TEXT)}>
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          className="self-start"
+          onClick={() => onChange(EMPTY_RICH_TEXT)}
+        >
           <Plus className="h-3.5 w-3.5" /> Add {label.toLowerCase()}
         </Button>
         {help && <p className="text-[11px] leading-snug text-muted-foreground">{help}</p>}

From 2f94f2d20f563262e2a6cd2a087b4caf92f213f7 Mon Sep 17 00:00:00 2001
From: Stephen <scook@tightknit.ai>
Date: Wed, 20 May 2026 14:10:15 -0700
Subject: [PATCH 3/3] docs(task-card): match field help text to Slack's
 task_card block docs

Replace the editor's hand-written help strings with the exact phrasing
from docs.slack.dev so the menu reads like the upstream reference
(task_id, title, status, details, output, sources).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/editors/task-card-editor.tsx | 22 ++++++++-------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/editors/task-card-editor.tsx b/src/components/editors/task-card-editor.tsx
index 1d93571..e542802 100644
--- a/src/components/editors/task-card-editor.tsx
+++ b/src/components/editors/task-card-editor.tsx
@@ -31,7 +31,7 @@ export function TaskCardEditor({ block, onChange }: BlockEditorProps<TaskCardBlo
   const status: TaskCardStatus = block.status ?? 'pending';
   return (
     <div className="flex flex-col gap-4">
-      <EditorField label="Title" help="Short label shown at the top of the card." htmlFor="task-card-title">
+      <EditorField label="Title" help="Title of the task in plain text." htmlFor="task-card-title">
         <Input
           id="task-card-title"
           value={block.title}
@@ -40,11 +40,7 @@ export function TaskCardEditor({ block, onChange }: BlockEditorProps<TaskCardBlo
         />
       </EditorField>
 
-      <EditorField
-        label="Task ID"
-        help="Stable identifier you can reference from interaction payloads."
-        htmlFor="task-card-id"
-      >
+      <EditorField label="Task ID" help="ID for the task." htmlFor="task-card-id">
         <Input
           id="task-card-id"
           value={block.task_id}
@@ -53,7 +49,7 @@ export function TaskCardEditor({ block, onChange }: BlockEditorProps<TaskCardBlo
         />
       </EditorField>
 
-      <EditorField label="Status" help="Slack renders a matching status chip on the card.">
+      <EditorField label="Status" help='The state of a task. Can be "pending", "in_progress", "complete", or "error".'>
         <RadioGroup
           value={status}
           onValueChange={(v) => onChange({ ...block, status: v as TaskCardStatus })}
@@ -72,14 +68,14 @@ export function TaskCardEditor({ block, onChange }: BlockEditorProps<TaskCardBlo
 
       <RichTextField
         label="Details"
-        help="Optional rich-text body shown inside the card."
+        help="Details of the task in the form of a single rich_text entity."
         value={block.details}
         onChange={(next) => onChange({ ...block, details: next })}
       />
 
       <RichTextField
         label="Output"
-        help="Optional rich-text result Slack renders beneath the details."
+        help="Output of the task in the form of a single rich_text entity."
         value={block.output}
         onChange={(next) => onChange({ ...block, output: next })}
       />
@@ -177,11 +173,9 @@ function SourcesField({
   return (
     <div className="flex flex-col gap-2 rounded-md border bg-muted/20 p-3">
       <span className="text-xs font-medium text-foreground">Sources</span>
-      {sources.length === 0 ? (
-        <p className="text-[11px] leading-snug text-muted-foreground">
-          No sources. Add one to cite a document or link beneath the card.
-        </p>
-      ) : null}
+      <p className="text-[11px] leading-snug text-muted-foreground">
+        Array of URL source elements used to generate a response.
+      </p>
       {sources.map((src, idx) => (
         <div key={idx} className="flex flex-col gap-2 rounded border bg-background p-2">
           <div className="flex items-center justify-between">