Add publish form to post summary to a Slashwork group

After generating a summary, users can pick a target group and
an auth token identity to publish the summary as a post via
the Slashwork GraphQL API.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: hubyrod

app/api/summary/publish/route.ts

@@ -0,0 +1,56 @@
+import { auth } from "@clerk/nextjs/server";
+import { NextResponse } from "next/server";
+import { getGroups, getAuthToken } from "@/src/db";
+import { postToSlashwork } from "@/src/slashwork";
+
+export async function POST(request: Request) {
+  const { userId } = await auth();
+  if (!userId) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  let body: { targetGroup?: string; authTokenName?: string; markdown?: string };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  const { targetGroup, authTokenName, markdown } = body;
+  if (!targetGroup || !authTokenName || !markdown) {
+    return NextResponse.json(
+      { error: "targetGroup, authTokenName, and markdown are required" },
+      { status: 400 },
+    );
+  }
+
+  const graphqlUrl = process.env.SLASHWORK_GRAPHQL_URL;
+  if (!graphqlUrl) {
+    return NextResponse.json({ error: "SLASHWORK_GRAPHQL_URL not configured" }, { status: 500 });
+  }
+
+  // Resolve group
+  const groups = await getGroups();
+  const group = groups.find((g) => g.name === targetGroup);
+  if (!group) {
+    return NextResponse.json({ error: `Group '${targetGroup}' not found` }, { status: 404 });
+  }
+
+  // Resolve auth token
+  const token = await getAuthToken(authTokenName);
+  if (!token) {
+    return NextResponse.json({ error: `Auth token '${authTokenName}' not found` }, { status: 404 });
+  }
+
+  try {
+    await postToSlashwork(
+      { graphqlUrl, authToken: token },
+      group.slashworkId,
+      markdown,
+    );
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    return NextResponse.json({ error: `Publish failed: ${message}` }, { status: 502 });
+  }
+}

app/summary/page.tsx

@@ -1,4 +1,4 @@
-import { getGroups } from "@/src/db";
+import { getGroups, getAuthTokens } from "@/src/db";
 import { hasDatabase } from "@/src/lib/config";
 import SummaryForm from "./summary-form";
 import "./summary.css";
@@ -7,7 +7,9 @@ export const dynamic = "force-dynamic";
 
 export default async function SummaryPage() {
   const dbAvailable = hasDatabase();
-  const groups = dbAvailable ? await getGroups() : [];
+  const [groups, authTokens] = dbAvailable
+    ? await Promise.all([getGroups(), getAuthTokens()])
+    : [[], []];
 
   return (
     <div className="sum-page">
@@ -25,7 +27,10 @@ export default async function SummaryPage() {
           </div>
         )}
 
-        <SummaryForm groups={groups.map((g) => g.name)} />
+        <SummaryForm
+          groups={groups.map((g) => g.name)}
+          authTokenNames={authTokens.map((t) => t.name)}
+        />
       </main>
     </div>
   );

app/summary/summary-form.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 
 interface SummaryFormProps {
   groups: string[];
+  authTokenNames: string[];
 }
 
 function getISOWeek(date: Date): number {
@@ -28,7 +29,7 @@ const WEEK_OPTIONS = Array.from({ length: 52 }, (_, i) => {
 const DEFAULT_PROMPT =
   "Summarize the following messages. Give a concise overview of the key topics, decisions, and action items discussed:";
 
-export default function SummaryForm({ groups }: SummaryFormProps) {
+export default function SummaryForm({ groups, authTokenNames }: SummaryFormProps) {
   const [group, setGroup] = useState(groups[0] ?? "");
   const [week, setWeek] = useState(`week${String(currentWeek).padStart(2, "0")}`);
   const [prompt, setPrompt] = useState(DEFAULT_PROMPT);
@@ -38,6 +39,13 @@ export default function SummaryForm({ groups }: SummaryFormProps) {
   const [weekLabel, setWeekLabel] = useState("");
   const [error, setError] = useState("");
 
+  // Publish state
+  const [publishGroup, setPublishGroup] = useState(groups[0] ?? "");
+  const [publishAs, setPublishAs] = useState(authTokenNames[0] ?? "");
+  const [publishing, setPublishing] = useState(false);
+  const [publishStatus, setPublishStatus] = useState<"idle" | "success" | "error">("idle");
+  const [publishError, setPublishError] = useState("");
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setLoading(true);
@@ -75,6 +83,44 @@ export default function SummaryForm({ groups }: SummaryFormProps) {
     }
   }
 
+  async function handlePublish() {
+    setPublishing(true);
+    setPublishStatus("idle");
+    setPublishError("");
+
+    try {
+      const res = await fetch("/api/summary/publish", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          targetGroup: publishGroup,
+          authTokenName: publishAs,
+          markdown: summary,
+        }),
+      });
+
+      const text = await res.text();
+      let data: Record<string, unknown>;
+      try {
+        data = JSON.parse(text);
+      } catch {
+        throw new Error(`Server error (HTTP ${res.status})`);
+      }
+
+      if (!res.ok) {
+        throw new Error((data.error as string) || `HTTP ${res.status}`);
+      }
+
+      setPublishStatus("success");
+      setTimeout(() => setPublishStatus("idle"), 5000);
+    } catch (err) {
+      setPublishStatus("error");
+      setPublishError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setPublishing(false);
+    }
+  }
+
   return (
     <div className="sum-section">
       <form className="sum-form" onSubmit={handleSubmit}>
@@ -159,6 +205,56 @@ export default function SummaryForm({ groups }: SummaryFormProps) {
             </span>
           </div>
           <div className="sum-result-body">{summary}</div>
+
+          <div className="sum-publish">
+            <div className="sum-publish-header">Publish</div>
+            <div className="sum-form-row">
+              <div className="sum-field">
+                <label htmlFor="sum-publish-group">Post to</label>
+                <select
+                  id="sum-publish-group"
+                  value={publishGroup}
+                  onChange={(e) => setPublishGroup(e.target.value)}
+                >
+                  {groups.map((g) => (
+                    <option key={g} value={g}>{g}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="sum-field">
+                <label htmlFor="sum-publish-as">Post as</label>
+                <select
+                  id="sum-publish-as"
+                  value={publishAs}
+                  onChange={(e) => setPublishAs(e.target.value)}
+                >
+                  {authTokenNames.map((t) => (
+                    <option key={t} value={t}>{t}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="sum-field sum-field--action">
+                <button
+                  type="button"
+                  className="sum-publish-btn"
+                  disabled={publishing}
+                  onClick={handlePublish}
+                >
+                  {publishing ? "Publishing..." : "Publish"}
+                </button>
+              </div>
+            </div>
+            {publishStatus === "success" && (
+              <div className="sum-publish-status sum-publish-status--ok">
+                Published to {publishGroup}
+              </div>
+            )}
+            {publishStatus === "error" && (
+              <div className="sum-publish-status sum-publish-status--err">
+                {publishError}
+              </div>
+            )}
+          </div>
         </div>
       )}
     </div>

app/summary/summary.css

@@ -233,6 +233,60 @@
   white-space: pre-wrap;
 }
 
+/* Publish */
+.sum-publish {
+  margin-top: 1.25rem;
+  border-top: 1px solid var(--cfg-border);
+  padding-top: 1.25rem;
+}
+
+.sum-publish-header {
+  font-family: var(--cfg-mono);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cfg-text-muted);
+  margin-bottom: 0.75rem;
+}
+
+.sum-publish-btn {
+  font-family: var(--cfg-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--cfg-bg);
+  background: var(--cfg-green);
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem 1.25rem;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+  white-space: nowrap;
+}
+
+.sum-publish-btn:hover {
+  opacity: 0.9;
+}
+
+.sum-publish-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.sum-publish-status {
+  margin-top: 0.625rem;
+  font-family: var(--cfg-mono);
+  font-size: 0.6875rem;
+}
+
+.sum-publish-status--ok {
+  color: var(--cfg-green);
+}
+
+.sum-publish-status--err {
+  color: #ef4444;
+}
+
 @media (max-width: 768px) {
   .sum-form-row {
     flex-direction: column;