@kirosnn/mosaic 0.0.91 → 0.73.0

package/src/web/components/QuestionPanel.tsx

@@ -10,14 +10,41 @@ interface QuestionPanelProps {
 export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [customText, setCustomText] = useState('');
+    const [remaining, setRemaining] = useState<number | null>(request.timeout ?? null);
+    const [validationError, setValidationError] = useState<string | null>(null);
     const inputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
         setSelectedIndex(0);
         setCustomText('');
+        setValidationError(null);
+        setRemaining(request.timeout ?? null);
         if (inputRef.current) inputRef.current.focus();
     }, [request.id]);
 
+    useEffect(() => {
+        if (remaining === null || remaining <= 0) return;
+        const id = setInterval(() => {
+            setRemaining(prev => (prev !== null && prev > 0 ? prev - 1 : prev));
+        }, 1000);
+        return () => clearInterval(id);
+    }, [remaining !== null]);
+
+    const validateCustomText = (text: string): boolean => {
+        if (!request.validation) return true;
+        try {
+            if (!new RegExp(request.validation.pattern).test(text)) {
+                setValidationError(request.validation.message || `Input must match: ${request.validation.pattern}`);
+                return false;
+            }
+        } catch {
+            setValidationError('Invalid validation pattern');
+            return false;
+        }
+        setValidationError(null);
+        return true;
+    };
+
     const handleKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === 'ArrowUp') {
             e.preventDefault();
@@ -28,7 +55,9 @@ export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
         } else if (e.key === 'Enter') {
             e.preventDefault();
             if (customText.trim()) {
-                onAnswer(0, customText);
+                if (validateCustomText(customText)) {
+                    onAnswer(0, customText);
+                }
             } else {
                 onAnswer(selectedIndex);
             }
@@ -46,15 +75,22 @@ export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
 
     const handleSubmitCustom = (e: React.FormEvent) => {
         e.preventDefault();
-        if (customText.trim()) {
+        if (customText.trim() && validateCustomText(customText)) {
             onAnswer(0, customText);
         }
     };
 
+    let lastGroup: string | undefined;
+
     return (
         <div className="panel question-panel">
             <div className="panel-header">
                 <strong>Question</strong>
+                {remaining !== null && (
+                    <span style={{ marginLeft: '1rem', color: remaining <= 5 ? '#ff4444' : 'var(--text-muted)' }}>
+                        Timeout: {remaining}s
+                    </span>
+                )}
             </div>
             <div className="panel-content">
                 <div className="question-prompt">
@@ -63,17 +99,28 @@ export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
                     ))}
                 </div>
                 <div className="question-options">
-                    {request.options.map((option, index) => (
-                        <div
-                            key={index}
-                            className={`question-option ${index === selectedIndex ? 'selected' : ''}`}
-                            onClick={() => handleOptionClick(index)}
-                        >
-                            <span className="option-key">{index + 1}.</span>
-                            <span className="option-label">{option.label}</span>
-                        </div>
-                    ))}
+                    {request.options.map((option, index) => {
+                        const showGroupHeader = option.group && option.group !== lastGroup;
+                        lastGroup = option.group;
+                        return (
+                            <React.Fragment key={index}>
+                                {showGroupHeader && (
+                                    <div className="option-group-header">{option.group}</div>
+                                )}
+                                <div
+                                    className={`question-option ${index === selectedIndex ? 'selected' : ''}`}
+                                    onClick={() => handleOptionClick(index)}
+                                >
+                                    <span className="option-key">{index + 1}.</span>
+                                    <span className="option-label">{option.label}</span>
+                                </div>
+                            </React.Fragment>
+                        );
+                    })}
                 </div>
+                {validationError && (
+                    <div className="validation-error">{validationError}</div>
+                )}
                 <div className="custom-input-container">
                     <form onSubmit={handleSubmitCustom}>
                         <input
@@ -111,6 +158,13 @@ export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
                    gap: 0.5rem;
                    margin-bottom: 1rem;
                 }
+                .option-group-header {
+                   font-size: 0.85rem;
+                   color: var(--text-muted);
+                   font-weight: 600;
+                   margin-top: 0.5rem;
+                   padding-left: 0.25rem;
+                }
                 .question-option {
                    padding: 0.5rem;
                    border-radius: 4px;
@@ -130,6 +184,12 @@ export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
                    color: var(--text-muted);
                    width: 1.5rem;
                 }
+                .validation-error {
+                   color: #ff4444;
+                   font-size: 0.85rem;
+                   margin-bottom: 0.5rem;
+                   padding-left: 0.25rem;
+                }
                 .panel-input {
                     width: 100%;
                     padding: 0.75rem;

package/src/web/components/Setup.tsx

@@ -208,4 +208,4 @@ export function Setup({ onComplete }: SetupProps) {
             </div>
         </div>
     );
-}
+}

package/src/web/components/Sidebar.tsx

@@ -12,8 +12,6 @@ interface GroupedConversations {
 
 function getTimePeriod(timestamp: number): TimePeriod {
     const now = new Date();
-    const date = new Date(timestamp);
-
     const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
     const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000;
     const startOf7DaysAgo = startOfToday - 7 * 24 * 60 * 60 * 1000;
@@ -289,4 +287,4 @@ export function Sidebar({
             )}
         </>
     );
-}
+}

package/src/web/components/ThinkingIndicator.tsx

@@ -19,6 +19,8 @@ const THINKING_WORDS = [
 interface ThinkingIndicatorProps {
     startTime?: number;
     tokens?: number;
+    inProgressStep?: string;
+    nextStep?: string;
 }
 
 function formatElapsedTime(startTime: number | undefined): string {
@@ -36,7 +38,7 @@ function formatElapsedTime(startTime: number | undefined): string {
     return `${seconds}s`;
 }
 
-export function ThinkingIndicator({ startTime, tokens }: ThinkingIndicatorProps) {
+export function ThinkingIndicator({ startTime, tokens, nextStep }: ThinkingIndicatorProps) {
     const [shimmerPos, setShimmerPos] = useState(-2);
     const [, setTick] = useState(0);
     const thinkingWord = useMemo(
@@ -60,26 +62,44 @@ export function ThinkingIndicator({ startTime, tokens }: ThinkingIndicatorProps)
     const elapsedStr = formatElapsedTime(startTime);
 
     return (
-        <div className="thinking-indicator">
-            <span className="thinking-icon">&#x2058;</span>
-            <span className="thinking-text">
-                {text.split("").map((char, index) => {
-                    const inShimmer = index === shimmerPos || index === shimmerPos - 1;
-                    return (
-                        <span
-                            key={index}
-                            className={inShimmer ? "shimmer-active" : "shimmer-dim"}
-                        >
-                            {char}
-                        </span>
-                    );
-                })}
-            </span>
-            {elapsedStr && <span className="thinking-elapsed"> - {elapsedStr}</span>}
-            <span className="thinking-hint"> - esc to cancel</span>
-            {tokens !== undefined && tokens > 0 && (
-                <span className="thinking-tokens"> - {tokens.toLocaleString()} tokens</span>
+        <div className="thinking-block">
+            <div className="thinking-indicator">
+                <span className="thinking-icon">&#x2058;</span>
+                <span className="thinking-text">
+                    {text.split("").map((char, index) => {
+                        const inShimmer = index === shimmerPos || index === shimmerPos - 1;
+                        return (
+                            <span
+                                key={index}
+                                className={inShimmer ? "shimmer-active" : "shimmer-dim"}
+                            >
+                                {char}
+                            </span>
+                        );
+                    })}
+                </span>
+                {elapsedStr && (
+                    <>
+                        <span className="thinking-sep"> — </span>
+                        <span className="thinking-elapsed">{elapsedStr}</span>
+                    </>
+                )}
+                <span className="thinking-sep"> — </span>
+                <span className="thinking-hint">esc to cancel</span>
+                {tokens !== undefined && tokens > 0 && (
+                    <>
+                        <span className="thinking-sep"> — </span>
+                        <span className="thinking-tokens">{tokens.toLocaleString()} tokens</span>
+                    </>
+                )}
+            </div>
+            {nextStep && (
+                <div className="thinking-next-line">
+                    <span className="thinking-next-icon">⎿ </span>
+                    <span className="thinking-next-label">Next:</span>
+                    <span className="thinking-next-step">{nextStep}</span>
+                </div>
             )}
         </div>
     );
-}
+}

package/src/web/router.ts

@@ -43,4 +43,4 @@ export function navigateTo(route: Route): void {
 export function replaceTo(route: Route): void {
     const path = buildPath(route);
     window.history.replaceState(null, '', path);
-}
+}