Release 0.5.0: PR-less per-RFC discussion (contribution still requires PR)
Roadmap item #3. An RFC's main view now carries a discussion surface distinct from PR comments and from branch chat. The substrate is the existing threads/thread_messages tables — rows with branch_name IS NULL scope to the RFC's main view; the schema already permitted that shape, v0.5.0 is the first build to write it. Five new endpoints under /api/rfcs/<slug>/discussion/..., a new RFCDiscussionPanel right-column component used when branchParam === main, SPEC §10.10 settling discussion-vs-contribution, and §17 listing the new routes. Notification routing reuses the existing chat_message_in_participated_thread / chat_reply_to_my_message event kinds with branch_name=null on the fan-out row; a distinct event_kind is a §19.2 candidate. Anonymous viewers can read; writes require contributor — v0.6.0's item #4 will harden adjacent gates. No schema migration; minor bump, no operator action required beyond rebuild and restart. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ben Stull
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "rfc-app-frontend",
|
||||
"version": "0.2.1",
|
||||
"version": "0.5.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "rfc-app-frontend",
|
||||
"version": "0.2.1",
|
||||
"version": "0.5.0",
|
||||
"dependencies": {
|
||||
"@codemirror/commands": "^6.10.3",
|
||||
"@codemirror/lang-markdown": "^6.5.0",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "rfc-app-frontend",
|
||||
"private": true,
|
||||
"version": "0.4.0",
|
||||
"version": "0.5.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -1776,3 +1776,91 @@
|
||||
.grad-queue-link:hover strong { text-decoration: underline; }
|
||||
.muted { color: #6b7280; }
|
||||
.error { color: #b91c1c; }
|
||||
|
||||
/* v0.5.0 — PR-less per-RFC discussion panel (RFCDiscussionPanel.jsx).
|
||||
Visual neighbor of .chat-panel but distinct: discussion lives on the
|
||||
RFC, branch chat lives on the branch. Same flex column shape so it
|
||||
slots cleanly into the existing .right-panel container.
|
||||
*/
|
||||
.discussion-panel {
|
||||
flex: 1; display: flex; flex-direction: column;
|
||||
overflow: hidden; min-height: 0;
|
||||
}
|
||||
.discussion-header {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid #f0f0ee;
|
||||
background: #fafafa;
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
}
|
||||
.discussion-header-title { font-size: 12px; color: #555; font-weight: 600; }
|
||||
.discussion-header-meta { font-size: 11px; color: #888; }
|
||||
.discussion-thread-tabs {
|
||||
display: flex; gap: 4px; flex-wrap: wrap;
|
||||
padding: 6px 14px;
|
||||
border-bottom: 1px solid #f0f0ee;
|
||||
background: #fcfcfb;
|
||||
}
|
||||
.discussion-thread-tab {
|
||||
background: #fff; border: 1px solid #e5e5e0; cursor: pointer;
|
||||
font-size: 11px; color: #555;
|
||||
padding: 3px 8px; border-radius: 999px;
|
||||
}
|
||||
.discussion-thread-tab.active {
|
||||
background: #eef2ff; border-color: #5b5bd6; color: #3737a0;
|
||||
}
|
||||
.discussion-thread-tab.resolved { opacity: 0.6; }
|
||||
.discussion-messages {
|
||||
flex: 1; overflow-y: auto;
|
||||
padding: 14px;
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
}
|
||||
.discussion-empty {
|
||||
flex: 1; display: flex; align-items: center; justify-content: center;
|
||||
text-align: center; padding: 24px;
|
||||
}
|
||||
.discussion-empty p {
|
||||
font-size: 13px; color: #999; line-height: 1.6; max-width: 280px;
|
||||
}
|
||||
.discussion-error {
|
||||
background: #fee; border: 1px solid #fcc; color: #b91c1c;
|
||||
padding: 8px 10px; border-radius: 4px; font-size: 12px;
|
||||
}
|
||||
.discussion-message { display: flex; flex-direction: column; gap: 3px; }
|
||||
.discussion-message-meta {
|
||||
display: flex; gap: 8px; font-size: 11px; color: #888;
|
||||
}
|
||||
.discussion-message-author { color: #5b5bd6; font-weight: 500; }
|
||||
.discussion-message-quote {
|
||||
font-size: 11px; color: #666; font-style: italic;
|
||||
border-left: 2px solid #ddd; padding-left: 8px; margin-bottom: 2px;
|
||||
}
|
||||
.discussion-message-body {
|
||||
font-size: 13px; color: #222; line-height: 1.5;
|
||||
white-space: pre-wrap; word-wrap: break-word;
|
||||
background: #f7f7f5; padding: 8px 10px; border-radius: 6px;
|
||||
}
|
||||
.discussion-message.system .discussion-system-bubble {
|
||||
font-size: 12px; color: #888; font-style: italic;
|
||||
text-align: center; padding: 4px 0;
|
||||
}
|
||||
.discussion-composer {
|
||||
border-top: 1px solid #f0f0ee;
|
||||
padding: 10px 14px;
|
||||
background: #fafafa;
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
}
|
||||
.discussion-composer-textarea {
|
||||
width: 100%; resize: vertical; min-height: 60px;
|
||||
font-family: inherit; font-size: 13px;
|
||||
border: 1px solid #ddd; border-radius: 4px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
.discussion-composer-textarea:focus {
|
||||
outline: none; border-color: #5b5bd6;
|
||||
}
|
||||
.discussion-composer-actions {
|
||||
display: flex; gap: 8px; align-items: center; justify-content: flex-end;
|
||||
}
|
||||
.discussion-readonly {
|
||||
font-size: 12px; color: #666; padding: 4px 0;
|
||||
}
|
||||
|
||||
@@ -197,6 +197,52 @@ export async function resolveThread(slug, branch, threadId) {
|
||||
return jsonOrThrow(res)
|
||||
}
|
||||
|
||||
// ── v0.5.0: PR-less per-RFC discussion (§5 / §10) ────────────────────────
|
||||
//
|
||||
// The substrate is `threads.branch_name IS NULL` — the same threads
|
||||
// table the branch chat uses, with a null branch the schema already
|
||||
// supported. Contribution still requires a PR (api_prs / openPR), so
|
||||
// these endpoints are read+write for discussion only.
|
||||
|
||||
export async function listDiscussionThreads(slug) {
|
||||
return jsonOrThrow(await fetch(`/api/rfcs/${slug}/discussion/threads`))
|
||||
}
|
||||
|
||||
export async function createDiscussionThread(slug, { label = null, message = null } = {}) {
|
||||
const res = await fetch(`/api/rfcs/${slug}/discussion/threads`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ label, message }),
|
||||
})
|
||||
return jsonOrThrow(res)
|
||||
}
|
||||
|
||||
export async function getDiscussionThreadMessages(slug, threadId) {
|
||||
return jsonOrThrow(await fetch(
|
||||
`/api/rfcs/${slug}/discussion/threads/${threadId}/messages`,
|
||||
))
|
||||
}
|
||||
|
||||
export async function postDiscussionMessage(slug, threadId, { text, quote = null }) {
|
||||
const res = await fetch(
|
||||
`/api/rfcs/${slug}/discussion/threads/${threadId}/messages`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text, quote }),
|
||||
},
|
||||
)
|
||||
return jsonOrThrow(res)
|
||||
}
|
||||
|
||||
export async function resolveDiscussionThread(slug, threadId) {
|
||||
const res = await fetch(
|
||||
`/api/rfcs/${slug}/discussion/threads/${threadId}/resolve`,
|
||||
{ method: 'POST' },
|
||||
)
|
||||
return jsonOrThrow(res)
|
||||
}
|
||||
|
||||
// ── Slice 4: super-draft body editing (§9.5) ─────────────────────────────
|
||||
|
||||
export async function startEditBranch(slug, body = {}) {
|
||||
|
||||
@@ -0,0 +1,290 @@
|
||||
// RFCDiscussionPanel.jsx — v0.5.0's PR-less per-RFC discussion surface.
|
||||
//
|
||||
// Roadmap item #3: an RFC's main view now has a discussion surface
|
||||
// distinct from PR comments and from branch chat. The substrate is the
|
||||
// existing threads/thread_messages tables — rows with
|
||||
// `threads.branch_name IS NULL` scope to "the RFC, no branch yet."
|
||||
//
|
||||
// Reused as the right-column panel on `branchParam === 'main'`. Branch
|
||||
// chat (ChatPanel.jsx) keeps its existing role for branch-scoped work,
|
||||
// including PRs. Contribution remains gated behind opening a PR —
|
||||
// nothing here writes to the document.
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import {
|
||||
createDiscussionThread,
|
||||
getDiscussionThreadMessages,
|
||||
listDiscussionThreads,
|
||||
postDiscussionMessage,
|
||||
resolveDiscussionThread,
|
||||
} from '../api'
|
||||
|
||||
export default function RFCDiscussionPanel({ slug, viewer }) {
|
||||
const [threads, setThreads] = useState([])
|
||||
const [messagesByThread, setMessagesByThread] = useState({})
|
||||
const [composer, setComposer] = useState('')
|
||||
const [activeThreadId, setActiveThreadId] = useState(null)
|
||||
const [error, setError] = useState(null)
|
||||
const [sending, setSending] = useState(false)
|
||||
const bottomRef = useRef(null)
|
||||
|
||||
// Pull threads + messages on mount / slug change.
|
||||
useEffect(() => {
|
||||
if (!slug) return
|
||||
let cancelled = false
|
||||
setError(null)
|
||||
setThreads([])
|
||||
setMessagesByThread({})
|
||||
setActiveThreadId(null)
|
||||
listDiscussionThreads(slug)
|
||||
.then(async ({ items }) => {
|
||||
if (cancelled) return
|
||||
setThreads(items || [])
|
||||
// Pre-load messages for each thread. The list is small (per-RFC,
|
||||
// not per-branch) so a fan-out fetch is fine; §19.2 candidate
|
||||
// for paging if a hot RFC accumulates lots of threads.
|
||||
const collected = {}
|
||||
for (const t of items || []) {
|
||||
try {
|
||||
const { messages } = await getDiscussionThreadMessages(slug, t.id)
|
||||
collected[t.id] = messages
|
||||
} catch {
|
||||
collected[t.id] = []
|
||||
}
|
||||
}
|
||||
if (!cancelled) {
|
||||
setMessagesByThread(collected)
|
||||
// Default the active thread to the system's lazy whole-doc
|
||||
// default (the first row with anchor_kind='whole-doc' and
|
||||
// no label) so the composer wires to a real id immediately.
|
||||
const dflt = (items || []).find(
|
||||
t => t.anchor_kind === 'whole-doc' && !t.label,
|
||||
)
|
||||
setActiveThreadId(dflt?.id || items?.[0]?.id || null)
|
||||
}
|
||||
})
|
||||
.catch(err => { if (!cancelled) setError(err.message) })
|
||||
return () => { cancelled = true }
|
||||
}, [slug])
|
||||
|
||||
// Scroll to bottom when messages land in the active thread.
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, [activeThreadId, messagesByThread[activeThreadId]?.length])
|
||||
|
||||
const handleSend = useCallback(async () => {
|
||||
if (!viewer) { window.location.href = '/auth/login'; return }
|
||||
const text = composer.trim()
|
||||
if (!text || sending) return
|
||||
setSending(true)
|
||||
setError(null)
|
||||
try {
|
||||
// If no thread yet, mint one with the message as its first turn.
|
||||
if (!activeThreadId) {
|
||||
const { thread_id, message_id } = await createDiscussionThread(slug, { message: text })
|
||||
// Re-pull authoritative state — the default whole-doc thread
|
||||
// existed pre-this call (the GET creates it lazily), so we
|
||||
// either get the existing default's id back from the new
|
||||
// thread's row or the prior default; either way the list call
|
||||
// is the source of truth.
|
||||
const { items } = await listDiscussionThreads(slug)
|
||||
setThreads(items || [])
|
||||
const { messages } = await getDiscussionThreadMessages(slug, thread_id)
|
||||
setMessagesByThread(prev => ({ ...prev, [thread_id]: messages }))
|
||||
setActiveThreadId(thread_id)
|
||||
void message_id
|
||||
} else {
|
||||
const { message_id } = await postDiscussionMessage(slug, activeThreadId, { text })
|
||||
const { messages } = await getDiscussionThreadMessages(slug, activeThreadId)
|
||||
setMessagesByThread(prev => ({ ...prev, [activeThreadId]: messages }))
|
||||
void message_id
|
||||
}
|
||||
setComposer('')
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setSending(false)
|
||||
}
|
||||
}, [composer, sending, viewer, slug, activeThreadId])
|
||||
|
||||
const handleNewThread = useCallback(async () => {
|
||||
if (!viewer) { window.location.href = '/auth/login'; return }
|
||||
setError(null)
|
||||
try {
|
||||
const { thread_id } = await createDiscussionThread(slug, { label: null, message: null })
|
||||
const { items } = await listDiscussionThreads(slug)
|
||||
setThreads(items || [])
|
||||
setActiveThreadId(thread_id)
|
||||
setMessagesByThread(prev => ({ ...prev, [thread_id]: [] }))
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
}
|
||||
}, [viewer, slug])
|
||||
|
||||
const handleResolve = useCallback(async (threadId) => {
|
||||
if (!viewer) return
|
||||
setError(null)
|
||||
try {
|
||||
await resolveDiscussionThread(slug, threadId)
|
||||
const { items } = await listDiscussionThreads(slug)
|
||||
setThreads(items || [])
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
}
|
||||
}, [viewer, slug])
|
||||
|
||||
const onKeyDown = useCallback((e) => {
|
||||
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault()
|
||||
handleSend()
|
||||
}
|
||||
}, [handleSend])
|
||||
|
||||
const activeThread = threads.find(t => t.id === activeThreadId) || null
|
||||
const activeMessages = messagesByThread[activeThreadId] || []
|
||||
const openThreads = threads.filter(t => t.state === 'open')
|
||||
|
||||
return (
|
||||
<div className="discussion-panel">
|
||||
<div className="discussion-header">
|
||||
<span className="discussion-header-title">
|
||||
Discussion <span className="beta-chip">Beta</span>
|
||||
</span>
|
||||
<span className="discussion-header-meta">
|
||||
{openThreads.length} open thread{openThreads.length === 1 ? '' : 's'}
|
||||
{' · '}contribution requires a PR
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{threads.length > 1 && (
|
||||
<div className="discussion-thread-tabs">
|
||||
{threads.map(t => (
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
className={`discussion-thread-tab ${t.id === activeThreadId ? 'active' : ''} ${t.state === 'resolved' ? 'resolved' : ''}`}
|
||||
onClick={() => setActiveThreadId(t.id)}
|
||||
title={t.label || (t.id === activeThreadId ? 'Current thread' : 'Open thread')}
|
||||
>
|
||||
{t.label || (t.anchor_kind === 'whole-doc' && !t.label ? 'General' : `Thread ${t.id}`)}
|
||||
{t.state === 'resolved' && ' ✓'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="discussion-messages">
|
||||
{error && <div className="discussion-error">{error}</div>}
|
||||
{activeMessages.length === 0 && !error && (
|
||||
<div className="discussion-empty">
|
||||
<p>
|
||||
{viewer
|
||||
? 'No discussion yet. Be the first to comment — discussion lives here without opening a PR. To propose an edit, use Start Contributing above.'
|
||||
: 'No discussion yet. Sign in to comment. Discussion lives here without opening a PR; proposed edits still flow through PRs.'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{activeMessages.map(msg => (
|
||||
<DiscussionMessage key={msg.id} message={msg} />
|
||||
))}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
|
||||
<div className="discussion-composer">
|
||||
{viewer ? (
|
||||
<>
|
||||
<textarea
|
||||
className="discussion-composer-textarea"
|
||||
value={composer}
|
||||
onChange={e => setComposer(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
placeholder={
|
||||
activeThread?.label
|
||||
? `Reply in "${activeThread.label}" — Cmd/Ctrl+Enter to send`
|
||||
: 'Discuss this RFC — Cmd/Ctrl+Enter to send'
|
||||
}
|
||||
disabled={sending}
|
||||
rows={3}
|
||||
/>
|
||||
<div className="discussion-composer-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-secondary"
|
||||
onClick={handleNewThread}
|
||||
disabled={sending}
|
||||
title="Open a fresh discussion thread on this RFC"
|
||||
>
|
||||
New thread
|
||||
</button>
|
||||
{activeThread
|
||||
&& activeThread.state === 'open'
|
||||
&& (activeThread.created_by === viewer.user_id
|
||||
|| viewer.role === 'owner'
|
||||
|| viewer.role === 'admin') && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn-link"
|
||||
onClick={() => handleResolve(activeThread.id)}
|
||||
disabled={sending}
|
||||
title="Mark this discussion thread resolved"
|
||||
>
|
||||
Resolve
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="btn-primary"
|
||||
onClick={handleSend}
|
||||
disabled={sending || !composer.trim()}
|
||||
>
|
||||
{sending ? 'Sending…' : 'Send'}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="discussion-readonly">
|
||||
Read-only — <a href="/auth/login">sign in</a> to join the discussion.
|
||||
Discussion is in private <strong>Beta</strong>.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DiscussionMessage({ message }) {
|
||||
const isSystem = message.role === 'system'
|
||||
if (isSystem) {
|
||||
return (
|
||||
<div className="discussion-message system">
|
||||
<div className="discussion-system-bubble">{message.text}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className={`discussion-message ${message.role}`}>
|
||||
<div className="discussion-message-meta">
|
||||
<span className="discussion-message-author">
|
||||
@{message.author_login || '—'}
|
||||
</span>
|
||||
<span className="discussion-message-time">
|
||||
{formatTimestamp(message.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
{message.quote && (
|
||||
<div className="discussion-message-quote">"{message.quote}"</div>
|
||||
)}
|
||||
<div className="discussion-message-body">{message.text}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function formatTimestamp(ts) {
|
||||
if (!ts) return ''
|
||||
try {
|
||||
const d = new Date(ts + (ts.endsWith('Z') ? '' : 'Z'))
|
||||
return d.toLocaleString()
|
||||
} catch {
|
||||
return ts
|
||||
}
|
||||
}
|
||||
@@ -39,6 +39,7 @@ import MarkdownPreview from './MarkdownPreview.jsx'
|
||||
import SelectionTooltip from './SelectionTooltip.jsx'
|
||||
import PromptBar from './PromptBar.jsx'
|
||||
import ChatPanel from './ChatPanel.jsx'
|
||||
import RFCDiscussionPanel from './RFCDiscussionPanel.jsx'
|
||||
import ChangePanel, { diffWords } from './ChangePanel.jsx'
|
||||
import PRModal from './PRModal.jsx'
|
||||
import GraduateDialog from './GraduateDialog.jsx'
|
||||
@@ -759,17 +760,25 @@ export default function RFCView({ viewer }) {
|
||||
data-open={drawerOpen ? 'true' : 'false'}
|
||||
/>
|
||||
<div className={`right-panel${drawerOpen ? ' drawer-open' : ''}`} role="complementary">
|
||||
<ChatPanel
|
||||
messages={messages}
|
||||
threads={branchView.threads || []}
|
||||
changes={changes}
|
||||
branchName={branchParam}
|
||||
isStreaming={isStreaming}
|
||||
contributionMode={mode === 'contribute'}
|
||||
onStartContribution={handleStartContributing}
|
||||
onScrollToChange={setFocusedChangeId}
|
||||
onResolveThread={handleResolveThread}
|
||||
/>
|
||||
{/* v0.5.0 — on main, the right panel is the PR-less discussion
|
||||
* surface (threads.branch_name IS NULL). Branches keep their
|
||||
* existing branch-chat panel; contribution still requires
|
||||
* opening a PR from a branch via the Open PR affordance above. */}
|
||||
{branchParam === 'main' ? (
|
||||
<RFCDiscussionPanel slug={slug} viewer={viewer} />
|
||||
) : (
|
||||
<ChatPanel
|
||||
messages={messages}
|
||||
threads={branchView.threads || []}
|
||||
changes={changes}
|
||||
branchName={branchParam}
|
||||
isStreaming={isStreaming}
|
||||
contributionMode={mode === 'contribute'}
|
||||
onStartContribution={handleStartContributing}
|
||||
onScrollToChange={setFocusedChangeId}
|
||||
onResolveThread={handleResolveThread}
|
||||
/>
|
||||
)}
|
||||
{mode === 'contribute' && (changes.length > 0 || manualPending) && (
|
||||
<ChangePanel
|
||||
changes={changes}
|
||||
|
||||
Reference in New Issue
Block a user