omnira-ui 0.6.5 → 0.6.6

package/cli/omnira-init.mjs

@@ -487,6 +487,11 @@ const PAGE_BUNDLES = {
     // ── Shared pages bundles ──
     "login":                     ["AuthPage", "LoginSimple", "LoginSplitImage", "LoginSplitQuote", "LoginCardSeparated", "SocialButton", "Button", "Input", "Checkbox"],
     "sign-up":                   ["SignUpSimple", "SignUpSplitImage", "SignUpSplitQuote", "SignUpCardSeparated", "SocialButton", "Button", "Input", "Checkbox"],
+    "verification":              ["VerificationPage", "Button", "PinInput"],
+    "forgot-password":           ["ForgotPassword", "Button", "Input", "Checkbox"],
+    "not-found-page":            ["NotFoundPage", "Button"],
+    "404":                       ["NotFoundPage", "Button"],
+    "email-template":            ["EmailTemplate"],
 };
 
 // ── Add command — copy a single component ───────────────────────────

package/components/ui/ActivityFeed/ActivityFeed.module.css

@@ -8,13 +8,13 @@
     background: var(--color-bg-card);
     border: 1px solid var(--color-border-standard);
     border-radius: var(--radius-xl);
-    padding: 24px;
+    padding: 20px;
 }
 
 /* ── Item ── */
 .item {
     display: flex;
-    gap: 12px;
+    gap: 10px;
     position: relative;
 }
 
@@ -32,27 +32,27 @@
     flex-direction: column;
     align-items: center;
     flex-shrink: 0;
-    width: 36px;
+    width: 30px;
 }
 
 .avatar {
-    width: 36px;
-    height: 36px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
 }
 
 .avatarFallback {
-    width: 36px;
-    height: 36px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     background: var(--color-bg-elevated);
     border: 1px solid var(--color-border-standard);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 600;
     color: var(--color-text-secondary);
     flex-shrink: 0;
@@ -60,8 +60,8 @@
 }
 
 .iconBubble {
-    width: 36px;
-    height: 36px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     background: var(--color-bg-lime-subtle);
     display: flex;
@@ -74,20 +74,20 @@
 .connector {
     width: 2px;
     flex: 1;
-    min-height: 24px;
+    min-height: 20px;
     background: var(--color-border-standard);
 }
 
 /* ── Compact ── */
 .compact .timeline {
-    width: 28px;
+    width: 24px;
 }
 
 .compact .avatar,
 .compact .avatarFallback,
 .compact .iconBubble {
-    width: 28px;
-    height: 28px;
+    width: 24px;
+    height: 24px;
 }
 
 .compact .avatarFallback {
@@ -95,18 +95,18 @@
 }
 
 .compact .connector {
-    min-height: 16px;
+    min-height: 12px;
 }
 
 /* ── Content Column ── */
 .content {
     flex: 1;
     min-width: 0;
-    padding-bottom: 24px;
+    padding-bottom: 18px;
 }
 
 .compact .content {
-    padding-bottom: 16px;
+    padding-bottom: 12px;
 }
 
 .item:last-child .content {
@@ -122,8 +122,8 @@
 }
 
 .userName {
-    font-size: 14px;
-    font-weight: 600;
+    font-size: 13px;
+    font-weight: 500;
     color: var(--color-text-primary);
 }
 
@@ -133,7 +133,7 @@
 }
 
 .body {
-    font-size: 14px;
+    font-size: 13px;
     color: var(--color-text-secondary);
     line-height: 1.5;
 }

package/components/ui/AgentThinking/AgentThinking.module.css

@@ -120,6 +120,8 @@
     position: relative;
     flex-shrink: 0;
     user-select: none;
+    min-width: 160px;
+    height: 42px;
 }
 
 .chip:hover {
@@ -217,6 +219,10 @@
     min-width: 0;
     position: relative;
     z-index: 1;
+    flex: 1;
+    overflow: hidden;
+    height: 28px;
+    justify-content: center;
 }
 
 .chipName {
@@ -257,6 +263,7 @@
     display: flex;
     align-items: center;
     gap: 0;
+    height: 14px;
 }
 
 .cursor {

package/components/ui/AgentThinking/AgentThinking.tsx

@@ -7,33 +7,39 @@ import type { AgentConfig, AgentActivity, AgentState } from "./types";
 import s from "./AgentThinking.module.css";
 
 /* ══════════════════════════════════════════════
-   Typewriter hook
+   Text cycling hook — fixed-size status rotation
    ══════════════════════════════════════════════ */
 
-function useTypewriter(text: string, isActive: boolean, speed = 30) {
-    const [displayed, setDisplayed] = useState("");
-    const indexRef = useRef(0);
+const STATUS_PHRASES = [
+    "Analyzing...",
+    "Taking action...",
+    "Sending emails...",
+    "On a phone call...",
+    "Reflecting...",
+    "Processing data...",
+    "Searching...",
+    "Composing response...",
+];
+
+function useTextCycler(text: string, isActive: boolean, intervalMs = 2400) {
+    const [displayed, setDisplayed] = useState(text || STATUS_PHRASES[0]);
+    const idxRef = useRef(0);
 
     useEffect(() => {
-        if (!isActive || !text) {
+        if (!isActive) {
             setDisplayed("");
-            indexRef.current = 0;
             return;
         }
-        setDisplayed("");
-        indexRef.current = 0;
+        setDisplayed(text || STATUS_PHRASES[0]);
+        idxRef.current = 0;
 
-        const interval = setInterval(() => {
-            indexRef.current += 1;
-            if (indexRef.current <= text.length) {
-                setDisplayed(text.slice(0, indexRef.current));
-            } else {
-                clearInterval(interval);
-            }
-        }, speed);
+        const timer = setInterval(() => {
+            idxRef.current = (idxRef.current + 1) % STATUS_PHRASES.length;
+            setDisplayed(STATUS_PHRASES[idxRef.current]);
+        }, intervalMs);
 
-        return () => clearInterval(interval);
-    }, [text, isActive, speed]);
+        return () => clearInterval(timer);
+    }, [text, isActive, intervalMs]);
 
     return displayed;
 }
@@ -101,10 +107,10 @@ interface AgentChipProps {
 
 function AgentChip({ agent, activity, isPopoverOpen, onTogglePopover }: AgentChipProps) {
     const isAnimating = activity.state === "thinking" || activity.state === "active";
-    const typed = useTypewriter(
+    const statusText = useTextCycler(
         activity.currentAction?.text ?? "",
         isAnimating,
-        28
+        2400
     );
 
     const chipStyle: React.CSSProperties = {
@@ -158,7 +164,7 @@ function AgentChip({ agent, activity, isPopoverOpen, onTogglePopover }: AgentChi
                     </span>
                     {isAnimating ? (
                         <span className={s.activityText}>
-                            {typed}
+                            {statusText}
                             <span className={s.cursor} style={{ background: agent.color }} />
                         </span>
                     ) : activity.state === "completed" ? (

package/components/ui/CodeSnippet/CodeSnippet.module.css

@@ -5,7 +5,7 @@
 .wrapper {
     border-radius: var(--radius-xl);
     border: 1px solid var(--color-border-subtle);
-    background: var(--color-bg-elevated);
+    background: #0d1117;
     overflow: hidden;
     font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
 }
@@ -17,8 +17,8 @@
     align-items: center;
     justify-content: space-between;
     padding: 10px 16px;
-    border-bottom: 1px solid var(--color-border-subtle);
-    background: var(--color-bg-card);
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+    background: #0a0e14;
 }
 
 .headerLeft {
@@ -77,7 +77,7 @@
     overflow-x: auto;
     font-size: 13px;
     line-height: 1.65;
-    color: var(--color-text-secondary);
+    color: #c9d1d9;
 }
 
 .table {
@@ -95,8 +95,8 @@
     text-align: right;
     padding-right: 16px;
     user-select: none;
-    color: var(--color-text-tertiary);
-    opacity: 0.5;
+    color: #484f58;
+    opacity: 1;
     font-size: 12px;
     min-width: 32px;
     vertical-align: top;
@@ -116,43 +116,63 @@
     padding: 0;
 }
 
-/* ── Syntax colors ── */
+/* ── Syntax colors (GitHub Dark-inspired) ── */
 
 .tokenKeyword {
-    color: var(--color-lime);
-    font-weight: 600;
+    color: #ff7b72;
+    font-weight: 500;
 }
 
 .tokenString {
-    color: var(--color-info);
+    color: #a5d6ff;
 }
 
 .tokenComment {
-    color: var(--color-text-tertiary);
+    color: #8b949e;
     font-style: italic;
-    opacity: 0.7;
 }
 
 .tokenFunction {
-    color: var(--color-warning);
+    color: #d2a8ff;
 }
 
 .tokenNumber {
-    color: var(--color-error);
+    color: #79c0ff;
 }
 
 .tokenPunctuation {
-    color: var(--color-text-tertiary);
+    color: #8b949e;
 }
 
 .tokenTag {
-    color: var(--color-error);
+    color: #7ee787;
 }
 
 .tokenAttr {
-    color: var(--color-lime);
+    color: #79c0ff;
 }
 
 .tokenAttrValue {
-    color: var(--color-info);
+    color: #a5d6ff;
+}
+
+.tokenType {
+    color: #ffa657;
+}
+
+.tokenOperator {
+    color: #ff7b72;
+}
+
+.tokenProperty {
+    color: #79c0ff;
+}
+
+.tokenConst {
+    color: #79c0ff;
+    font-weight: 500;
+}
+
+.tokenBool {
+    color: #79c0ff;
 }

package/components/ui/CodeSnippet/CodeSnippet.tsx

@@ -26,6 +26,86 @@ export interface CodeSnippetProps {
     className?: string;
 }
 
+/* ══════════════════════════════════════════════
+   Simple syntax tokenizer
+   ══════════════════════════════════════════════ */
+
+interface Token {
+    type: string;
+    value: string;
+}
+
+const KEYWORDS = new Set([
+    "import", "export", "from", "const", "let", "var", "function", "return",
+    "if", "else", "for", "while", "do", "switch", "case", "break", "continue",
+    "class", "extends", "new", "this", "super", "typeof", "instanceof",
+    "try", "catch", "finally", "throw", "async", "await", "yield",
+    "default", "interface", "type", "enum", "implements", "package",
+    "private", "protected", "public", "static", "void", "null", "undefined",
+    "def", "print", "elif", "except", "raise", "with", "as", "pass", "lambda",
+    "in", "not", "and", "or", "is", "None", "self", "cls",
+]);
+
+const TYPES = new Set([
+    "string", "number", "boolean", "any", "object", "Array", "Promise",
+    "Record", "Map", "Set", "React", "HTMLElement", "void",
+    "int", "float", "str", "list", "dict", "tuple", "bool",
+]);
+
+const BOOLEANS = new Set(["true", "false", "True", "False"]);
+
+function tokenizeLine(line: string): Token[] {
+    const tokens: Token[] = [];
+    const regex = /(\/\/.*$|\/\*[\s\S]*?\*\/|#.*$)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\b\d+\.?\d*\b)|(=>|===?|!==?|<=?|>=?|&&|\|\||[+\-*/%]=?|\.\.\.)|(\b[A-Z][a-zA-Z0-9]*\b)|(\b[a-zA-Z_$][a-zA-Z0-9_$]*(?=\s*\())|(\b[a-zA-Z_$][a-zA-Z0-9_$]*\b)|([{}()\[\];:,.])|([^\S]+)|(.)/g;
+    let match;
+    while ((match = regex.exec(line)) !== null) {
+        const [full, comment, str, num, op, pascalCase, fn, word, punct, ws, other] = match;
+        if (comment) tokens.push({ type: "comment", value: comment });
+        else if (str) tokens.push({ type: "string", value: str });
+        else if (num) tokens.push({ type: "number", value: num });
+        else if (op) tokens.push({ type: "operator", value: op });
+        else if (pascalCase) {
+            if (TYPES.has(pascalCase)) tokens.push({ type: "type", value: pascalCase });
+            else tokens.push({ type: "type", value: pascalCase });
+        }
+        else if (fn) {
+            if (KEYWORDS.has(fn)) tokens.push({ type: "keyword", value: fn });
+            else tokens.push({ type: "function", value: fn });
+        }
+        else if (word) {
+            if (KEYWORDS.has(word)) tokens.push({ type: "keyword", value: word });
+            else if (BOOLEANS.has(word)) tokens.push({ type: "bool", value: word });
+            else if (TYPES.has(word)) tokens.push({ type: "type", value: word });
+            else tokens.push({ type: "plain", value: word });
+        }
+        else if (punct) tokens.push({ type: "punctuation", value: punct });
+        else tokens.push({ type: "plain", value: full });
+    }
+    return tokens;
+}
+
+const TOKEN_CLASS_MAP: Record<string, string> = {
+    keyword: s.tokenKeyword,
+    string: s.tokenString,
+    comment: s.tokenComment,
+    function: s.tokenFunction,
+    number: s.tokenNumber,
+    punctuation: s.tokenPunctuation,
+    type: s.tokenType,
+    operator: s.tokenOperator,
+    bool: s.tokenBool,
+};
+
+function renderTokenizedLine(line: string, lineIdx: number) {
+    if (!line) return "\n";
+    const tokens = tokenizeLine(line);
+    return tokens.map((tok, i) => {
+        const cls = TOKEN_CLASS_MAP[tok.type];
+        if (cls) return <span key={`${lineIdx}-${i}`} className={cls}>{tok.value}</span>;
+        return <React.Fragment key={`${lineIdx}-${i}`}>{tok.value}</React.Fragment>;
+    });
+}
+
 /* ══════════════════════════════════════════════
    CodeSnippet
    ══════════════════════════════════════════════ */
@@ -92,13 +172,15 @@ export function CodeSnippet({
                                     {i + 1}
                                 </span>
                                 <span className={s.lineContent} role="cell">
-                                    {line || "\n"}
+                                    {renderTokenizedLine(line, i)}
                                 </span>
                             </div>
                         ))}
                     </div>
                 ) : (
-                    <pre className={s.codeBlock}>{code}</pre>
+                    <pre className={s.codeBlock}>{lines.map((line, i) => (
+                        <React.Fragment key={i}>{renderTokenizedLine(line, i)}{"\n"}</React.Fragment>
+                    ))}</pre>
                 )}
             </div>
         </div>