dave/storkit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

story-kit: merge 241_story_help_slash_command

Browse Source
This commit is contained in:
Dave
2026-03-14 18:53:29 +00:00
parent 3abea68f9e
commit 568207687d
2 changed files with 168 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/Chat.tsx
View File

@@ -10,6 +10,7 @@ import { AgentPanel } from "./AgentPanel";
import { ChatHeader } from "./ChatHeader"; import { ChatHeader } from "./ChatHeader";
import type { ChatInputHandle } from "./ChatInput"; import type { ChatInputHandle } from "./ChatInput";
import { ChatInput } from "./ChatInput"; import { ChatInput } from "./ChatInput";
import { HelpOverlay } from "./HelpOverlay";
import { LozengeFlyProvider } from "./LozengeFlyContext"; import { LozengeFlyProvider } from "./LozengeFlyContext";
import { MessageItem } from "./MessageItem"; import { MessageItem } from "./MessageItem";
import { SideQuestionOverlay } from "./SideQuestionOverlay"; import { SideQuestionOverlay } from "./SideQuestionOverlay";
@@ -203,6 +204,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
response: string; response: string;
loading: boolean; loading: boolean;
} | null>(null); } | null>(null);
const [showHelp, setShowHelp] = useState(false);
// Ref so stale WebSocket callbacks can read the current queued messages // Ref so stale WebSocket callbacks can read the current queued messages
const queuedMessagesRef = useRef<{ id: string; text: string }[]>([]); const queuedMessagesRef = useRef<{ id: string; text: string }[]>([]);
const queueIdCounterRef = useRef(0); const queueIdCounterRef = useRef(0);
@@ -475,6 +477,12 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
const sendMessage = async (messageText: string) => { const sendMessage = async (messageText: string) => {
if (!messageText.trim()) return; if (!messageText.trim()) return;
// /help — show available slash commands overlay
if (/^\/help\s*$/i.test(messageText)) {
setShowHelp(true);
return;
}
// /btw <question> — answered from context without disrupting main chat // /btw <question> — answered from context without disrupting main chat
const btwMatch = messageText.match(/^\/btw\s+(.+)/s); const btwMatch = messageText.match(/^\/btw\s+(.+)/s);
if (btwMatch) { if (btwMatch) {
@@ -1193,6 +1201,8 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
</div> </div>
)} )}
{showHelp && <HelpOverlay onDismiss={() => setShowHelp(false)} />}
{sideQuestion && ( {sideQuestion && (
<SideQuestionOverlay <SideQuestionOverlay
question={sideQuestion.question} question={sideQuestion.question}

158
frontend/src/components/HelpOverlay.tsx Normal file
View File

@@ -0,0 +1,158 @@
import * as React from "react";
const { useEffect, useRef } = React;
interface SlashCommand {
name: string;
description: string;
}
const SLASH_COMMANDS: SlashCommand[] = [
{
name: "/help",
description: "Show this list of available slash commands.",
},
{
name: "/btw <question>",
description:
"Ask a side question using the current conversation as context. The question and answer are not added to the conversation history.",
},
];
interface HelpOverlayProps {
onDismiss: () => void;
}
/**
* Dismissible overlay that lists all available slash commands.
* Dismiss with Escape, Enter, or Space.
*/
export function HelpOverlay({ onDismiss }: HelpOverlayProps) {
const dismissRef = useRef(onDismiss);
dismissRef.current = onDismiss;
useEffect(() => {
const handler = (e: KeyboardEvent) => {
if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
e.preventDefault();
dismissRef.current();
}
};
window.addEventListener("keydown", handler);
return () => window.removeEventListener("keydown", handler);
}, []);
return (
// biome-ignore lint/a11y/noStaticElementInteractions: backdrop dismiss is supplementary; keyboard handled via window keydown
// biome-ignore lint/a11y/useKeyWithClickEvents: keyboard dismiss handled via window keydown listener
<div
data-testid="help-overlay"
onClick={onDismiss}
style={{
position: "fixed",
inset: 0,
background: "rgba(0,0,0,0.55)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 1000,
}}
>
{/* biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation only; no real interaction */}
{/* biome-ignore lint/a11y/noStaticElementInteractions: stop-propagation only; no real interaction */}
<div
data-testid="help-panel"
onClick={(e) => e.stopPropagation()}
style={{
background: "#2f2f2f",
border: "1px solid #444",
borderRadius: "12px",
padding: "24px",
maxWidth: "560px",
width: "90vw",
display: "flex",
flexDirection: "column",
gap: "16px",
boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
}}
>
{/* Header */}
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<span
style={{
fontSize: "0.7rem",
fontWeight: 700,
letterSpacing: "0.08em",
textTransform: "uppercase",
color: "#a0d4a0",
}}
>
Slash Commands
</span>
<button
type="button"
onClick={onDismiss}
title="Dismiss (Escape, Enter, or Space)"
style={{
background: "none",
border: "none",
color: "#666",
cursor: "pointer",
fontSize: "1.1rem",
padding: "2px 6px",
borderRadius: "4px",
}}
>
✕
</button>
</div>
{/* Command list */}
<div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
{SLASH_COMMANDS.map((cmd) => (
<div
key={cmd.name}
style={{ display: "flex", flexDirection: "column", gap: "2px" }}
>
<code
style={{
fontSize: "0.88rem",
color: "#e0e0e0",
fontFamily: "monospace",
}}
>
{cmd.name}
</code>
<span
style={{
fontSize: "0.85rem",
color: "#999",
lineHeight: "1.5",
}}
>
{cmd.description}
</span>
</div>
))}
</div>
{/* Footer hint */}
<div
style={{
fontSize: "0.75rem",
color: "#555",
textAlign: "center",
}}
>
Press Escape, Enter, or Space to dismiss
</div>
</div>
</div>
);
}