+1 -1

app/components/LexiconFlow/index.tsx

reviewed

··· 1 1 import { ArrowRight, Webhook } from "../../icons.ts"; 2 2 import { nsidToDomain } from "../../../lib/lexicons/resolver.ts"; 3 3 import { type Action } from "../../../lib/db/schema.ts"; 4 4 - import { isRecordProducingAction } from "../../../lib/actions/registry.ts"; 4 4 + import { isRecordProducingAction } from "../../islands/action-editors/registry.ts"; 5 5 import { FOLLOW_TARGETS } from "../../../lib/automations/follow-targets.ts"; 6 6 import { Favicon, NsidCode } from "../NsidCode/index.tsx"; 7 7 import * as s from "./styles.css.ts";

+31 -959

app/islands/AutomationForm.tsx

reviewed

··· 2 2 import type { RecordSchema, SchemaNode } from "../../lib/lexicons/schema-types.js"; 3 3 import { nsidRequiresWantedDids } from "../../lib/lexicons/match.js"; 4 4 import { type Action, type FetchStep, type FollowTarget } from "../../lib/db/schema.js"; 5 5 - import { isRecordProducingAction } from "../../lib/actions/registry.js"; 6 5 import { 7 6 ACTION_CATALOGUE, 8 7 actionTypeKey, 9 8 type AddableActionId, 10 9 } from "../../lib/automations/action-catalogue.js"; 11 11 - import { FOLLOW_TARGETS } from "../../lib/automations/follow-targets.js"; 12 10 import { SCOPE_INSUFFICIENT, redirectToScopeUpgrade } from "../../lib/auth/scope-errors.js"; 13 13 - import RecordFormBuilder from "./RecordFormBuilder.js"; 14 11 import { ActionHeader } from "../components/ActionHeader/index.js"; 15 12 import { actionIcon } from "../styles/action-header.css.ts"; 16 13 import * as s from "./AutomationForm.css.ts"; 14 14 + import { 15 15 + ACTION_UI_REGISTRY, 16 16 + isRecordProducingAction, 17 17 + type ActionDraft, 18 18 + } from "./action-editors/registry.ts"; 19 19 + import type { ForEachDraft } from "./action-editors/types.ts"; 17 20 18 21 type Field = { 19 22 path: string; ··· 38 41 comment: string; 39 42 }; 40 43 41 41 - type ForEachDraft = { 42 42 - path: string; 43 43 - conditions: Condition[]; 44 44 - }; 45 45 - 46 44 type FetchDraft = { 47 45 kind: "record" | "search"; 48 46 name: string; ··· 54 52 conditions: Condition[]; 55 53 comment: string; 56 54 }; 57 57 - 58 58 - type HeaderDraft = { key: string; value: string }; 59 59 - type WebhookDraft = { 60 60 - type: "webhook"; 61 61 - callbackUrl: string; 62 62 - headers: HeaderDraft[]; 63 63 - comment: string; 64 64 - forEach?: ForEachDraft; 65 65 - }; 66 66 - type RecordDraft = { 67 67 - type: "record"; 68 68 - targetCollection: string; 69 69 - recordTemplate: string; 70 70 - comment: string; 71 71 - forEach?: ForEachDraft; 72 72 - }; 73 73 - type BskyPostDraft = { 74 74 - type: "bsky-post"; 75 75 - textTemplate: string; 76 76 - langsText: string; 77 77 - labels: string[]; 78 78 - comment: string; 79 79 - forEach?: ForEachDraft; 80 80 - }; 81 81 - type PatchRecordDraft = { 82 82 - type: "patch-record"; 83 83 - targetCollection: string; 84 84 - baseRecordUri: string; 85 85 - recordTemplate: string; 86 86 - comment: string; 87 87 - forEach?: ForEachDraft; 88 88 - }; 89 89 - type MarginBookmarkDraft = { 90 90 - type: "margin-bookmark"; 91 91 - targetSource: string; 92 92 - bodyValue: string; 93 93 - tagsText: string; 94 94 - comment: string; 95 95 - forEach?: ForEachDraft; 96 96 - }; 97 97 - type FollowDraft = { 98 98 - type: "follow"; 99 99 - target: FollowTarget; 100 100 - subject: string; 101 101 - comment: string; 102 102 - forEach?: ForEachDraft; 103 103 - }; 104 104 - type SembleSaveDraft = { 105 105 - type: "semble-save"; 106 106 - url: string; 107 107 - comment: string; 108 108 - forEach?: ForEachDraft; 109 109 - }; 110 110 - type ActionDraft = 111 111 - | WebhookDraft 112 112 - | RecordDraft 113 113 - | BskyPostDraft 114 114 - | PatchRecordDraft 115 115 - | MarginBookmarkDraft 116 116 - | FollowDraft 117 117 - | SembleSaveDraft; 118 55 119 56 export type AutomationInitial = { 120 57 rkey?: string; ··· 307 244 } 308 245 309 246 // --------------------------------------------------------------------------- 310 310 - // Webhook action editor 311 311 - // --------------------------------------------------------------------------- 312 312 - 313 313 - function WebhookActionEditor({ 314 314 - action, 315 315 - index, 316 316 - onChange, 317 317 - }: { 318 318 - action: WebhookDraft; 319 319 - index: number; 320 320 - onChange: (a: WebhookDraft) => void; 321 321 - }) { 322 322 - const updateHeader = (i: number, key: "key" | "value", val: string) => { 323 323 - const headers = action.headers.map((h, j) => (j === i ? { ...h, [key]: val } : h)); 324 324 - onChange({ ...action, headers }); 325 325 - }; 326 326 - const addHeader = () => { 327 327 - onChange({ ...action, headers: [...action.headers, { key: "", value: "" }] }); 328 328 - }; 329 329 - const removeHeader = (i: number) => { 330 330 - onChange({ ...action, headers: action.headers.filter((_, j) => j !== i) }); 331 331 - }; 332 332 - 333 333 - const callbackId = `action-${index}-callback-url`; 334 334 - const headersGroupId = `action-${index}-headers-group`; 335 335 - 336 336 - return ( 337 337 - <> 338 338 - <div class={s.fieldGroup}> 339 339 - <label class={s.label} for={callbackId}> 340 340 - Callback URL 341 341 - </label> 342 342 - <input 343 343 - id={callbackId} 344 344 - class={s.input} 345 345 - type="url" 346 346 - placeholder="e.g. https://example.com/hooks/events" 347 347 - value={action.callbackUrl} 348 348 - onInput={(e: Event) => 349 349 - onChange({ ...action, callbackUrl: (e.target as HTMLInputElement).value }) 350 350 - } 351 351 - required 352 352 - autocomplete="off" 353 353 - /> 354 354 - </div> 355 355 - <div class={s.fieldGroup} role="group" aria-labelledby={headersGroupId}> 356 356 - <span id={headersGroupId} class={s.label}> 357 357 - Custom headers 358 358 - </span> 359 359 - <span class={s.hint}> 360 360 - Use <code>{"{{secret:name}}"}</code> to reference stored secrets 361 361 - </span> 362 362 - {action.headers.map((header, i) => ( 363 363 - <div key={i} class={s.conditionRow}> 364 364 - <div class={s.conditionField}> 365 365 - <input 366 366 - class={s.input} 367 367 - type="text" 368 368 - placeholder="e.g. Authorization" 369 369 - value={header.key} 370 370 - onInput={(e: Event) => updateHeader(i, "key", (e.target as HTMLInputElement).value)} 371 371 - aria-label="Header name" 372 372 - autocomplete="off" 373 373 - /> 374 374 - </div> 375 375 - <div class={s.conditionValue}> 376 376 - <input 377 377 - class={s.input} 378 378 - type="text" 379 379 - placeholder="e.g. Bearer {{secret:my-token}}" 380 380 - value={header.value} 381 381 - onInput={(e: Event) => 382 382 - updateHeader(i, "value", (e.target as HTMLInputElement).value) 383 383 - } 384 384 - aria-label="Header value" 385 385 - autocomplete="off" 386 386 - /> 387 387 - </div> 388 388 - <button type="button" class={s.removeBtn} onClick={() => removeHeader(i)}> 389 389 - Remove 390 390 - </button> 391 391 - </div> 392 392 - ))} 393 393 - <button type="button" class={s.addBtn} onClick={addHeader}> 394 394 - + Add Header 395 395 - </button> 396 396 - </div> 397 397 - </> 398 398 - ); 399 399 - } 400 400 - 401 401 - // --------------------------------------------------------------------------- 402 402 - // Shared NSID schema hook for record action editors 403 403 - // --------------------------------------------------------------------------- 404 404 - 405 405 - function useNsidSchema(initialCollection?: string) { 406 406 - const [targetSchema, setTargetSchema] = useState<RecordSchema | null>(null); 407 407 - const [targetSchemaLoading, setTargetSchemaLoading] = useState(false); 408 408 - const [targetSchemaError, setTargetSchemaError] = useState(""); 409 409 - const [nsidSuggestions, setNsidSuggestions] = useState<string[]>([]); 410 410 - const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null); 411 411 - const suggestDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null); 412 412 - const abortRef = useRef<AbortController | null>(null); 413 413 - const lastSuggestPrefix = useRef(""); 414 414 - const [datalistId] = useState(() => `nsid-${Math.random().toString(36).slice(2, 8)}`); 415 415 - const initialFetched = useRef(false); 416 416 - 417 417 - const fetchTargetSchema = useCallback((nsid: string) => { 418 418 - if (debounceRef.current) clearTimeout(debounceRef.current); 419 419 - if (!nsid || !NSID_RE.test(nsid)) { 420 420 - abortRef.current?.abort(); 421 421 - setTargetSchema(null); 422 422 - setTargetSchemaError(""); 423 423 - return; 424 424 - } 425 425 - debounceRef.current = setTimeout(async () => { 426 426 - abortRef.current?.abort(); 427 427 - const ctrl = new AbortController(); 428 428 - abortRef.current = ctrl; 429 429 - setTargetSchemaLoading(true); 430 430 - setTargetSchemaError(""); 431 431 - try { 432 432 - const res = await fetch(`/api/lexicons/${encodeURIComponent(nsid)}?schema=record`, { 433 433 - signal: ctrl.signal, 434 434 - }); 435 435 - const data = await res.json(); 436 436 - if (!res.ok) { 437 437 - setTargetSchemaError(data.error || "Failed to load schema"); 438 438 - setTargetSchema(null); 439 439 - } else { 440 440 - setTargetSchema(data.record ?? null); 441 441 - if (!data.record) setTargetSchemaError("No record schema found for this collection"); 442 442 - } 443 443 - } catch (err) { 444 444 - if ((err as Error).name === "AbortError") return; 445 445 - setTargetSchemaError("Failed to fetch target collection schema"); 446 446 - setTargetSchema(null); 447 447 - } finally { 448 448 - if (abortRef.current === ctrl) { 449 449 - abortRef.current = null; 450 450 - setTargetSchemaLoading(false); 451 451 - } 452 452 - } 453 453 - }, 400); 454 454 - }, []); 455 455 - 456 456 - const fetchSuggestions = useCallback((value: string) => { 457 457 - if (suggestDebounceRef.current) clearTimeout(suggestDebounceRef.current); 458 458 - const dotIndex = value.lastIndexOf("."); 459 459 - const prefix = dotIndex > 0 ? value.slice(0, dotIndex + 1) : ""; 460 460 - if (!prefix || prefix.split(".").filter(Boolean).length < 2) return; 461 461 - if (prefix === lastSuggestPrefix.current) return; 462 462 - suggestDebounceRef.current = setTimeout(async () => { 463 463 - lastSuggestPrefix.current = prefix; 464 464 - try { 465 465 - const res = await fetch(`/api/lexicons/suggest?prefix=${encodeURIComponent(prefix)}`); 466 466 - if (res.ok) { 467 467 - const data = await res.json(); 468 468 - setNsidSuggestions(data.suggestions ?? []); 469 469 - } 470 470 - } catch { 471 471 - // ignore 472 472 - } 473 473 - }, 300); 474 474 - }, []); 475 475 - 476 476 - if (!initialFetched.current && initialCollection) { 477 477 - initialFetched.current = true; 478 478 - fetchTargetSchema(initialCollection); 479 479 - } 480 480 - 481 481 - return { 482 482 - targetSchema, 483 483 - targetSchemaLoading, 484 484 - targetSchemaError, 485 485 - nsidSuggestions, 486 486 - datalistId, 487 487 - fetchTargetSchema, 488 488 - fetchSuggestions, 489 489 - }; 490 490 - } 491 491 - 492 492 - // --------------------------------------------------------------------------- 493 493 - // Record action editor 494 494 - // --------------------------------------------------------------------------- 495 495 - 496 496 - function RecordActionEditor({ 497 497 - action, 498 498 - index, 499 499 - onChange, 500 500 - placeholders, 501 501 - }: { 502 502 - action: RecordDraft; 503 503 - index: number; 504 504 - onChange: (a: RecordDraft) => void; 505 505 - placeholders: string[]; 506 506 - }) { 507 507 - const { 508 508 - targetSchema, 509 509 - targetSchemaLoading, 510 510 - targetSchemaError, 511 511 - nsidSuggestions, 512 512 - datalistId, 513 513 - fetchTargetSchema, 514 514 - fetchSuggestions, 515 515 - } = useNsidSchema(action.targetCollection); 516 516 - 517 517 - const targetId = `action-${index}-target-collection`; 518 518 - const templateId = `action-${index}-record-template`; 519 519 - 520 520 - return ( 521 521 - <> 522 522 - <div class={s.fieldGroup}> 523 523 - <label class={s.label} for={targetId}> 524 524 - Target Lexicon NSID 525 525 - </label> 526 526 - <input 527 527 - id={targetId} 528 528 - class={s.input} 529 529 - type="text" 530 530 - list={datalistId} 531 531 - placeholder="e.g. app.bsky.feed.like" 532 532 - value={action.targetCollection} 533 533 - onInput={(e: Event) => { 534 534 - const val = (e.target as HTMLInputElement).value; 535 535 - onChange({ ...action, targetCollection: val }); 536 536 - fetchTargetSchema(val); 537 537 - fetchSuggestions(val); 538 538 - }} 539 539 - required 540 540 - autocomplete="off" 541 541 - /> 542 542 - <span class={s.hint}>NSID of the collection to create a record in</span> 543 543 - <datalist id={datalistId}> 544 544 - {nsidSuggestions.map((nsid) => ( 545 545 - <option key={nsid} value={nsid} /> 546 546 - ))} 547 547 - </datalist> 548 548 - </div> 549 549 - 550 550 - {(targetSchema || targetSchemaLoading) && ( 551 551 - <RecordFormBuilder 552 552 - schema={targetSchema} 553 553 - loading={targetSchemaLoading} 554 554 - error={targetSchemaError} 555 555 - placeholders={placeholders} 556 556 - initialTemplate={action.recordTemplate || undefined} 557 557 - onChange={(tpl) => onChange({ ...action, recordTemplate: tpl })} 558 558 - /> 559 559 - )} 560 560 - 561 561 - {!targetSchema && !targetSchemaLoading && action.targetCollection && ( 562 562 - <div class={s.fieldGroup}> 563 563 - <label class={s.label} for={templateId}> 564 564 - Record template 565 565 - </label> 566 566 - {targetSchemaError && <span class={s.errorText}>{targetSchemaError}</span>} 567 567 - <textarea 568 568 - id={templateId} 569 569 - class={s.textarea} 570 570 - placeholder={ 571 571 - '{\n "subject": {\n "uri": "{{event.commit.record.subject.uri}}",\n "cid": "{{event.commit.cid}}"\n },\n "createdAt": "{{now}}"\n}' 572 572 - } 573 573 - value={action.recordTemplate} 574 574 - onInput={(e: Event) => 575 575 - onChange({ 576 576 - ...action, 577 577 - recordTemplate: (e.target as HTMLTextAreaElement).value, 578 578 - }) 579 579 - } 580 580 - required 581 581 - autocomplete="off" 582 582 - /> 583 583 - </div> 584 584 - )} 585 585 - </> 586 586 - ); 587 587 - } 588 588 - 589 589 - // --------------------------------------------------------------------------- 590 590 - // Bluesky Post action editor 591 591 - // --------------------------------------------------------------------------- 592 592 - 593 593 - const BSKY_LABELS = [ 594 594 - { value: "sexual", label: "Suggestive" }, 595 595 - { value: "nudity", label: "Nudity" }, 596 596 - { value: "porn", label: "Adult Content" }, 597 597 - { value: "graphic-media", label: "Graphic Media" }, 598 598 - ]; 599 599 - 600 600 - function BskyPostActionEditor({ 601 601 - action, 602 602 - index, 603 603 - onChange, 604 604 - }: { 605 605 - action: BskyPostDraft; 606 606 - index: number; 607 607 - onChange: (a: BskyPostDraft) => void; 608 608 - }) { 609 609 - const textId = `action-${index}-bsky-text`; 610 610 - const langsId = `action-${index}-bsky-langs`; 611 611 - 612 612 - return ( 613 613 - <> 614 614 - <div class={s.fieldGroup}> 615 615 - <label class={s.label} for={textId}> 616 616 - Post text 617 617 - </label> 618 618 - <textarea 619 619 - id={textId} 620 620 - class={s.textarea} 621 621 - placeholder={"Write your post here...\nYou can use {{placeholders}}."} 622 622 - value={action.textTemplate} 623 623 - onInput={(e: Event) => 624 624 - onChange({ ...action, textTemplate: (e.target as HTMLTextAreaElement).value }) 625 625 - } 626 626 - rows={4} 627 627 - required 628 628 - autocomplete="off" 629 629 - /> 630 630 - <span class={s.hint}> 631 631 - Mentions (@handle), links, and #hashtags are detected automatically. 632 632 - </span> 633 633 - </div> 634 634 - 635 635 - <div class={s.fieldGroup}> 636 636 - <label class={s.label} for={langsId}> 637 637 - Languages <span class={s.hint}>(optional, max 3)</span> 638 638 - </label> 639 639 - <input 640 640 - id={langsId} 641 641 - class={s.input} 642 642 - type="text" 643 643 - placeholder="e.g. en, fr, pt" 644 644 - value={action.langsText} 645 645 - onInput={(e: Event) => 646 646 - onChange({ ...action, langsText: (e.target as HTMLInputElement).value }) 647 647 - } 648 648 - autocomplete="off" 649 649 - /> 650 650 - <span class={s.hint}>Comma-separated language codes (BCP-47)</span> 651 651 - </div> 652 652 - 653 653 - <fieldset class={s.groupFieldset}> 654 654 - <legend class={s.groupLegend}> 655 655 - Content warnings <span class={s.hint}>(optional)</span> 656 656 - </legend> 657 657 - <div class={s.operationCheckboxes}> 658 658 - {BSKY_LABELS.map(({ value, label }) => ( 659 659 - <label key={value} class={s.checkboxLabel}> 660 660 - <input 661 661 - type="checkbox" 662 662 - class={s.checkbox} 663 663 - checked={action.labels.includes(value)} 664 664 - onChange={() => { 665 665 - const labels = action.labels.includes(value) 666 666 - ? action.labels.filter((l) => l !== value) 667 667 - : [...action.labels, value]; 668 668 - onChange({ ...action, labels }); 669 669 - }} 670 670 - /> 671 671 - {label} 672 672 - </label> 673 673 - ))} 674 674 - </div> 675 675 - </fieldset> 676 676 - </> 677 677 - ); 678 678 - } 679 679 - 680 680 - // --------------------------------------------------------------------------- 681 681 - // Patch Record action editor 682 682 - // --------------------------------------------------------------------------- 683 683 - 684 684 - function PatchRecordActionEditor({ 685 685 - action, 686 686 - index, 687 687 - onChange, 688 688 - placeholders, 689 689 - }: { 690 690 - action: PatchRecordDraft; 691 691 - index: number; 692 692 - onChange: (a: PatchRecordDraft) => void; 693 693 - placeholders: string[]; 694 694 - }) { 695 695 - const { 696 696 - targetSchema, 697 697 - targetSchemaLoading, 698 698 - targetSchemaError, 699 699 - nsidSuggestions, 700 700 - datalistId, 701 701 - fetchTargetSchema, 702 702 - fetchSuggestions, 703 703 - } = useNsidSchema(action.targetCollection); 704 704 - 705 705 - const targetId = `action-${index}-target-collection`; 706 706 - const baseUriId = `action-${index}-base-record-uri`; 707 707 - const templateId = `action-${index}-record-template`; 708 708 - 709 709 - return ( 710 710 - <> 711 711 - <div class={s.fieldGroup}> 712 712 - <label class={s.label} for={targetId}> 713 713 - Target Lexicon NSID 714 714 - </label> 715 715 - <input 716 716 - id={targetId} 717 717 - class={s.input} 718 718 - type="text" 719 719 - list={datalistId} 720 720 - placeholder="e.g. site.standard.document" 721 721 - value={action.targetCollection} 722 722 - onInput={(e: Event) => { 723 723 - const val = (e.target as HTMLInputElement).value; 724 724 - onChange({ ...action, targetCollection: val }); 725 725 - fetchTargetSchema(val); 726 726 - fetchSuggestions(val); 727 727 - }} 728 728 - required 729 729 - autocomplete="off" 730 730 - /> 731 731 - <span class={s.hint}>NSID of the collection containing the record to update</span> 732 732 - <datalist id={datalistId}> 733 733 - {nsidSuggestions.map((nsid) => ( 734 734 - <option key={nsid} value={nsid} /> 735 735 - ))} 736 736 - </datalist> 737 737 - </div> 738 738 - 739 739 - <div class={s.fieldGroup}> 740 740 - <label class={s.label} for={baseUriId}> 741 741 - Base Record URI 742 742 - </label> 743 743 - <input 744 744 - id={baseUriId} 745 745 - class={s.input} 746 746 - type="text" 747 747 - placeholder="e.g. {{event.commit.record.subject.uri}}" 748 748 - value={action.baseRecordUri} 749 749 - onInput={(e: Event) => 750 750 - onChange({ ...action, baseRecordUri: (e.target as HTMLInputElement).value }) 751 751 - } 752 752 - required 753 753 - autocomplete="off" 754 754 - /> 755 755 - <span class={s.hint}>AT URI of the record to update. Supports {"{{placeholders}}"}.</span> 756 756 - </div> 757 757 - 758 758 - {(targetSchema || targetSchemaLoading) && ( 759 759 - <RecordFormBuilder 760 760 - schema={targetSchema} 761 761 - loading={targetSchemaLoading} 762 762 - error={targetSchemaError} 763 763 - placeholders={placeholders} 764 764 - initialTemplate={action.recordTemplate || undefined} 765 765 - onChange={(tpl) => onChange({ ...action, recordTemplate: tpl })} 766 766 - patchMode 767 767 - /> 768 768 - )} 769 769 - 770 770 - {!targetSchema && !targetSchemaLoading && action.targetCollection && ( 771 771 - <div class={s.fieldGroup}> 772 772 - <label class={s.label} for={templateId}> 773 773 - Patch template 774 774 - </label> 775 775 - {targetSchemaError && <span class={s.errorText}>{targetSchemaError}</span>} 776 776 - <textarea 777 777 - id={templateId} 778 778 - class={s.textarea} 779 779 - placeholder={'{\n "bskyPostRef": "{{action1.uri}}",\n "updatedAt": "{{now}}"\n}'} 780 780 - value={action.recordTemplate} 781 781 - onInput={(e: Event) => 782 782 - onChange({ 783 783 - ...action, 784 784 - recordTemplate: (e.target as HTMLTextAreaElement).value, 785 785 - }) 786 786 - } 787 787 - required 788 788 - autocomplete="off" 789 789 - /> 790 790 - <span class={s.hint}> 791 791 - Only include the fields you want to change. They will be merged on top of the existing 792 792 - record. 793 793 - </span> 794 794 - </div> 795 795 - )} 796 796 - </> 797 797 - ); 798 798 - } 799 799 - 800 800 - // --------------------------------------------------------------------------- 801 801 - // Margin bookmark action editor 802 802 - // --------------------------------------------------------------------------- 803 803 - 804 804 - function MarginBookmarkActionEditor({ 805 805 - action, 806 806 - index, 807 807 - onChange, 808 808 - }: { 809 809 - action: MarginBookmarkDraft; 810 810 - index: number; 811 811 - onChange: (a: MarginBookmarkDraft) => void; 812 812 - }) { 813 813 - const urlId = `action-${index}-margin-bookmark-url`; 814 814 - const bodyId = `action-${index}-margin-bookmark-body`; 815 815 - const tagsId = `action-${index}-margin-bookmark-tags`; 816 816 - 817 817 - return ( 818 818 - <> 819 819 - <div class={s.fieldGroup}> 820 820 - <label class={s.label} for={urlId}> 821 821 - Page URL 822 822 - </label> 823 823 - <input 824 824 - id={urlId} 825 825 - class={s.input} 826 826 - type="text" 827 827 - placeholder="e.g. https://example.com or {{event.commit.record.subject.uri}}" 828 828 - value={action.targetSource} 829 829 - onInput={(e: Event) => 830 830 - onChange({ ...action, targetSource: (e.target as HTMLInputElement).value }) 831 831 - } 832 832 - required 833 833 - autocomplete="off" 834 834 - /> 835 835 - <span class={s.hint}> 836 836 - URL of the page to bookmark. Supports {"{{placeholders}}"}. The page title is fetched 837 837 - automatically. 838 838 - </span> 839 839 - </div> 840 840 - 841 841 - <div class={s.fieldGroup}> 842 842 - <label class={s.label} for={bodyId}> 843 843 - Description <span class={s.hint}>(optional)</span> 844 844 - </label> 845 845 - <textarea 846 846 - id={bodyId} 847 847 - class={s.textarea} 848 848 - placeholder="A short note about this bookmark" 849 849 - value={action.bodyValue} 850 850 - onInput={(e: Event) => 851 851 - onChange({ ...action, bodyValue: (e.target as HTMLTextAreaElement).value }) 852 852 - } 853 853 - rows={3} 854 854 - autocomplete="off" 855 855 - /> 856 856 - <span class={s.hint}>Bookmark description. Supports {"{{placeholders}}"}.</span> 857 857 - </div> 858 858 - 859 859 - <div class={s.fieldGroup}> 860 860 - <label class={s.label} for={tagsId}> 861 861 - Tags <span class={s.hint}>(optional, max 10)</span> 862 862 - </label> 863 863 - <input 864 864 - id={tagsId} 865 865 - class={s.input} 866 866 - type="text" 867 867 - placeholder="e.g. reading, research, bluesky" 868 868 - value={action.tagsText} 869 869 - onInput={(e: Event) => 870 870 - onChange({ ...action, tagsText: (e.target as HTMLInputElement).value }) 871 871 - } 872 872 - autocomplete="off" 873 873 - /> 874 874 - <span class={s.hint}>Comma-separated. Each tag supports {"{{placeholders}}"}.</span> 875 875 - </div> 876 876 - </> 877 877 - ); 878 878 - } 879 879 - 880 880 - // --------------------------------------------------------------------------- 881 881 - // Semble save action editor 882 882 - // --------------------------------------------------------------------------- 883 883 - 884 884 - function SembleSaveActionEditor({ 885 885 - action, 886 886 - index, 887 887 - onChange, 888 888 - }: { 889 889 - action: SembleSaveDraft; 890 890 - index: number; 891 891 - onChange: (a: SembleSaveDraft) => void; 892 892 - }) { 893 893 - const urlId = `action-${index}-semble-url`; 894 894 - return ( 895 895 - <div class={s.fieldGroup}> 896 896 - <label class={s.label} for={urlId}> 897 897 - Page URL 898 898 - </label> 899 899 - <input 900 900 - id={urlId} 901 901 - class={s.input} 902 902 - type="text" 903 903 - placeholder="e.g. https://example.com or {{event.commit.record.subject.uri}}" 904 904 - value={action.url} 905 905 - onInput={(e: Event) => onChange({ ...action, url: (e.target as HTMLInputElement).value })} 906 906 - required 907 907 - autocomplete="off" 908 908 - /> 909 909 - <span class={s.hint}> 910 910 - URL of the page to save. Metadata (title, description, image) will be fetched automatically. 911 911 - Supports {"{{placeholders}}"}. 912 912 - </span> 913 913 - </div> 914 914 - ); 915 915 - } 916 916 - 917 917 - // --------------------------------------------------------------------------- 918 918 - // Follow (social graph) action editor, shared across bluesky / tangled / sifa 919 919 - // --------------------------------------------------------------------------- 920 920 - 921 921 - function FollowActionEditor({ 922 922 - action, 923 923 - index, 924 924 - onChange, 925 925 - }: { 926 926 - action: FollowDraft; 927 927 - index: number; 928 928 - onChange: (a: FollowDraft) => void; 929 929 - }) { 930 930 - const meta = FOLLOW_TARGETS[action.target]; 931 931 - const subjectId = `action-${index}-follow-subject`; 932 932 - return ( 933 933 - <> 934 934 - <div class={s.fieldGroup}> 935 935 - <label class={s.label} for={subjectId}> 936 936 - Subject DID 937 937 - </label> 938 938 - <input 939 939 - id={subjectId} 940 940 - class={s.input} 941 941 - type="text" 942 942 - placeholder="e.g. did:plc:... or {{event.did}}" 943 943 - value={action.subject} 944 944 - onInput={(e: Event) => 945 945 - onChange({ ...action, subject: (e.target as HTMLInputElement).value }) 946 946 - } 947 947 - required 948 948 - autocomplete="off" 949 949 - /> 950 950 - <span class={s.hint}> 951 951 - DID of the account to follow on {meta.appName}. Supports {"{{placeholders}}"} like{" "} 952 952 - {"{{event.did}}"} or {"{{event.commit.record.subject}}"}. 953 953 - <br /> 954 954 - Automatically checks that the subject has a {meta.appName} profile and that you don't 955 955 - already follow them. No extra conditions needed. 956 956 - </span> 957 957 - </div> 958 958 - </> 959 959 - ); 960 960 - } 961 961 - 962 962 - // --------------------------------------------------------------------------- 963 247 // Copy-to-clipboard placeholder 964 248 // --------------------------------------------------------------------------- 965 249 ··· 1232 516 1233 517 function toActionDrafts(actions: Action[]): ActionDraft[] { 1234 518 return actions.map((a) => { 519 519 + const draft = ACTION_UI_REGISTRY[a.$type].fromAction(a); 1235 520 const forEach = toForEachDraft(a.forEach); 1236 1236 - const forEachField = forEach ? { forEach } : {}; 1237 1237 - if (a.$type === "webhook") { 1238 1238 - const headers: HeaderDraft[] = a.headers 1239 1239 - ? Object.entries(a.headers).map(([key, value]) => ({ key, value })) 1240 1240 - : []; 1241 1241 - return { 1242 1242 - type: "webhook", 1243 1243 - callbackUrl: a.callbackUrl, 1244 1244 - headers, 1245 1245 - comment: a.comment ?? "", 1246 1246 - ...forEachField, 1247 1247 - }; 1248 1248 - } 1249 1249 - if (a.$type === "bsky-post") { 1250 1250 - return { 1251 1251 - type: "bsky-post", 1252 1252 - textTemplate: a.textTemplate, 1253 1253 - langsText: (a.langs ?? []).join(", "), 1254 1254 - labels: a.labels ?? [], 1255 1255 - comment: a.comment ?? "", 1256 1256 - ...forEachField, 1257 1257 - }; 1258 1258 - } 1259 1259 - if (a.$type === "patch-record") { 1260 1260 - return { 1261 1261 - type: "patch-record", 1262 1262 - targetCollection: a.targetCollection, 1263 1263 - baseRecordUri: a.baseRecordUri, 1264 1264 - recordTemplate: a.recordTemplate, 1265 1265 - comment: a.comment ?? "", 1266 1266 - ...forEachField, 1267 1267 - }; 1268 1268 - } 1269 1269 - if (a.$type === "margin-bookmark") { 1270 1270 - return { 1271 1271 - type: "margin-bookmark", 1272 1272 - targetSource: a.targetSource, 1273 1273 - bodyValue: a.bodyValue ?? "", 1274 1274 - tagsText: (a.tags ?? []).join(", "), 1275 1275 - comment: a.comment ?? "", 1276 1276 - ...forEachField, 1277 1277 - }; 1278 1278 - } 1279 1279 - if (a.$type === "semble-save") { 1280 1280 - return { 1281 1281 - type: "semble-save", 1282 1282 - url: a.url, 1283 1283 - comment: a.comment ?? "", 1284 1284 - ...forEachField, 1285 1285 - }; 1286 1286 - } 1287 1287 - if (a.$type === "follow") { 1288 1288 - return { 1289 1289 - type: "follow", 1290 1290 - target: a.target, 1291 1291 - subject: a.subject, 1292 1292 - comment: a.comment ?? "", 1293 1293 - ...forEachField, 1294 1294 - }; 1295 1295 - } 1296 1296 - return { 1297 1297 - type: "record", 1298 1298 - targetCollection: a.targetCollection, 1299 1299 - recordTemplate: a.recordTemplate, 1300 1300 - comment: a.comment ?? "", 1301 1301 - ...forEachField, 1302 1302 - }; 521 521 + return forEach ? { ...draft, forEach } : draft; 1303 522 }); 1304 523 } 1305 524 ··· 1809 1028 [], 1810 1029 ); 1811 1030 1812 1812 - const addAction = useCallback((type: AddableActionId) => { 1813 1813 - if (type === "webhook") { 1814 1814 - setActions((prev) => [ 1815 1815 - ...prev, 1816 1816 - { type: "webhook", callbackUrl: "", headers: [], comment: "" }, 1817 1817 - ]); 1818 1818 - } else if (type === "bsky-post") { 1819 1819 - setActions((prev) => [ 1820 1820 - ...prev, 1821 1821 - { type: "bsky-post", textTemplate: "", langsText: "", labels: [], comment: "" }, 1822 1822 - ]); 1823 1823 - } else if (type === "patch-record") { 1824 1824 - setActions((prev) => [ 1825 1825 - ...prev, 1826 1826 - { 1827 1827 - type: "patch-record", 1828 1828 - targetCollection: "", 1829 1829 - baseRecordUri: "", 1830 1830 - recordTemplate: "", 1831 1831 - comment: "", 1832 1832 - }, 1833 1833 - ]); 1834 1834 - } else if (type === "margin-bookmark") { 1835 1835 - setActions((prev) => [ 1836 1836 - ...prev, 1837 1837 - { 1838 1838 - type: "margin-bookmark", 1839 1839 - targetSource: "", 1840 1840 - bodyValue: "", 1841 1841 - tagsText: "", 1842 1842 - comment: "", 1843 1843 - }, 1844 1844 - ]); 1845 1845 - } else if (type === "semble-save") { 1846 1846 - setActions((prev) => [...prev, { type: "semble-save", url: "", comment: "" }]); 1847 1847 - } else if (type.startsWith("follow-")) { 1848 1848 - const target = type.slice("follow-".length) as FollowTarget; 1849 1849 - setActions((prev) => [ 1850 1850 - ...prev, 1851 1851 - { type: "follow", target, subject: "{{event.commit.record.subject}}", comment: "" }, 1852 1852 - ]); 1853 1853 - } else { 1854 1854 - setActions((prev) => [ 1855 1855 - ...prev, 1856 1856 - { type: "record", targetCollection: "", recordTemplate: "", comment: "" }, 1857 1857 - ]); 1858 1858 - } 1031 1031 + const addAction = useCallback((id: AddableActionId) => { 1032 1032 + // Tile ids and action $types diverge for follow only — picker exposes one 1033 1033 + // tile per FOLLOW_TARGETS entry, but they all share the `follow` $type. 1034 1034 + const isFollow = id.startsWith("follow-"); 1035 1035 + const $type = (isFollow ? "follow" : id) as keyof typeof ACTION_UI_REGISTRY; 1036 1036 + const followTarget = isFollow ? (id.slice("follow-".length) as FollowTarget) : undefined; 1037 1037 + const draft = ACTION_UI_REGISTRY[$type].newDraft({ followTarget }); 1038 1038 + setActions((prev) => [...prev, draft]); 1859 1039 }, []); 1860 1040 1861 1041 const removeAction = useCallback((index: number) => { ··· 1882 1062 payload.wantedDids = trimmedWantedDids; 1883 1063 } 1884 1064 payload.actions = actions.map((a) => { 1885 1885 - const comment = a.comment ? { comment: a.comment } : {}; 1065 1065 + const input = ACTION_UI_REGISTRY[a.type].toInput(a); 1886 1066 const forEach = forEachToPayload(a.forEach); 1887 1887 - const forEachField = forEach ? { forEach } : {}; 1888 1888 - if (a.type === "webhook") { 1889 1889 - const filtered = a.headers.filter((h) => h.key.trim() && h.value.trim()); 1890 1890 - const headers = 1891 1891 - filtered.length > 0 1892 1892 - ? Object.fromEntries(filtered.map((h) => [h.key.trim(), h.value.trim()])) 1893 1893 - : undefined; 1894 1894 - return { 1895 1895 - type: "webhook", 1896 1896 - callbackUrl: a.callbackUrl, 1897 1897 - ...(headers ? { headers } : {}), 1898 1898 - ...forEachField, 1899 1899 - ...comment, 1900 1900 - }; 1901 1901 - } 1902 1902 - if (a.type === "bsky-post") { 1903 1903 - const langs = a.langsText 1904 1904 - .split(",") 1905 1905 - .map((l) => l.trim()) 1906 1906 - .filter(Boolean); 1907 1907 - return { 1908 1908 - type: "bsky-post", 1909 1909 - textTemplate: a.textTemplate, 1910 1910 - ...(langs.length > 0 ? { langs } : {}), 1911 1911 - ...(a.labels.length > 0 ? { labels: a.labels } : {}), 1912 1912 - ...forEachField, 1913 1913 - ...comment, 1914 1914 - }; 1915 1915 - } 1916 1916 - if (a.type === "patch-record") { 1917 1917 - return { 1918 1918 - type: "patch-record", 1919 1919 - targetCollection: a.targetCollection, 1920 1920 - baseRecordUri: a.baseRecordUri, 1921 1921 - recordTemplate: a.recordTemplate, 1922 1922 - ...forEachField, 1923 1923 - ...comment, 1924 1924 - }; 1925 1925 - } 1926 1926 - if (a.type === "margin-bookmark") { 1927 1927 - const bodyValue = a.bodyValue.trim(); 1928 1928 - const tags = a.tagsText 1929 1929 - .split(",") 1930 1930 - .map((t) => t.trim()) 1931 1931 - .filter(Boolean) 1932 1932 - .slice(0, 10); 1933 1933 - return { 1934 1934 - type: "margin-bookmark", 1935 1935 - targetSource: a.targetSource, 1936 1936 - ...(bodyValue ? { bodyValue } : {}), 1937 1937 - ...(tags.length > 0 ? { tags } : {}), 1938 1938 - ...forEachField, 1939 1939 - ...comment, 1940 1940 - }; 1941 1941 - } 1942 1942 - if (a.type === "semble-save") { 1943 1943 - return { 1944 1944 - type: "semble-save", 1945 1945 - url: a.url, 1946 1946 - ...forEachField, 1947 1947 - ...comment, 1948 1948 - }; 1949 1949 - } 1950 1950 - if (a.type === "follow") { 1951 1951 - return { 1952 1952 - type: "follow", 1953 1953 - target: a.target, 1954 1954 - subject: a.subject, 1955 1955 - ...forEachField, 1956 1956 - ...comment, 1957 1957 - }; 1958 1958 - } 1959 1067 return { 1960 1960 - type: "record", 1961 1961 - targetCollection: a.targetCollection, 1962 1962 - recordTemplate: a.recordTemplate, 1963 1963 - ...forEachField, 1964 1964 - ...comment, 1068 1068 + ...input, 1069 1069 + ...(forEach ? { forEach } : {}), 1070 1070 + ...(a.comment ? { comment: a.comment } : {}), 1965 1071 }; 1966 1072 }); 1967 1073 return JSON.stringify(payload, null, 2); ··· 3002 2108 arrayPathSuggestions={arrayPathSuggestions} 3003 2109 itemFieldsByPath={itemFieldsByPath} 3004 2110 /> 3005 3005 - {action.type === "webhook" ? ( 3006 3006 - <WebhookActionEditor 3007 3007 - action={action} 3008 3008 - index={i} 3009 3009 - onChange={(a) => updateAction(i, a)} 3010 3010 - /> 3011 3011 - ) : action.type === "bsky-post" ? ( 3012 3012 - <BskyPostActionEditor 3013 3013 - action={action} 3014 3014 - index={i} 3015 3015 - onChange={(a) => updateAction(i, a)} 3016 3016 - /> 3017 3017 - ) : action.type === "patch-record" ? ( 3018 3018 - <PatchRecordActionEditor 3019 3019 - action={action} 3020 3020 - index={i} 3021 3021 - onChange={(a) => updateAction(i, a)} 3022 3022 - placeholders={allPlaceholders} 3023 3023 - /> 3024 3024 - ) : action.type === "margin-bookmark" ? ( 3025 3025 - <MarginBookmarkActionEditor 3026 3026 - action={action} 3027 3027 - index={i} 3028 3028 - onChange={(a) => updateAction(i, a)} 3029 3029 - /> 3030 3030 - ) : action.type === "semble-save" ? ( 3031 3031 - <SembleSaveActionEditor 3032 3032 - action={action} 3033 3033 - index={i} 3034 3034 - onChange={(a) => updateAction(i, a)} 3035 3035 - /> 3036 3036 - ) : action.type === "follow" ? ( 3037 3037 - <FollowActionEditor 3038 3038 - action={action} 3039 3039 - index={i} 3040 3040 - onChange={(a) => updateAction(i, a)} 3041 3041 - /> 3042 3042 - ) : ( 3043 3043 - <RecordActionEditor 3044 3044 - action={action} 3045 3045 - index={i} 3046 3046 - onChange={(a) => updateAction(i, a)} 3047 3047 - placeholders={allPlaceholders} 3048 3048 - /> 3049 3049 - )} 2111 2111 + {(() => { 2112 2112 + const EditorBlock = ACTION_UI_REGISTRY[action.type].EditorBlock; 2113 2113 + return ( 2114 2114 + <EditorBlock 2115 2115 + action={action} 2116 2116 + index={i} 2117 2117 + onChange={(a) => updateAction(i, a)} 2118 2118 + placeholders={allPlaceholders} 2119 2119 + /> 2120 2120 + ); 2121 2121 + })()} 3050 2122 <div class={s.fieldGroup}> 3051 2123 <label class={s.label} for={`action-${i}-note`}> 3052 2124 Note <span class={s.hint}>(optional)</span>

+139

app/islands/action-editors/bsky-post.tsx

reviewed

··· 1 1 + import type { BskyPostAction } from "../../../lib/db/schema.js"; 2 2 + import { MessageSquare } from "../../icons.ts"; 3 3 + import * as s from "../AutomationForm.css.ts"; 4 4 + import type { ActionUIDefinition, ForEachDraft } from "./types.ts"; 5 5 + 6 6 + const BSKY_LABELS = [ 7 7 + { value: "sexual", label: "Suggestive" }, 8 8 + { value: "nudity", label: "Nudity" }, 9 9 + { value: "porn", label: "Porn" }, 10 10 + { value: "graphic-media", label: "Graphic media" }, 11 11 + ]; 12 12 + 13 13 + export type BskyPostDraft = { 14 14 + type: "bsky-post"; 15 15 + textTemplate: string; 16 16 + langsText: string; 17 17 + labels: string[]; 18 18 + comment: string; 19 19 + forEach?: ForEachDraft; 20 20 + }; 21 21 + 22 22 + function BskyPostActionEditor({ 23 23 + action, 24 24 + index, 25 25 + onChange, 26 26 + }: { 27 27 + action: BskyPostDraft; 28 28 + index: number; 29 29 + onChange: (a: BskyPostDraft) => void; 30 30 + }) { 31 31 + const textId = `action-${index}-bsky-text`; 32 32 + const langsId = `action-${index}-bsky-langs`; 33 33 + 34 34 + return ( 35 35 + <> 36 36 + <div class={s.fieldGroup}> 37 37 + <label class={s.label} for={textId}> 38 38 + Post text 39 39 + </label> 40 40 + <textarea 41 41 + id={textId} 42 42 + class={s.textarea} 43 43 + placeholder={"Write your post here...\nYou can use {{placeholders}}."} 44 44 + value={action.textTemplate} 45 45 + onInput={(e: Event) => 46 46 + onChange({ ...action, textTemplate: (e.target as HTMLTextAreaElement).value }) 47 47 + } 48 48 + rows={4} 49 49 + required 50 50 + autocomplete="off" 51 51 + /> 52 52 + <span class={s.hint}> 53 53 + Mentions (@handle), links, and #hashtags are detected automatically. 54 54 + </span> 55 55 + </div> 56 56 + 57 57 + <div class={s.fieldGroup}> 58 58 + <label class={s.label} for={langsId}> 59 59 + Languages <span class={s.hint}>(optional, max 3)</span> 60 60 + </label> 61 61 + <input 62 62 + id={langsId} 63 63 + class={s.input} 64 64 + type="text" 65 65 + placeholder="e.g. en, fr, pt" 66 66 + value={action.langsText} 67 67 + onInput={(e: Event) => 68 68 + onChange({ ...action, langsText: (e.target as HTMLInputElement).value }) 69 69 + } 70 70 + autocomplete="off" 71 71 + /> 72 72 + <span class={s.hint}>Comma-separated language codes (BCP-47)</span> 73 73 + </div> 74 74 + 75 75 + <fieldset class={s.groupFieldset}> 76 76 + <legend class={s.groupLegend}> 77 77 + Content warnings <span class={s.hint}>(optional)</span> 78 78 + </legend> 79 79 + <div class={s.operationCheckboxes}> 80 80 + {BSKY_LABELS.map(({ value, label }) => ( 81 81 + <label key={value} class={s.checkboxLabel}> 82 82 + <input 83 83 + type="checkbox" 84 84 + class={s.checkbox} 85 85 + checked={action.labels.includes(value)} 86 86 + onChange={() => { 87 87 + const labels = action.labels.includes(value) 88 88 + ? action.labels.filter((l) => l !== value) 89 89 + : [...action.labels, value]; 90 90 + onChange({ ...action, labels }); 91 91 + }} 92 92 + /> 93 93 + {label} 94 94 + </label> 95 95 + ))} 96 96 + </div> 97 97 + </fieldset> 98 98 + </> 99 99 + ); 100 100 + } 101 101 + 102 102 + export const bskyPostUiDefinition: ActionUIDefinition<BskyPostDraft, BskyPostAction> = { 103 103 + type: "bsky-post", 104 104 + recordProducing: true, 105 105 + catalogue: { 106 106 + label: "Post to Bluesky", 107 107 + description: "Publish a post to your Bluesky account", 108 108 + category: "bluesky", 109 109 + icon: MessageSquare, 110 110 + available: true, 111 111 + }, 112 112 + newDraft: () => ({ 113 113 + type: "bsky-post", 114 114 + textTemplate: "", 115 115 + langsText: "", 116 116 + labels: [], 117 117 + comment: "", 118 118 + }), 119 119 + fromAction: (a) => ({ 120 120 + type: "bsky-post", 121 121 + textTemplate: a.textTemplate, 122 122 + langsText: (a.langs ?? []).join(", "), 123 123 + labels: a.labels ?? [], 124 124 + comment: a.comment ?? "", 125 125 + }), 126 126 + toInput: (d) => { 127 127 + const langs = d.langsText 128 128 + .split(",") 129 129 + .map((l) => l.trim()) 130 130 + .filter(Boolean); 131 131 + return { 132 132 + type: "bsky-post", 133 133 + textTemplate: d.textTemplate, 134 134 + ...(langs.length > 0 ? { langs } : {}), 135 135 + ...(d.labels.length > 0 ? { labels: d.labels } : {}), 136 136 + }; 137 137 + }, 138 138 + EditorBlock: BskyPostActionEditor, 139 139 + };

+72

app/islands/action-editors/follow.tsx

reviewed

··· 1 1 + import type { FollowAction, FollowTarget } from "../../../lib/db/schema.js"; 2 2 + import { FOLLOW_TARGETS } from "../../../lib/automations/follow-targets.js"; 3 3 + import * as s from "../AutomationForm.css.ts"; 4 4 + import type { ActionUIDefinition, ForEachDraft } from "./types.ts"; 5 5 + 6 6 + export type FollowDraft = { 7 7 + type: "follow"; 8 8 + target: FollowTarget; 9 9 + subject: string; 10 10 + comment: string; 11 11 + forEach?: ForEachDraft; 12 12 + }; 13 13 + 14 14 + function FollowActionEditor({ 15 15 + action, 16 16 + index, 17 17 + onChange, 18 18 + }: { 19 19 + action: FollowDraft; 20 20 + index: number; 21 21 + onChange: (a: FollowDraft) => void; 22 22 + }) { 23 23 + const meta = FOLLOW_TARGETS[action.target]; 24 24 + const subjectId = `action-${index}-follow-subject`; 25 25 + return ( 26 26 + <> 27 27 + <div class={s.fieldGroup}> 28 28 + <label class={s.label} for={subjectId}> 29 29 + Subject DID 30 30 + </label> 31 31 + <input 32 32 + id={subjectId} 33 33 + class={s.input} 34 34 + type="text" 35 35 + placeholder="e.g. did:plc:... or {{event.did}}" 36 36 + value={action.subject} 37 37 + onInput={(e: Event) => 38 38 + onChange({ ...action, subject: (e.target as HTMLInputElement).value }) 39 39 + } 40 40 + required 41 41 + autocomplete="off" 42 42 + /> 43 43 + <span class={s.hint}> 44 44 + DID of the account to follow on {meta.appName}. Supports {"{{placeholders}}"} like{" "} 45 45 + {"{{event.did}}"} or {"{{event.commit.record.subject}}"}. 46 46 + <br /> 47 47 + Automatically checks that the subject has a {meta.appName} profile and that you don't 48 48 + already follow them. No extra conditions needed. 49 49 + </span> 50 50 + </div> 51 51 + </> 52 52 + ); 53 53 + } 54 54 + 55 55 + export const followUiDefinition: ActionUIDefinition<FollowDraft, FollowAction> = { 56 56 + type: "follow", 57 57 + recordProducing: true, 58 58 + newDraft: ({ followTarget }) => ({ 59 59 + type: "follow", 60 60 + target: followTarget ?? "bluesky", 61 61 + subject: "{{event.commit.record.subject}}", 62 62 + comment: "", 63 63 + }), 64 64 + fromAction: (a) => ({ 65 65 + type: "follow", 66 66 + target: a.target, 67 67 + subject: a.subject, 68 68 + comment: a.comment ?? "", 69 69 + }), 70 70 + toInput: (d) => ({ type: "follow", target: d.target, subject: d.subject }), 71 71 + EditorBlock: FollowActionEditor, 72 72 + };

+134

app/islands/action-editors/margin-bookmark.tsx

reviewed

··· 1 1 + import type { MarginBookmarkAction } from "../../../lib/db/schema.js"; 2 2 + import { Bookmark } from "../../icons.ts"; 3 3 + import * as s from "../AutomationForm.css.ts"; 4 4 + import type { ActionUIDefinition, ForEachDraft } from "./types.ts"; 5 5 + 6 6 + export type MarginBookmarkDraft = { 7 7 + type: "margin-bookmark"; 8 8 + targetSource: string; 9 9 + bodyValue: string; 10 10 + tagsText: string; 11 11 + comment: string; 12 12 + forEach?: ForEachDraft; 13 13 + }; 14 14 + 15 15 + function MarginBookmarkActionEditor({ 16 16 + action, 17 17 + index, 18 18 + onChange, 19 19 + }: { 20 20 + action: MarginBookmarkDraft; 21 21 + index: number; 22 22 + onChange: (a: MarginBookmarkDraft) => void; 23 23 + }) { 24 24 + const urlId = `action-${index}-margin-bookmark-url`; 25 25 + const bodyId = `action-${index}-margin-bookmark-body`; 26 26 + const tagsId = `action-${index}-margin-bookmark-tags`; 27 27 + 28 28 + return ( 29 29 + <> 30 30 + <div class={s.fieldGroup}> 31 31 + <label class={s.label} for={urlId}> 32 32 + Page URL 33 33 + </label> 34 34 + <input 35 35 + id={urlId} 36 36 + class={s.input} 37 37 + type="text" 38 38 + placeholder="e.g. https://example.com or {{event.commit.record.subject.uri}}" 39 39 + value={action.targetSource} 40 40 + onInput={(e: Event) => 41 41 + onChange({ ...action, targetSource: (e.target as HTMLInputElement).value }) 42 42 + } 43 43 + required 44 44 + autocomplete="off" 45 45 + /> 46 46 + <span class={s.hint}> 47 47 + URL of the page to bookmark. Supports {"{{placeholders}}"}. The page title is fetched 48 48 + automatically. 49 49 + </span> 50 50 + </div> 51 51 + 52 52 + <div class={s.fieldGroup}> 53 53 + <label class={s.label} for={bodyId}> 54 54 + Description <span class={s.hint}>(optional)</span> 55 55 + </label> 56 56 + <textarea 57 57 + id={bodyId} 58 58 + class={s.textarea} 59 59 + placeholder="A short note about this bookmark" 60 60 + value={action.bodyValue} 61 61 + onInput={(e: Event) => 62 62 + onChange({ ...action, bodyValue: (e.target as HTMLTextAreaElement).value }) 63 63 + } 64 64 + rows={3} 65 65 + autocomplete="off" 66 66 + /> 67 67 + <span class={s.hint}>Bookmark description. Supports {"{{placeholders}}"}.</span> 68 68 + </div> 69 69 + 70 70 + <div class={s.fieldGroup}> 71 71 + <label class={s.label} for={tagsId}> 72 72 + Tags <span class={s.hint}>(optional, max 10)</span> 73 73 + </label> 74 74 + <input 75 75 + id={tagsId} 76 76 + class={s.input} 77 77 + type="text" 78 78 + placeholder="e.g. reading, research, bluesky" 79 79 + value={action.tagsText} 80 80 + onInput={(e: Event) => 81 81 + onChange({ ...action, tagsText: (e.target as HTMLInputElement).value }) 82 82 + } 83 83 + autocomplete="off" 84 84 + /> 85 85 + <span class={s.hint}>Comma-separated. Each tag supports {"{{placeholders}}"}.</span> 86 86 + </div> 87 87 + </> 88 88 + ); 89 89 + } 90 90 + 91 91 + export const marginBookmarkUiDefinition: ActionUIDefinition< 92 92 + MarginBookmarkDraft, 93 93 + MarginBookmarkAction 94 94 + > = { 95 95 + type: "margin-bookmark", 96 96 + recordProducing: true, 97 97 + catalogue: { 98 98 + label: "Bookmark on Margin", 99 99 + description: "Create a bookmark note in Margin.at", 100 100 + category: "apps", 101 101 + icon: Bookmark, 102 102 + available: true, 103 103 + faviconDomain: "margin.at", 104 104 + }, 105 105 + newDraft: () => ({ 106 106 + type: "margin-bookmark", 107 107 + targetSource: "", 108 108 + bodyValue: "", 109 109 + tagsText: "", 110 110 + comment: "", 111 111 + }), 112 112 + fromAction: (a) => ({ 113 113 + type: "margin-bookmark", 114 114 + targetSource: a.targetSource, 115 115 + bodyValue: a.bodyValue ?? "", 116 116 + tagsText: (a.tags ?? []).join(", "), 117 117 + comment: a.comment ?? "", 118 118 + }), 119 119 + toInput: (d) => { 120 120 + const bodyValue = d.bodyValue.trim(); 121 121 + const tags = d.tagsText 122 122 + .split(",") 123 123 + .map((t) => t.trim()) 124 124 + .filter(Boolean) 125 125 + .slice(0, 10); 126 126 + return { 127 127 + type: "margin-bookmark", 128 128 + targetSource: d.targetSource, 129 129 + ...(bodyValue ? { bodyValue } : {}), 130 130 + ...(tags.length > 0 ? { tags } : {}), 131 131 + }; 132 132 + }, 133 133 + EditorBlock: MarginBookmarkActionEditor, 134 134 + };

+159

app/islands/action-editors/patch-record.tsx

reviewed

··· 1 1 + import type { PatchRecordAction } from "../../../lib/db/schema.js"; 2 2 + import { Pencil } from "../../icons.ts"; 3 3 + import * as s from "../AutomationForm.css.ts"; 4 4 + import RecordFormBuilder from "../RecordFormBuilder.js"; 5 5 + import { useNsidSchema } from "./use-nsid-schema.ts"; 6 6 + import type { ActionUIDefinition, EditorBlockProps, ForEachDraft } from "./types.ts"; 7 7 + 8 8 + export type PatchRecordDraft = { 9 9 + type: "patch-record"; 10 10 + targetCollection: string; 11 11 + baseRecordUri: string; 12 12 + recordTemplate: string; 13 13 + comment: string; 14 14 + forEach?: ForEachDraft; 15 15 + }; 16 16 + 17 17 + function PatchRecordActionEditor({ 18 18 + action, 19 19 + index, 20 20 + onChange, 21 21 + placeholders, 22 22 + }: EditorBlockProps<PatchRecordDraft>) { 23 23 + const { 24 24 + targetSchema, 25 25 + targetSchemaLoading, 26 26 + targetSchemaError, 27 27 + nsidSuggestions, 28 28 + datalistId, 29 29 + fetchTargetSchema, 30 30 + fetchSuggestions, 31 31 + } = useNsidSchema(action.targetCollection); 32 32 + 33 33 + const targetId = `action-${index}-target-collection`; 34 34 + const baseUriId = `action-${index}-base-record-uri`; 35 35 + const templateId = `action-${index}-record-template`; 36 36 + 37 37 + return ( 38 38 + <> 39 39 + <div class={s.fieldGroup}> 40 40 + <label class={s.label} for={targetId}> 41 41 + Target Lexicon NSID 42 42 + </label> 43 43 + <input 44 44 + id={targetId} 45 45 + class={s.input} 46 46 + type="text" 47 47 + list={datalistId} 48 48 + placeholder="e.g. site.standard.document" 49 49 + value={action.targetCollection} 50 50 + onInput={(e: Event) => { 51 51 + const val = (e.target as HTMLInputElement).value; 52 52 + onChange({ ...action, targetCollection: val }); 53 53 + fetchTargetSchema(val); 54 54 + fetchSuggestions(val); 55 55 + }} 56 56 + required 57 57 + autocomplete="off" 58 58 + /> 59 59 + <span class={s.hint}>NSID of the collection containing the record to update</span> 60 60 + <datalist id={datalistId}> 61 61 + {nsidSuggestions.map((nsid) => ( 62 62 + <option key={nsid} value={nsid} /> 63 63 + ))} 64 64 + </datalist> 65 65 + </div> 66 66 + 67 67 + <div class={s.fieldGroup}> 68 68 + <label class={s.label} for={baseUriId}> 69 69 + Base Record URI 70 70 + </label> 71 71 + <input 72 72 + id={baseUriId} 73 73 + class={s.input} 74 74 + type="text" 75 75 + placeholder="e.g. {{event.commit.record.subject.uri}}" 76 76 + value={action.baseRecordUri} 77 77 + onInput={(e: Event) => 78 78 + onChange({ ...action, baseRecordUri: (e.target as HTMLInputElement).value }) 79 79 + } 80 80 + required 81 81 + autocomplete="off" 82 82 + /> 83 83 + <span class={s.hint}>AT URI of the record to update. Supports {"{{placeholders}}"}.</span> 84 84 + </div> 85 85 + 86 86 + {(targetSchema || targetSchemaLoading) && ( 87 87 + <RecordFormBuilder 88 88 + schema={targetSchema} 89 89 + loading={targetSchemaLoading} 90 90 + error={targetSchemaError} 91 91 + placeholders={placeholders} 92 92 + initialTemplate={action.recordTemplate || undefined} 93 93 + onChange={(tpl) => onChange({ ...action, recordTemplate: tpl })} 94 94 + patchMode 95 95 + /> 96 96 + )} 97 97 + 98 98 + {!targetSchema && !targetSchemaLoading && action.targetCollection && ( 99 99 + <div class={s.fieldGroup}> 100 100 + <label class={s.label} for={templateId}> 101 101 + Patch template 102 102 + </label> 103 103 + {targetSchemaError && <span class={s.errorText}>{targetSchemaError}</span>} 104 104 + <textarea 105 105 + id={templateId} 106 106 + class={s.textarea} 107 107 + placeholder={'{\n "bskyPostRef": "{{action1.uri}}",\n "updatedAt": "{{now}}"\n}'} 108 108 + value={action.recordTemplate} 109 109 + onInput={(e: Event) => 110 110 + onChange({ 111 111 + ...action, 112 112 + recordTemplate: (e.target as HTMLTextAreaElement).value, 113 113 + }) 114 114 + } 115 115 + required 116 116 + autocomplete="off" 117 117 + /> 118 118 + <span class={s.hint}> 119 119 + Only include the fields you want to change. They will be merged on top of the existing 120 120 + record. 121 121 + </span> 122 122 + </div> 123 123 + )} 124 124 + </> 125 125 + ); 126 126 + } 127 127 + 128 128 + export const patchRecordUiDefinition: ActionUIDefinition<PatchRecordDraft, PatchRecordAction> = { 129 129 + type: "patch-record", 130 130 + recordProducing: true, 131 131 + catalogue: { 132 132 + label: "Update a record", 133 133 + description: "Modify fields of an existing record", 134 134 + category: "pds", 135 135 + icon: Pencil, 136 136 + available: true, 137 137 + }, 138 138 + newDraft: () => ({ 139 139 + type: "patch-record", 140 140 + targetCollection: "", 141 141 + baseRecordUri: "", 142 142 + recordTemplate: "", 143 143 + comment: "", 144 144 + }), 145 145 + fromAction: (a) => ({ 146 146 + type: "patch-record", 147 147 + targetCollection: a.targetCollection, 148 148 + baseRecordUri: a.baseRecordUri, 149 149 + recordTemplate: a.recordTemplate, 150 150 + comment: a.comment ?? "", 151 151 + }), 152 152 + toInput: (d) => ({ 153 153 + type: "patch-record", 154 154 + targetCollection: d.targetCollection, 155 155 + baseRecordUri: d.baseRecordUri, 156 156 + recordTemplate: d.recordTemplate, 157 157 + }), 158 158 + EditorBlock: PatchRecordActionEditor, 159 159 + };

+127

app/islands/action-editors/record.tsx

reviewed

··· 1 1 + import type { RecordAction } from "../../../lib/db/schema.js"; 2 2 + import { FilePlus2 } from "../../icons.ts"; 3 3 + import * as s from "../AutomationForm.css.ts"; 4 4 + import RecordFormBuilder from "../RecordFormBuilder.js"; 5 5 + import { useNsidSchema } from "./use-nsid-schema.ts"; 6 6 + import type { ActionUIDefinition, EditorBlockProps, ForEachDraft } from "./types.ts"; 7 7 + 8 8 + export type RecordDraft = { 9 9 + type: "record"; 10 10 + targetCollection: string; 11 11 + recordTemplate: string; 12 12 + comment: string; 13 13 + forEach?: ForEachDraft; 14 14 + }; 15 15 + 16 16 + function RecordActionEditor({ 17 17 + action, 18 18 + index, 19 19 + onChange, 20 20 + placeholders, 21 21 + }: EditorBlockProps<RecordDraft>) { 22 22 + const { 23 23 + targetSchema, 24 24 + targetSchemaLoading, 25 25 + targetSchemaError, 26 26 + nsidSuggestions, 27 27 + datalistId, 28 28 + fetchTargetSchema, 29 29 + fetchSuggestions, 30 30 + } = useNsidSchema(action.targetCollection); 31 31 + 32 32 + const targetId = `action-${index}-target-collection`; 33 33 + const templateId = `action-${index}-record-template`; 34 34 + 35 35 + return ( 36 36 + <> 37 37 + <div class={s.fieldGroup}> 38 38 + <label class={s.label} for={targetId}> 39 39 + Target Lexicon NSID 40 40 + </label> 41 41 + <input 42 42 + id={targetId} 43 43 + class={s.input} 44 44 + type="text" 45 45 + list={datalistId} 46 46 + placeholder="e.g. app.bsky.feed.like" 47 47 + value={action.targetCollection} 48 48 + onInput={(e: Event) => { 49 49 + const val = (e.target as HTMLInputElement).value; 50 50 + onChange({ ...action, targetCollection: val }); 51 51 + fetchTargetSchema(val); 52 52 + fetchSuggestions(val); 53 53 + }} 54 54 + required 55 55 + autocomplete="off" 56 56 + /> 57 57 + <span class={s.hint}>NSID of the collection to create a record in</span> 58 58 + <datalist id={datalistId}> 59 59 + {nsidSuggestions.map((nsid) => ( 60 60 + <option key={nsid} value={nsid} /> 61 61 + ))} 62 62 + </datalist> 63 63 + </div> 64 64 + 65 65 + {(targetSchema || targetSchemaLoading) && ( 66 66 + <RecordFormBuilder 67 67 + schema={targetSchema} 68 68 + loading={targetSchemaLoading} 69 69 + error={targetSchemaError} 70 70 + placeholders={placeholders} 71 71 + initialTemplate={action.recordTemplate || undefined} 72 72 + onChange={(tpl) => onChange({ ...action, recordTemplate: tpl })} 73 73 + /> 74 74 + )} 75 75 + 76 76 + {!targetSchema && !targetSchemaLoading && action.targetCollection && ( 77 77 + <div class={s.fieldGroup}> 78 78 + <label class={s.label} for={templateId}> 79 79 + Record template 80 80 + </label> 81 81 + {targetSchemaError && <span class={s.errorText}>{targetSchemaError}</span>} 82 82 + <textarea 83 83 + id={templateId} 84 84 + class={s.textarea} 85 85 + placeholder={ 86 86 + '{\n "subject": {\n "uri": "{{event.commit.record.subject.uri}}",\n "cid": "{{event.commit.cid}}"\n },\n "createdAt": "{{now}}"\n}' 87 87 + } 88 88 + value={action.recordTemplate} 89 89 + onInput={(e: Event) => 90 90 + onChange({ 91 91 + ...action, 92 92 + recordTemplate: (e.target as HTMLTextAreaElement).value, 93 93 + }) 94 94 + } 95 95 + required 96 96 + autocomplete="off" 97 97 + /> 98 98 + </div> 99 99 + )} 100 100 + </> 101 101 + ); 102 102 + } 103 103 + 104 104 + export const recordUiDefinition: ActionUIDefinition<RecordDraft, RecordAction> = { 105 105 + type: "record", 106 106 + recordProducing: true, 107 107 + catalogue: { 108 108 + label: "Create a record", 109 109 + description: "Create a new record in any collection", 110 110 + category: "pds", 111 111 + icon: FilePlus2, 112 112 + available: true, 113 113 + }, 114 114 + newDraft: () => ({ type: "record", targetCollection: "", recordTemplate: "", comment: "" }), 115 115 + fromAction: (a) => ({ 116 116 + type: "record", 117 117 + targetCollection: a.targetCollection, 118 118 + recordTemplate: a.recordTemplate, 119 119 + comment: a.comment ?? "", 120 120 + }), 121 121 + toInput: (d) => ({ 122 122 + type: "record", 123 123 + targetCollection: d.targetCollection, 124 124 + recordTemplate: d.recordTemplate, 125 125 + }), 126 126 + EditorBlock: RecordActionEditor, 127 127 + };

+55

app/islands/action-editors/registry.ts

reviewed

··· 1 1 + import type { ActionType } from "../../../lib/actions/registry.js"; 2 2 + import { webhookUiDefinition, type WebhookDraft } from "./webhook.tsx"; 3 3 + import { recordUiDefinition, type RecordDraft } from "./record.tsx"; 4 4 + import { bskyPostUiDefinition, type BskyPostDraft } from "./bsky-post.tsx"; 5 5 + import { patchRecordUiDefinition, type PatchRecordDraft } from "./patch-record.tsx"; 6 6 + import { marginBookmarkUiDefinition, type MarginBookmarkDraft } from "./margin-bookmark.tsx"; 7 7 + import { sembleSaveUiDefinition, type SembleSaveDraft } from "./semble-save.tsx"; 8 8 + import { followUiDefinition, type FollowDraft } from "./follow.tsx"; 9 9 + import type { ActionUIDefinition } from "./types.ts"; 10 10 + 11 11 + /** Form-side counterpart to `ACTION_REGISTRY`. Keyed by the same `$type` as 12 12 + * the server-side registry, so the two can be paired by the AutomationForm 13 13 + * without an extra translation table. */ 14 14 + // eslint-disable-next-line @typescript-eslint/no-explicit-any -- per-action entries are precisely typed at their declaration site. 15 15 + export const ACTION_UI_REGISTRY: Record<ActionType, ActionUIDefinition<any, any>> = { 16 16 + webhook: webhookUiDefinition, 17 17 + record: recordUiDefinition, 18 18 + "bsky-post": bskyPostUiDefinition, 19 19 + "patch-record": patchRecordUiDefinition, 20 20 + "margin-bookmark": marginBookmarkUiDefinition, 21 21 + "semble-save": sembleSaveUiDefinition, 22 22 + follow: followUiDefinition, 23 23 + }; 24 24 + 25 25 + /** Per-action draft union — replaces the hand-written `ActionDraft` that 26 26 + * used to live in AutomationForm.tsx. Adding a new action type here means 27 27 + * appending its draft to this union and registering it in 28 28 + * `ACTION_UI_REGISTRY`. */ 29 29 + export type ActionDraft = 30 30 + | WebhookDraft 31 31 + | RecordDraft 32 32 + | BskyPostDraft 33 33 + | PatchRecordDraft 34 34 + | MarginBookmarkDraft 35 35 + | SembleSaveDraft 36 36 + | FollowDraft; 37 37 + 38 38 + export type { 39 39 + WebhookDraft, 40 40 + RecordDraft, 41 41 + BskyPostDraft, 42 42 + PatchRecordDraft, 43 43 + MarginBookmarkDraft, 44 44 + SembleSaveDraft, 45 45 + FollowDraft, 46 46 + }; 47 47 + 48 48 + /** Client-safe variant of `lib/actions/registry.isRecordProducingAction`. 49 49 + * Importing the server registry from a client island drags drizzle/sqlite 50 50 + * through transitive dependencies (executor → dispatcher → db). The 51 51 + * `recordProducing` field on each UI definition mirrors the server flag, 52 52 + * enforced by a vitest test. */ 53 53 + export function isRecordProducingAction(type: string): boolean { 54 54 + return ACTION_UI_REGISTRY[type as ActionType]?.recordProducing ?? false; 55 55 + }

+62

app/islands/action-editors/semble-save.tsx

reviewed

··· 1 1 + import type { SembleSaveAction } from "../../../lib/db/schema.js"; 2 2 + import { BookmarkPlus } from "../../icons.ts"; 3 3 + import * as s from "../AutomationForm.css.ts"; 4 4 + import type { ActionUIDefinition, ForEachDraft } from "./types.ts"; 5 5 + 6 6 + export type SembleSaveDraft = { 7 7 + type: "semble-save"; 8 8 + url: string; 9 9 + comment: string; 10 10 + forEach?: ForEachDraft; 11 11 + }; 12 12 + 13 13 + function SembleSaveActionEditor({ 14 14 + action, 15 15 + index, 16 16 + onChange, 17 17 + }: { 18 18 + action: SembleSaveDraft; 19 19 + index: number; 20 20 + onChange: (a: SembleSaveDraft) => void; 21 21 + }) { 22 22 + const urlId = `action-${index}-semble-url`; 23 23 + return ( 24 24 + <div class={s.fieldGroup}> 25 25 + <label class={s.label} for={urlId}> 26 26 + Page URL 27 27 + </label> 28 28 + <input 29 29 + id={urlId} 30 30 + class={s.input} 31 31 + type="text" 32 32 + placeholder="e.g. https://example.com or {{event.commit.record.subject.uri}}" 33 33 + value={action.url} 34 34 + onInput={(e: Event) => onChange({ ...action, url: (e.target as HTMLInputElement).value })} 35 35 + required 36 36 + autocomplete="off" 37 37 + /> 38 38 + <span class={s.hint}> 39 39 + URL of the page to save. Metadata (title, description, image) will be fetched automatically. 40 40 + Supports {"{{placeholders}}"}. 41 41 + </span> 42 42 + </div> 43 43 + ); 44 44 + } 45 45 + 46 46 + export const sembleSaveUiDefinition: ActionUIDefinition<SembleSaveDraft, SembleSaveAction> = { 47 47 + type: "semble-save", 48 48 + recordProducing: true, 49 49 + catalogue: { 50 50 + label: "Save on Semble", 51 51 + description: "Save a URL as a card on Semble", 52 52 + category: "apps", 53 53 + icon: BookmarkPlus, 54 54 + available: true, 55 55 + colorKey: "cosmik", 56 56 + faviconDomain: "semble.so", 57 57 + }, 58 58 + newDraft: () => ({ type: "semble-save", url: "", comment: "" }), 59 59 + fromAction: (a) => ({ type: "semble-save", url: a.url, comment: a.comment ?? "" }), 60 60 + toInput: (d) => ({ type: "semble-save", url: d.url }), 61 61 + EditorBlock: SembleSaveActionEditor, 62 62 + };

+80

app/islands/action-editors/types.ts

reviewed

··· 1 1 + import type { FC } from "hono/jsx"; 2 2 + import type { Action, FollowTarget } from "../../../lib/db/schema.js"; 3 3 + import type { ActionInput } from "../../../lib/actions/validation.js"; 4 4 + import type { ColorKey } from "../../../lib/automations/follow-targets.js"; 5 5 + 6 6 + /** Common prop signature for the lucide-style icon components. */ 7 7 + type IconProps = { size?: number; class?: string; color?: string; "stroke-width"?: number }; 8 8 + export type ActionIcon = FC<IconProps>; 9 9 + 10 10 + /** Picker-tile metadata shown in the form's "+ Add action" picker. Lives on 11 11 + * the UI side because it's pure display data — the server has no use for 12 12 + * icons or human-readable labels. */ 13 13 + export type CatalogueTile = { 14 14 + /** Imperative phrase shown in the picker (e.g. "Post to Bluesky"). */ 15 15 + label: string; 16 16 + description: string; 17 17 + category: "webhook" | "bluesky" | "apps" | "pds"; 18 18 + icon: ActionIcon; 19 19 + available: boolean; 20 20 + colorKey?: ColorKey; 21 21 + faviconDomain?: string; 22 22 + }; 23 23 + 24 24 + /** Form-side representation of a per-iteration `forEach` config. Mirrors 25 25 + * `ForEachConfig` but always materializes the conditions array (the form 26 26 + * needs it for incremental editing). */ 27 27 + export type ForEachDraft = { 28 28 + path: string; 29 29 + conditions: Array<{ field: string; operator: string; value: string; comment: string }>; 30 30 + }; 31 31 + 32 32 + /** Custom-header row inside a webhook draft. Two-step entry — the user types 33 33 + * key and value separately and we only emit the entry once both are 34 34 + * non-empty. */ 35 35 + export type HeaderDraft = { key: string; value: string }; 36 36 + 37 37 + /** Props every action-editor block receives. `placeholders` is universally 38 38 + * threaded so editors can opt into placeholder autocomplete without each 39 39 + * editor declaring its own prop type. */ 40 40 + export type EditorBlockProps<TDraft> = { 41 41 + action: TDraft; 42 42 + index: number; 43 43 + onChange: (a: TDraft) => void; 44 44 + placeholders: string[]; 45 45 + }; 46 46 + 47 47 + /** Init payload for `newDraft`. `followTarget` is set when the picker tile is 48 48 + * one of the per-target follow tiles (`follow-bluesky` etc.); other actions 49 49 + * ignore it. */ 50 50 + export type NewDraftInit = { 51 51 + followTarget?: FollowTarget; 52 52 + }; 53 53 + 54 54 + /** UI counterpart to `ActionDefinition`: editor JSX, draft↔action conversions, 55 55 + * and the toInput projection that produces the API payload shape. The form 56 56 + * reaches for these via `ACTION_UI_REGISTRY`. */ 57 57 + export type ActionUIDefinition< 58 58 + TDraft extends { type: Action["$type"]; comment: string; forEach?: ForEachDraft }, 59 59 + TAction extends Action, 60 60 + > = { 61 61 + type: TAction["$type"]; 62 62 + /** Mirrors `ActionDefinition.recordProducing` on the server. Duplicated 63 63 + * here so client code (form, LexiconFlow) doesn't have to reach into the 64 64 + * server registry — which would drag drizzle/sqlite into the client 65 65 + * bundle. The mirror is verified by a vitest test. */ 66 66 + recordProducing: boolean; 67 67 + /** Picker-tile metadata. Optional because some action types map to 68 68 + * multiple tiles (e.g. follow expands into one tile per FOLLOW_TARGETS 69 69 + * entry); those keep their tile list hand-curated in `action-catalogue`. */ 70 70 + catalogue?: CatalogueTile; 71 71 + /** Build an empty draft for "+ Add action" clicks. */ 72 72 + newDraft: (init: NewDraftInit) => TDraft; 73 73 + /** Project a stored Action into the editor's draft shape. */ 74 74 + fromAction: (action: TAction) => TDraft; 75 75 + /** Project a draft back to the API input shape. The route's POST/PATCH 76 76 + * passes this directly into the server-side registry's `validate`. Common 77 77 + * fields (forEach, comment) are added by the form. */ 78 78 + toInput: (draft: TDraft) => Omit<ActionInput, "forEach" | "comment">; 79 79 + EditorBlock: FC<EditorBlockProps<TDraft>>; 80 80 + };

+94

app/islands/action-editors/use-nsid-schema.ts

reviewed

··· 1 1 + import { useState, useRef, useCallback } from "hono/jsx"; 2 2 + import type { RecordSchema } from "../../../lib/lexicons/schema-types.js"; 3 3 + 4 4 + const NSID_RE = /^[a-z][a-z0-9-]*(\.[a-zA-Z][a-zA-Z0-9-]*){2,}$/; 5 5 + 6 6 + /** Shared hook for record-producing editors that need to load the target 7 7 + * collection's lexicon schema (record + patch-record). Owns NSID typeahead, 8 8 + * debounced schema fetch, and a stable datalist id for input suggestions. */ 9 9 + export function useNsidSchema(initialCollection?: string) { 10 10 + const [targetSchema, setTargetSchema] = useState<RecordSchema | null>(null); 11 11 + const [targetSchemaLoading, setTargetSchemaLoading] = useState(false); 12 12 + const [targetSchemaError, setTargetSchemaError] = useState(""); 13 13 + const [nsidSuggestions, setNsidSuggestions] = useState<string[]>([]); 14 14 + const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null); 15 15 + const suggestDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null); 16 16 + const abortRef = useRef<AbortController | null>(null); 17 17 + const lastSuggestPrefix = useRef(""); 18 18 + const [datalistId] = useState(() => `nsid-${Math.random().toString(36).slice(2, 8)}`); 19 19 + const initialFetched = useRef(false); 20 20 + 21 21 + const fetchTargetSchema = useCallback((nsid: string) => { 22 22 + if (debounceRef.current) clearTimeout(debounceRef.current); 23 23 + if (!nsid || !NSID_RE.test(nsid)) { 24 24 + abortRef.current?.abort(); 25 25 + setTargetSchema(null); 26 26 + setTargetSchemaError(""); 27 27 + return; 28 28 + } 29 29 + debounceRef.current = setTimeout(async () => { 30 30 + abortRef.current?.abort(); 31 31 + const ctrl = new AbortController(); 32 32 + abortRef.current = ctrl; 33 33 + setTargetSchemaLoading(true); 34 34 + setTargetSchemaError(""); 35 35 + try { 36 36 + const res = await fetch(`/api/lexicons/${encodeURIComponent(nsid)}?schema=record`, { 37 37 + signal: ctrl.signal, 38 38 + }); 39 39 + const data = await res.json(); 40 40 + if (!res.ok) { 41 41 + setTargetSchemaError(data.error || "Failed to load schema"); 42 42 + setTargetSchema(null); 43 43 + } else { 44 44 + setTargetSchema(data.record ?? null); 45 45 + if (!data.record) setTargetSchemaError("No record schema found for this collection"); 46 46 + } 47 47 + } catch (err) { 48 48 + if ((err as Error).name === "AbortError") return; 49 49 + setTargetSchemaError("Failed to fetch target collection schema"); 50 50 + setTargetSchema(null); 51 51 + } finally { 52 52 + if (abortRef.current === ctrl) { 53 53 + abortRef.current = null; 54 54 + setTargetSchemaLoading(false); 55 55 + } 56 56 + } 57 57 + }, 400); 58 58 + }, []); 59 59 + 60 60 + const fetchSuggestions = useCallback((value: string) => { 61 61 + if (suggestDebounceRef.current) clearTimeout(suggestDebounceRef.current); 62 62 + const dotIndex = value.lastIndexOf("."); 63 63 + const prefix = dotIndex > 0 ? value.slice(0, dotIndex + 1) : ""; 64 64 + if (!prefix || prefix.split(".").filter(Boolean).length < 2) return; 65 65 + if (prefix === lastSuggestPrefix.current) return; 66 66 + suggestDebounceRef.current = setTimeout(async () => { 67 67 + lastSuggestPrefix.current = prefix; 68 68 + try { 69 69 + const res = await fetch(`/api/lexicons/suggest?prefix=${encodeURIComponent(prefix)}`); 70 70 + if (res.ok) { 71 71 + const data = await res.json(); 72 72 + setNsidSuggestions(data.suggestions ?? []); 73 73 + } 74 74 + } catch { 75 75 + // ignore 76 76 + } 77 77 + }, 300); 78 78 + }, []); 79 79 + 80 80 + if (!initialFetched.current && initialCollection) { 81 81 + initialFetched.current = true; 82 82 + fetchTargetSchema(initialCollection); 83 83 + } 84 84 + 85 85 + return { 86 86 + targetSchema, 87 87 + targetSchemaLoading, 88 88 + targetSchemaError, 89 89 + nsidSuggestions, 90 90 + datalistId, 91 91 + fetchTargetSchema, 92 92 + fetchSuggestions, 93 93 + }; 94 94 + }

+132

app/islands/action-editors/webhook.tsx

reviewed

··· 1 1 + import type { WebhookAction } from "../../../lib/db/schema.js"; 2 2 + import { Webhook } from "../../icons.ts"; 3 3 + import * as s from "../AutomationForm.css.ts"; 4 4 + import type { ActionUIDefinition, ForEachDraft, HeaderDraft } from "./types.ts"; 5 5 + 6 6 + export type WebhookDraft = { 7 7 + type: "webhook"; 8 8 + callbackUrl: string; 9 9 + headers: HeaderDraft[]; 10 10 + comment: string; 11 11 + forEach?: ForEachDraft; 12 12 + }; 13 13 + 14 14 + function WebhookActionEditor({ 15 15 + action, 16 16 + index, 17 17 + onChange, 18 18 + }: { 19 19 + action: WebhookDraft; 20 20 + index: number; 21 21 + onChange: (a: WebhookDraft) => void; 22 22 + }) { 23 23 + const updateHeader = (i: number, key: "key" | "value", val: string) => { 24 24 + const headers = action.headers.map((h, j) => (j === i ? { ...h, [key]: val } : h)); 25 25 + onChange({ ...action, headers }); 26 26 + }; 27 27 + const addHeader = () => { 28 28 + onChange({ ...action, headers: [...action.headers, { key: "", value: "" }] }); 29 29 + }; 30 30 + const removeHeader = (i: number) => { 31 31 + onChange({ ...action, headers: action.headers.filter((_, j) => j !== i) }); 32 32 + }; 33 33 + 34 34 + const callbackId = `action-${index}-callback-url`; 35 35 + const headersGroupId = `action-${index}-headers-group`; 36 36 + 37 37 + return ( 38 38 + <> 39 39 + <div class={s.fieldGroup}> 40 40 + <label class={s.label} for={callbackId}> 41 41 + Callback URL 42 42 + </label> 43 43 + <input 44 44 + id={callbackId} 45 45 + class={s.input} 46 46 + type="url" 47 47 + placeholder="e.g. https://example.com/hooks/events" 48 48 + value={action.callbackUrl} 49 49 + onInput={(e: Event) => 50 50 + onChange({ ...action, callbackUrl: (e.target as HTMLInputElement).value }) 51 51 + } 52 52 + required 53 53 + autocomplete="off" 54 54 + /> 55 55 + </div> 56 56 + <div class={s.fieldGroup} role="group" aria-labelledby={headersGroupId}> 57 57 + <span id={headersGroupId} class={s.label}> 58 58 + Custom headers 59 59 + </span> 60 60 + <span class={s.hint}> 61 61 + Use <code>{"{{secret:name}}"}</code> to reference stored secrets 62 62 + </span> 63 63 + {action.headers.map((header, i) => ( 64 64 + <div key={i} class={s.conditionRow}> 65 65 + <div class={s.conditionField}> 66 66 + <input 67 67 + class={s.input} 68 68 + type="text" 69 69 + placeholder="e.g. Authorization" 70 70 + value={header.key} 71 71 + onInput={(e: Event) => updateHeader(i, "key", (e.target as HTMLInputElement).value)} 72 72 + aria-label="Header name" 73 73 + autocomplete="off" 74 74 + /> 75 75 + </div> 76 76 + <div class={s.conditionValue}> 77 77 + <input 78 78 + class={s.input} 79 79 + type="text" 80 80 + placeholder="e.g. Bearer {{secret:my-token}}" 81 81 + value={header.value} 82 82 + onInput={(e: Event) => 83 83 + updateHeader(i, "value", (e.target as HTMLInputElement).value) 84 84 + } 85 85 + aria-label="Header value" 86 86 + autocomplete="off" 87 87 + /> 88 88 + </div> 89 89 + <button type="button" class={s.removeBtn} onClick={() => removeHeader(i)}> 90 90 + Remove 91 91 + </button> 92 92 + </div> 93 93 + ))} 94 94 + <button type="button" class={s.addBtn} onClick={addHeader}> 95 95 + + Add Header 96 96 + </button> 97 97 + </div> 98 98 + </> 99 99 + ); 100 100 + } 101 101 + 102 102 + export const webhookUiDefinition: ActionUIDefinition<WebhookDraft, WebhookAction> = { 103 103 + type: "webhook", 104 104 + recordProducing: false, 105 105 + catalogue: { 106 106 + label: "Send a webhook", 107 107 + description: "POST event data to an external URL", 108 108 + category: "webhook", 109 109 + icon: Webhook, 110 110 + available: true, 111 111 + }, 112 112 + newDraft: () => ({ type: "webhook", callbackUrl: "", headers: [], comment: "" }), 113 113 + fromAction: (a) => ({ 114 114 + type: "webhook", 115 115 + callbackUrl: a.callbackUrl, 116 116 + headers: a.headers ? Object.entries(a.headers).map(([key, value]) => ({ key, value })) : [], 117 117 + comment: a.comment ?? "", 118 118 + }), 119 119 + toInput: (d) => { 120 120 + const filtered = d.headers.filter((h) => h.key.trim() && h.value.trim()); 121 121 + const headers = 122 122 + filtered.length > 0 123 123 + ? Object.fromEntries(filtered.map((h) => [h.key.trim(), h.value.trim()])) 124 124 + : undefined; 125 125 + return { 126 126 + type: "webhook", 127 127 + callbackUrl: d.callbackUrl, 128 128 + ...(headers ? { headers } : {}), 129 129 + }; 130 130 + }, 131 131 + EditorBlock: WebhookActionEditor, 132 132 + };

-8

lib/actions/bsky-post.ts

reviewed

··· 6 6 import type { MatchedEvent } from "../jetstream/consumer.js"; 7 7 import { AUTOMATION_LIMITS } from "../automations/limits.js"; 8 8 import { BCP47_RE, VALID_BSKY_LABELS } from "./validation.js"; 9 9 - import { MessageSquare } from "../../app/icons.js"; 10 9 import type { ActionDefinition } from "./registry.js"; 11 10 import type { DryRunContext, DryRunDescription, ValidationContext } from "./types.js"; 12 11 ··· 185 184 toPds, 186 185 execute: executeBskyPost, 187 186 dryRunDescribe, 188 188 - catalogue: { 189 189 - label: "Post to Bluesky", 190 190 - description: "Publish a post to your Bluesky account", 191 191 - category: "bluesky", 192 192 - icon: MessageSquare, 193 193 - available: true, 194 194 - }, 195 187 };

-8

lib/actions/executor.ts

reviewed

··· 4 4 import { parsePdsError, wrapWithDelivery, type ActionResult } from "./delivery.js"; 5 5 import type { MatchedEvent } from "../jetstream/consumer.js"; 6 6 import { isValidNsid } from "../lexicons/resolver.js"; 7 7 - import { FilePlus2 } from "../../app/icons.js"; 8 7 import type { ActionDefinition } from "./registry.js"; 9 8 import type { DryRunContext, DryRunDescription, ValidationContext } from "./types.js"; 10 9 ··· 137 136 toPds, 138 137 execute: executeAction, 139 138 dryRunDescribe, 140 140 - catalogue: { 141 141 - label: "Create a record", 142 142 - description: "Create a new record in any collection", 143 143 - category: "pds", 144 144 - icon: FilePlus2, 145 145 - available: true, 146 146 - }, 147 139 };

-9

lib/actions/margin-bookmark.ts

reviewed

··· 7 7 import { fetchURLMetadata } from "../url-metadata.js"; 8 8 import { config } from "../config.js"; 9 9 import { MARGIN_BOOKMARK_LIMITS } from "../automations/limits.js"; 10 10 - import { Bookmark } from "../../app/icons.js"; 11 10 import type { ActionDefinition } from "./registry.js"; 12 11 import type { DryRunContext, DryRunDescription, ValidationContext } from "./types.js"; 13 12 ··· 330 329 toPds, 331 330 execute: executeMarginBookmark, 332 331 dryRunDescribe, 333 333 - catalogue: { 334 334 - label: "Bookmark on Margin", 335 335 - description: "Create a bookmark note in Margin.at", 336 336 - category: "apps", 337 337 - icon: Bookmark, 338 338 - available: true, 339 339 - faviconDomain: "margin.at", 340 340 - }, 341 332 };

-8

lib/actions/patch-record.ts

reviewed

··· 11 11 import { parsePdsError, wrapWithDelivery, type ActionResult } from "./delivery.js"; 12 12 import type { MatchedEvent } from "../jetstream/consumer.js"; 13 13 import { isValidNsid } from "../lexicons/resolver.js"; 14 14 - import { Pencil } from "../../app/icons.js"; 15 14 import type { ActionDefinition } from "./registry.js"; 16 15 import type { DryRunContext, DryRunDescription, ValidationContext } from "./types.js"; 17 16 ··· 215 214 toPds, 216 215 execute: executePatchRecord, 217 216 dryRunDescribe, 218 218 - catalogue: { 219 219 - label: "Update a record", 220 220 - description: "Modify fields of an existing record", 221 221 - category: "pds", 222 222 - icon: Pencil, 223 223 - available: true, 224 224 - }, 225 217 };

+23

lib/actions/registry-contract.test.ts

reviewed

··· 1 1 + import { describe, it, expect } from "vitest"; 2 2 + import { ACTION_REGISTRY, ACTION_TYPES } from "./registry.ts"; 3 3 + import { ACTION_UI_REGISTRY } from "../../app/islands/action-editors/registry.ts"; 4 4 + 5 5 + // The form/island side keeps a `recordProducing` mirror on each 6 6 + // ActionUIDefinition because client code can't import the server registry 7 7 + // (it would drag drizzle/sqlite through transitive deps). This test pins the 8 8 + // two halves together so a future change to the server flag isn't silently 9 9 + // out of sync with the client form. 10 10 + describe("server vs UI registry contract", () => { 11 11 + it("recordProducing flags match across both registries", () => { 12 12 + for (const type of ACTION_TYPES) { 13 13 + expect(ACTION_UI_REGISTRY[type].recordProducing, type).toBe( 14 14 + ACTION_REGISTRY[type].recordProducing, 15 15 + ); 16 16 + } 17 17 + }); 18 18 + 19 19 + it("every action $type is present in both registries", () => { 20 20 + expect(Object.keys(ACTION_REGISTRY).sort()).toEqual([...ACTION_TYPES].sort()); 21 21 + expect(Object.keys(ACTION_UI_REGISTRY).sort()).toEqual([...ACTION_TYPES].sort()); 22 22 + }); 23 23 + });

+19 -48

lib/actions/registry.ts

reviewed

··· 1 1 - import type { FC } from "hono/jsx"; 2 1 import type { Action } from "../db/schema.js"; 3 2 import type { PdsAction } from "../automations/pds.js"; 4 4 - import type { ColorKey } from "../automations/follow-targets.js"; 5 5 - 6 6 - /** Common prop signature for the lucide-style icon components in `app/icons.ts`. */ 7 7 - type IconProps = { size?: number; class?: string; color?: string; "stroke-width"?: number }; 8 8 - export type ActionIcon = FC<IconProps>; 9 3 import type { 10 4 ActionHandler, 11 5 DryRunContext, ··· 17 11 * key. Derived from `Action` so adding a new variant is a type error here. */ 18 12 export type ActionType = Action["$type"]; 19 13 20 20 - /** Catalogue tile metadata that today lives in `action-catalogue.ts`. Mirrored 21 21 - * here so each registry entry owns its UI footprint. The hand-curated 22 22 - * ACTION_CATALOGUE array in action-catalogue.ts becomes a derived view in 23 23 - * Phase 4. */ 24 24 - export type CatalogueTile = { 25 25 - /** Imperative phrase shown in the "add action" picker (e.g. "Post to Bluesky"). */ 26 26 - label: string; 27 27 - description: string; 28 28 - category: "webhook" | "bluesky" | "apps" | "pds"; 29 29 - /** Lucide-style icon component (one of the exports from `app/icons.ts`). */ 30 30 - icon: ActionIcon; 31 31 - available: boolean; 32 32 - /** Override for the tile's data-cat color (e.g. follow-sifa is sifa-blue 33 33 - * while still living under "Bluesky"). */ 34 34 - colorKey?: ColorKey; 35 35 - /** Domain whose favicon is rendered next to the icon. */ 36 36 - faviconDomain?: string; 37 37 - }; 38 38 - 39 14 /** Validation outcome for the API POST/PATCH routes. The single function call 40 15 * collapses what's currently a per-action if-branch in both routes. PDS 41 16 * serialization is a separate concern (see `toPds`) so PATCH can reproject a ··· 44 19 | { ok: true; local: TAction } 45 20 | { ok: false; error: string; status?: number }; 46 21 47 47 - /** Single source of truth per action type. Subsequent phases populate 48 48 - * `ACTION_REGISTRY` with one of these per `$type`; the dispatchers in 49 49 - * handler.ts, the API routes, auth/client.ts, and pds-serialize.ts then 50 50 - * reduce to `ACTION_REGISTRY[type].method(...)` lookups. */ 22 22 + /** Server-side single source of truth per action type. The dispatchers in 23 23 + * handler.ts, the API routes, auth/client.ts, and pds-serialize.ts reduce 24 24 + * to `ACTION_REGISTRY[type].method(...)` lookups. 25 25 + * 26 26 + * Pure UI metadata (icons, picker tiles) lives on the client side in 27 27 + * `app/islands/action-editors`. Keeping it out of the server registry means 28 28 + * importing this file from a route or executor doesn't drag the icon 29 29 + * components or app-layer code into the server bundle, and conversely the 30 30 + * client form bundle doesn't transitively pull drizzle/sqlite. */ 51 31 export type ActionDefinition< 52 32 TAction extends Action = Action, 53 33 TInput = unknown, ··· 57 37 pdsType: TPdsAction["$type"]; 58 38 59 39 /** Short noun-phrase label used in the dashboard automation list and 60 60 - * delivery-log filters (e.g. "Bluesky Post", "Webhook"). Distinct from 61 61 - * `catalogue.label`, which is the imperative phrase in the picker. */ 40 40 + * delivery-log filters (e.g. "Bluesky Post", "Webhook"). */ 62 41 displayLabel: string; 63 42 64 43 /** Replaces `RECORD_PRODUCING_TYPES` and the `actionResultNames.push` calls 65 65 - * in API routes. */ 44 44 + * in API routes. Mirrored on the client side via `ActionUIDefinition` 45 45 + * to keep the form's `isRecordProducingAction` check off the server registry. */ 66 46 recordProducing: boolean; 67 47 68 48 /** Replaces the per-$type checks in `actionsNeedFullScope`. */ ··· 82 62 /** Build the dry-run delivery_logs row content for this action type. */ 83 63 dryRunDescribe(action: TAction, ctx: DryRunContext): Promise<DryRunDescription>; 84 64 85 85 - /** Catalogue tile shown in the form's "add action" picker. Optional 86 86 - * because some action types map to multiple tiles (e.g. `follow` expands 87 87 - * into one tile per FOLLOW_TARGETS entry); those keep their tile list 88 88 - * hand-curated in `action-catalogue.ts`. */ 89 89 - catalogue?: CatalogueTile; 90 90 - 91 65 /** Optional override for how the GET /api/automations route serializes a 92 66 * stored action — webhooks use this to strip the secret. */ 93 67 serializeForApi?(action: TAction): unknown; ··· 95 69 96 70 /** Insertion order is the canonical action ordering used everywhere a list of 97 71 * action types matters (catalogue tiles, label tables, lexicon refs, drift 98 98 - * tests). Phase 2 starts populating ACTION_REGISTRY by type. */ 72 72 + * tests). */ 99 73 export const ACTION_TYPES: readonly ActionType[] = [ 100 74 "webhook", 101 75 "bsky-post", ··· 106 80 "patch-record", 107 81 ] as const; 108 82 109 109 - /** Map of $type → definition. Phase 2 fills this in one entry at a time; 110 110 - * consumers begin reading from it incrementally while the legacy switches 111 111 - * remain in place. Empty until then so this scaffolding commit is a pure 112 112 - * type-level addition. */ 113 83 import { sembleSaveDefinition } from "./semble-save.js"; 114 84 import { marginBookmarkDefinition } from "./margin-bookmark.js"; 115 85 import { followDefinition } from "./follow.js"; ··· 118 88 import { recordDefinition } from "./executor.js"; 119 89 import { webhookDefinition } from "./webhook.js"; 120 90 121 121 - /** Map of $type → definition. Every action type is registered after Phase 3. 122 122 - * Subsequent dispatchers consume the registry directly and need no fallback. */ 91 91 + /** Map of $type → definition. Server-side only — importing this file from a 92 92 + * client island will pull drizzle/sqlite through transitive deps. The client 93 93 + * form uses `ACTION_UI_REGISTRY` instead (purely UI metadata + JSX). */ 123 94 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- per-action entries are precisely typed at their declaration site. 124 95 export const ACTION_REGISTRY: Record<ActionType, ActionDefinition<any, any, any>> = { 125 96 "semble-save": sembleSaveDefinition, ··· 131 102 webhook: webhookDefinition, 132 103 }; 133 104 134 134 - /** Action types that produce a record result (uri, cid, rkey) for chaining. 135 135 - * Lookup goes through the registry — adding a new action with 136 136 - * `recordProducing: true` is enough; no parallel set to maintain. */ 105 105 + /** Server-side `isRecordProducingAction`. The form/island side has its own 106 106 + * client-safe copy in `action-editors/registry.ts` driven by the UI 107 107 + * definitions; both stay in sync via a vitest contract test. */ 137 108 export function isRecordProducingAction(type: string): boolean { 138 109 return ACTION_REGISTRY[type as ActionType]?.recordProducing ?? false; 139 110 }

-11

lib/actions/semble-save.ts

reviewed

··· 5 5 import type { MatchedEvent } from "../jetstream/consumer.js"; 6 6 import { fetchURLMetadata, type UrlMetadata } from "../url-metadata.js"; 7 7 import { SEMBLE_SAVE_LIMITS } from "../automations/limits.js"; 8 8 - import { BookmarkPlus } from "../../app/icons.js"; 9 9 - import type { ColorKey } from "../automations/follow-targets.js"; 10 8 import type { ActionDefinition } from "./registry.js"; 11 9 import type { DryRunContext, DryRunDescription, ValidationContext } from "./types.js"; 12 10 ··· 209 207 toPds, 210 208 execute: executeSembleSave, 211 209 dryRunDescribe, 212 212 - catalogue: { 213 213 - label: "Save on Semble", 214 214 - description: "Save a URL as a card on Semble", 215 215 - category: "apps", 216 216 - icon: BookmarkPlus, 217 217 - available: true, 218 218 - colorKey: "cosmik" satisfies ColorKey, 219 219 - faviconDomain: "semble.so", 220 220 - }, 221 210 };

-8

lib/actions/webhook.ts

reviewed

··· 3 3 import { dispatch, buildPayload } from "../webhooks/dispatcher.js"; 4 4 import { assertPublicUrl, UrlGuardError } from "../url-guard.js"; 5 5 import { verifyCallback } from "../automations/verify.js"; 6 6 - import { Webhook } from "../../app/icons.js"; 7 6 import { validateWebhookHeaders } from "./validation.js"; 8 7 import type { ActionDefinition } from "./registry.js"; 9 8 import type { DryRunContext, DryRunDescription, ValidationContext } from "./types.js"; ··· 114 113 execute: dispatch, 115 114 dryRunDescribe, 116 115 serializeForApi, 117 117 - catalogue: { 118 118 - label: "Send a webhook", 119 119 - description: "POST event data to an external URL", 120 120 - category: "webhook", 121 121 - icon: Webhook, 122 122 - available: true, 123 123 - }, 124 116 };

+4 -3

lib/automations/action-catalogue.ts

reviewed

··· 1 1 import { Heart, Trash2, UserPlus } from "../../app/icons.js"; 2 2 - import { ACTION_REGISTRY, type ActionIcon } from "../actions/registry.js"; 2 2 + import { ACTION_UI_REGISTRY } from "../../app/islands/action-editors/registry.ts"; 3 3 + import type { ActionIcon } from "../../app/islands/action-editors/types.ts"; 3 4 import { FOLLOW_TARGETS, type ColorKey, type FollowTarget } from "./follow-targets.js"; 4 5 5 6 export type AddableActionId = ··· 34 35 }; 35 36 36 37 /** Tile entry derived from a registered action's `catalogue` metadata. */ 37 37 - function tileFromRegistry(type: keyof typeof ACTION_REGISTRY): Tile { 38 38 - const def = ACTION_REGISTRY[type]!; 38 38 + function tileFromRegistry(type: keyof typeof ACTION_UI_REGISTRY): Tile { 39 39 + const def = ACTION_UI_REGISTRY[type]!; 39 40 const cat = def.catalogue!; 40 41 return { 41 42 id: type,