{branchHeaders.map((header, index) => (
-
-
+
);
};
@@ -265,19 +128,24 @@ export const GitStatusIndicatorView: React.FC
+
{/* Create spacing to align with column */}
{Array.from({ length: header.columnIndex }).map((_, i) => (
-
+
{" "}
-
+
))}
- !
-
- [{header.branch}]
-
+ !
+
+ [{header.branch}]
+
))}
-
+
+
+
);
};
@@ -299,26 +167,29 @@ export const GitStatusIndicatorView: React.FCUncommitted changes:
+
{displayFiles.map((line, index) => (
- {line}
+
{isTruncated && (
-
+ {line}
+
))}
-
+
(showing {LIMIT} of {dirtyFiles.length} files)
-
+
)}
-
+
{commits.map((commit, index) => (
-
-
+
);
};
// Render tooltip via portal to bypass overflow constraints
const tooltipElement = (
-
+
))}
-
+
{renderIndicators(commit.indicators)}
- {commit.hash}
- {commit.date}
- {commit.subject}
-
-
+ {commit.hash}
+ {commit.date}
+ {commit.subject}
+
+
{images.map((image) => (
-
- onRemove(image.id)} title="Remove image">
+
);
};
diff --git a/src/components/KebabMenu.tsx b/src/components/KebabMenu.tsx
index f900ea218..61340f320 100644
--- a/src/components/KebabMenu.tsx
+++ b/src/components/KebabMenu.tsx
@@ -1,86 +1,7 @@
import React, { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
-import styled from "@emotion/styled";
import { TooltipWrapper, Tooltip } from "./Tooltip";
-
-const KebabButton = styled.button<{ active?: boolean }>`
- background: ${(props) => (props.active ? "rgba(255, 255, 255, 0.1)" : "none")};
- border: 1px solid rgba(255, 255, 255, 0.2);
- color: #cccccc;
- font-size: 10px;
- padding: 2px 8px;
- border-radius: 3px;
- cursor: pointer;
- transition: all 0.2s ease;
- font-family: var(--font-primary);
- display: flex;
- align-items: center;
- justify-content: center;
- white-space: nowrap;
-
- &:hover {
- background: rgba(255, 255, 255, 0.1);
- border-color: rgba(255, 255, 255, 0.3);
- }
-
- &:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- }
-`;
-
-const DropdownMenu = styled.div`
- position: fixed;
- background: #1e1e1e;
- border: 1px solid #3e3e42;
- border-radius: 3px;
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
- z-index: 10000;
- min-width: 160px;
- overflow: hidden;
-`;
-
-const MenuItem = styled.button<{ active?: boolean; disabled?: boolean }>`
- width: 100%;
- background: ${(props) => (props.active ? "rgba(255, 255, 255, 0.15)" : "#1e1e1e")};
- border: none;
- border-bottom: 1px solid #2d2d30;
- color: ${(props) => (props.disabled ? "#808080" : "#cccccc")};
- font-size: 11px;
- padding: 8px 12px;
- text-align: left;
- cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
- transition: all 0.15s ease;
- font-family: var(--font-primary);
- display: flex;
- align-items: center;
- gap: 8px;
- opacity: ${(props) => (props.disabled ? 0.5 : 1)};
-
- &:last-child {
- border-bottom: none;
- }
-
- &:hover {
- background: ${(props) => (props.disabled ? "#1e1e1e" : "rgba(255, 255, 255, 0.15)")};
- color: ${(props) => (props.disabled ? "#808080" : "#ffffff")};
- }
-`;
-
-const MenuItemEmoji = styled.span`
- font-size: 13px;
- width: 16px;
- text-align: center;
- flex-shrink: 0;
-`;
-
-const MenuItemLabel = styled.span`
- flex: 1;
-`;
-
-const MenuContainer = styled.div`
- position: relative;
-`;
+import { cn } from "@/lib/utils";
export interface KebabMenuItem {
label: string;
@@ -149,47 +70,62 @@ export const KebabMenu: React.FC
+ 
+
+
))}
-
+
{!collapsed &&
);
}
diff --git a/src/components/Messages/AssistantMessage.tsx b/src/components/Messages/AssistantMessage.tsx
index 8e3f9af0d..c8d19e96f 100644
--- a/src/components/Messages/AssistantMessage.tsx
+++ b/src/components/Messages/AssistantMessage.tsx
@@ -1,5 +1,4 @@
import React, { useState } from "react";
-import styled from "@emotion/styled";
import type { DisplayedMessage } from "@/types/message";
import { MarkdownRenderer } from "./MarkdownRenderer";
import { TypewriterMarkdown } from "./TypewriterMarkdown";
@@ -12,42 +11,6 @@ import { CompactingMessageContent } from "./CompactingMessageContent";
import { CompactionBackground } from "./CompactionBackground";
import type { KebabMenuItem } from "@/components/KebabMenu";
-const RawContent = styled.pre`
- font-family: var(--font-monospace);
- font-size: 12px;
- line-height: 1.6;
- color: var(--color-text);
- white-space: pre-wrap;
- word-break: break-word;
- margin: 0;
- padding: 8px;
- background: var(--color-code-bg);
- border-radius: 3px;
-`;
-
-const WaitingMessage = styled.div`
- font-family: var(--font-primary);
- font-size: 13px;
- color: var(--color-text-secondary);
- font-style: italic;
-`;
-
-const LabelContainer = styled.div`
- display: flex;
- align-items: center;
- gap: 8px;
-`;
-
-const CompactedBadge = styled.span`
- color: var(--color-plan-mode);
- font-weight: 500;
- font-size: 10px;
- padding: 2px 6px;
- background: var(--color-plan-mode-alpha);
- border-radius: 3px;
- text-transform: uppercase;
-`;
-
interface AssistantMessageProps {
message: DisplayedMessage & { type: "assistant" };
className?: string;
@@ -126,7 +89,11 @@ export const AssistantMessage: React.FC
+ Waiting for response...
+
+ );
}
// Streaming text gets typewriter effect
@@ -144,7 +111,9 @@ export const AssistantMessage: React.FC
+ {content}
+
) : (
{modelName && {COMPACTED_EMOJI} compacted }
-
+ {isCompacted && (
+
+ {COMPACTED_EMOJI} compacted
+
+ )}
+
);
};
diff --git a/src/components/Messages/ChatBarrier/BaseBarrier.tsx b/src/components/Messages/ChatBarrier/BaseBarrier.tsx
index 9a48f324d..bce2371aa 100644
--- a/src/components/Messages/ChatBarrier/BaseBarrier.tsx
+++ b/src/components/Messages/ChatBarrier/BaseBarrier.tsx
@@ -1,64 +1,5 @@
import React from "react";
-import styled from "@emotion/styled";
-
-interface BarrierContainerProps {
- animate?: boolean;
-}
-
-const BarrierContainer = styled.div
+
+
);
};
diff --git a/src/components/Messages/ChatBarrier/RetryBarrier.tsx b/src/components/Messages/ChatBarrier/RetryBarrier.tsx
index 270544a63..c9f4d199e 100644
--- a/src/components/Messages/ChatBarrier/RetryBarrier.tsx
+++ b/src/components/Messages/ChatBarrier/RetryBarrier.tsx
@@ -1,77 +1,8 @@
import React, { useState, useEffect, useCallback } from "react";
-import styled from "@emotion/styled";
import { usePersistedState } from "@/hooks/usePersistedState";
import { getRetryStateKey } from "@/constants/storage";
import { CUSTOM_EVENTS } from "@/constants/events";
-
-const BarrierContainer = styled.div`
- margin: 20px 0;
- padding: 16px 20px;
- background: linear-gradient(135deg, rgba(255, 165, 0, 0.1) 0%, rgba(255, 140, 0, 0.1) 100%);
- border-left: 4px solid var(--color-warning);
- border-radius: 4px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 16px;
-`;
-
-const BarrierContent = styled.div`
- display: flex;
- align-items: center;
- gap: 12px;
- flex: 1;
-`;
-
-const Icon = styled.span`
- font-size: 18px;
- line-height: 1;
-`;
-
-const Message = styled.div`
- font-family: var(--font-primary);
- font-size: 13px;
- color: var(--color-text);
- font-weight: 500;
-`;
-
-const Countdown = styled.span`
- font-family: var(--font-monospace);
- font-weight: 600;
- color: var(--color-warning);
-`;
-
-const Button = styled.button<{ variant?: "primary" | "secondary" }>`
- background: ${(props) =>
- props.variant === "secondary" ? "transparent" : "var(--color-warning)"};
- border: ${(props) => (props.variant === "secondary" ? "1px solid var(--color-warning)" : "none")};
- border-radius: 4px;
- padding: 8px 16px;
- font-family: var(--font-primary);
- font-size: 12px;
- font-weight: 600;
- color: ${(props) => (props.variant === "secondary" ? "var(--color-warning)" : "var(--color-bg)")};
- cursor: pointer;
- transition: all 0.2s;
- white-space: nowrap;
-
- &:hover:not(:disabled) {
- background: ${(props) =>
- props.variant === "secondary"
- ? "rgba(255, 165, 0, 0.1)"
- : "hsl(from var(--color-warning) h s calc(l * 1.2))"};
- transform: translateY(-1px);
- }
-
- &:active:not(:disabled) {
- transform: translateY(0);
- }
-
- &:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- }
-`;
+import { cn } from "@/lib/utils";
interface RetryBarrierProps {
workspaceId: string;
@@ -164,34 +95,56 @@ export const RetryBarrier: React.FC
+ {text}
+
+
+
+
);
} else {
// Manual retry mode: Show retry button
return (
-
+ 🔄
+
+
-
+
+
{countdown === 0 ? (
<>Retrying... (attempt {attempt + 1})
) : (
<>
- Retrying in {countdown}s (attempt {attempt + 1})
+ Retrying in{" "}
+ {countdown}s (attempt{" "}
+ {attempt + 1})
)}
-
-
-
+
+
);
}
};
diff --git a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
index fd66bced7..cd44d0019 100644
--- a/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
+++ b/src/components/Messages/ChatBarrier/StreamingBarrier.tsx
@@ -1,42 +1,6 @@
import React from "react";
-import styled from "@emotion/styled";
import { BaseBarrier } from "./BaseBarrier";
-const BarrierContainer = styled.div`
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 16px;
-`;
-
-const LeftContent = styled.div`
- display: flex;
- align-items: center;
- gap: 8px;
- flex: 1;
-`;
-
-const TokenInfo = styled.span`
- font-family: var(--font-mono);
- font-size: 11px;
- color: var(--color-assistant-border);
- user-select: none;
- white-space: nowrap;
-`;
-
-const TPS = styled.span`
- color: #666;
- margin-left: 4px;
-`;
-
-const CancelInstructions = styled.div`
- font-size: 11px;
- color: #888;
- user-select: none;
- white-space: nowrap;
- margin-left: auto;
-`;
-
interface StreamingBarrierProps {
className?: string;
statusText: string; // e.g., "claude-sonnet-4-5 streaming..."
@@ -53,17 +17,19 @@ export const StreamingBarrier: React.FC
+ ⚠️
+
+
+
+ Stream interrupted
+
+
+
+
~{tokenCount.toLocaleString()} tokens
- {tps !== undefined && tps > 0 && @ {tps} t/s }
-
+ {tps !== undefined && tps > 0 && @ {tps} t/s}
+
)}
-
- {cancelText}
-
+
+
);
};
diff --git a/src/components/Messages/CompactingMessageContent.tsx b/src/components/Messages/CompactingMessageContent.tsx
index 5e349fb69..302052b47 100644
--- a/src/components/Messages/CompactingMessageContent.tsx
+++ b/src/components/Messages/CompactingMessageContent.tsx
@@ -1,5 +1,4 @@
import React from "react";
-import styled from "@emotion/styled";
/**
* Wrapper for compaction streaming content
@@ -7,37 +6,22 @@ import styled from "@emotion/styled";
* No scrolling - content stays anchored to bottom, older content fades at top
*/
-const Container = styled.div`
- max-height: 300px;
- overflow: hidden;
- position: relative;
- display: flex;
- flex-direction: column;
- justify-content: flex-end; /* Anchor content to bottom */
-
- /* Fade effect: content fades progressively from top to bottom */
- mask-image: linear-gradient(
- to bottom,
- transparent 0%,
- rgba(0, 0, 0, 0.3) 5%,
- rgba(0, 0, 0, 0.6) 10%,
- rgba(0, 0, 0, 0.85) 15%,
- black 20%
- );
- -webkit-mask-image: linear-gradient(
- to bottom,
- transparent 0%,
- rgba(0, 0, 0, 0.3) 5%,
- rgba(0, 0, 0, 0.6) 10%,
- rgba(0, 0, 0, 0.85) 15%,
- black 20%
- );
-`;
-
interface CompactingMessageContentProps {
children: React.ReactNode;
}
export const CompactingMessageContent: React.FC
+ {cancelText}
+
+
+ {children}
+
+ );
};
diff --git a/src/components/Messages/CompactionBackground.tsx b/src/components/Messages/CompactionBackground.tsx
index 65b006032..02e6186da 100644
--- a/src/components/Messages/CompactionBackground.tsx
+++ b/src/components/Messages/CompactionBackground.tsx
@@ -1,85 +1,29 @@
import React from "react";
-import styled from "@emotion/styled";
-import { keyframes } from "@emotion/react";
/**
* Animated background for compaction streaming
* Shimmer effect with moving gradient and particles for dynamic appearance
*/
-const shimmer = keyframes`
- 0% {
- background-position: -1000px 0;
- }
- 100% {
- background-position: 1000px 0;
- }
-`;
-
-const gradientMove = keyframes`
- 0% {
- background-position: 0% 50%;
- }
- 50% {
- background-position: 100% 50%;
- }
- 100% {
- background-position: 0% 50%;
- }
-`;
-
-const Container = styled.div`
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
- pointer-events: none;
- border-radius: 6px;
-`;
-
-const AnimatedGradient = styled.div`
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: linear-gradient(
- -45deg,
- var(--color-plan-mode-alpha),
- color-mix(in srgb, var(--color-plan-mode) 30%, transparent),
- var(--color-plan-mode-alpha),
- color-mix(in srgb, var(--color-plan-mode) 25%, transparent)
- );
- background-size: 400% 400%;
- animation: ${gradientMove} 8s ease infinite;
- opacity: 0.4;
-`;
-
-const ShimmerLayer = styled.div`
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: linear-gradient(
- 90deg,
- transparent 0%,
- transparent 40%,
- var(--color-plan-mode-alpha) 50%,
- transparent 60%,
- transparent 100%
- );
- background-size: 1000px 100%;
- animation: ${shimmer} 3s infinite linear;
-`;
-
export const CompactionBackground: React.FC = () => {
return (
-
+
+
+
);
};
diff --git a/src/components/Messages/HistoryHiddenMessage.tsx b/src/components/Messages/HistoryHiddenMessage.tsx
index 854ce7bd2..8243ca844 100644
--- a/src/components/Messages/HistoryHiddenMessage.tsx
+++ b/src/components/Messages/HistoryHiddenMessage.tsx
@@ -1,20 +1,7 @@
import React from "react";
-import styled from "@emotion/styled";
+import { cn } from "@/lib/utils";
import type { DisplayedMessage } from "@/types/message";
-const HiddenIndicator = styled.div`
- margin: 20px 0;
- padding: 12px 15px;
- background: rgba(255, 255, 255, 0.03);
- border-left: 3px solid #569cd6;
- border-radius: 3px;
- color: #888888;
- font-size: 12px;
- font-weight: 400;
- text-align: center;
- font-family: var(--font-primary);
-`;
-
interface HistoryHiddenMessageProps {
message: DisplayedMessage & { type: "history-hidden" };
className?: string;
@@ -25,9 +12,15 @@ export const HistoryHiddenMessage: React.FC
{message.hiddenCount} older message{message.hiddenCount !== 1 ? "s" : ""} hidden for
performance
-
+
);
};
diff --git a/src/components/Messages/MarkdownRenderer.tsx b/src/components/Messages/MarkdownRenderer.tsx
index 4b83b7b0f..b2224ac88 100644
--- a/src/components/Messages/MarkdownRenderer.tsx
+++ b/src/components/Messages/MarkdownRenderer.tsx
@@ -1,11 +1,6 @@
import React from "react";
-import styled from "@emotion/styled";
-import { markdownStyles } from "./MarkdownStyles";
import { MarkdownCore } from "./MarkdownCore";
-
-const MarkdownContainer = styled.div`
- ${markdownStyles}
-`;
+import { cn } from "@/lib/utils";
interface MarkdownRendererProps {
content: string;
@@ -14,21 +9,28 @@ interface MarkdownRendererProps {
export const MarkdownRenderer: React.FC
+ {children}
+
+ );
+};
diff --git a/src/components/Messages/MarkdownStyles.ts b/src/components/Messages/MarkdownStyles.ts
index 7cf2b9b21..95e26a93f 100644
--- a/src/components/Messages/MarkdownStyles.ts
+++ b/src/components/Messages/MarkdownStyles.ts
@@ -1,216 +1,3 @@
-import { css } from "@emotion/react";
-
-export const markdownStyles = css`
- font-family: var(--font-primary);
- font-size: 14px;
- line-height: 1.6;
- color: var(--color-text);
- white-space: normal;
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- margin: 1.2em 0 0.6em 0;
- font-weight: 600;
- line-height: 1.25;
- }
-
- h1 {
- font-size: 20px;
- }
- h2 {
- font-size: 18px;
- }
- h3 {
- font-size: 16px;
- }
- h4 {
- font-size: 14px;
- }
- h5,
- h6 {
- font-size: 13px;
- }
-
- p {
- margin: 0.8em 0;
- }
-
- /* Remove default margins on first and last elements */
- > :first-of-type {
- margin-top: 0;
- }
-
- > :last-of-type {
- margin-bottom: 0;
- }
-
- ul,
- ol {
- margin: 0.8em 0;
- padding-left: 20px;
- }
-
- li {
- margin: 0.4em 0;
- }
-
- code {
- background: rgba(0, 0, 0, 0);
- padding: 2px 4px;
- border-radius: 3px;
- font-family: var(--font-monospace);
- font-size: 12px;
- color: #d19a66;
- }
-
- pre {
- background: rgba(0, 0, 0, 0.3);
- padding: 12px;
- border-radius: 4px;
- overflow-x: auto;
- margin: 1em 0;
-
- code {
- background: none;
- padding: 0;
- color: var(--color-text);
- }
- }
-
- blockquote {
- border-left: 3px solid var(--color-border);
- padding-left: 12px;
- margin: 1em 0;
- color: var(--color-text-secondary);
- font-style: italic;
- }
-
- strong {
- font-weight: 600;
- }
-
- em {
- font-style: italic;
- }
-
- hr {
- border: none;
- border-top: 1px solid var(--color-border);
- margin: 1.4em 0;
- }
-
- a {
- color: #569cd6;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
-
- table {
- border-collapse: collapse;
- width: 100%;
- margin: 1em 0;
-
- th,
- td {
- border: 1px solid var(--color-border);
- padding: 6px 12px;
- text-align: left;
- }
-
- th {
- background: rgba(255, 255, 255, 0.05);
- font-weight: 600;
- }
-
- tr:nth-of-type(even) {
- background: rgba(255, 255, 255, 0.02);
- }
- }
-
- img {
- max-width: 100%;
- height: auto;
- }
-
- /* Task lists */
- input[type="checkbox"] {
- margin-right: 6px;
- }
-
- /* Strikethrough */
- del {
- text-decoration: line-through;
- opacity: 0.6;
- }
-
- /* Mermaid diagrams */
- .mermaid-container {
- display: flex;
- justify-content: center;
- align-items: center;
- overflow-x: auto;
- max-width: 100%;
-
- svg {
- min-width: min-content;
- max-width: none;
- max-height: var(--diagram-max-height, 300px);
- height: auto;
- }
- }
-
- /* Mermaid in modal - allow larger sizing */
- .mermaid-modal {
- svg {
- max-width: none;
- width: auto;
- max-height: 80vh;
- }
- }
-
- /* Zoom wrapper for mermaid */
- .react-transform-wrapper {
- position: relative;
- width: 100%;
- background: rgba(0, 0, 0, 0.2);
- border-radius: 4px;
- margin: 1em 0;
- }
-
- .react-transform-component {
- width: 100%;
- height: 100%;
- }
-
- /* KaTeX math rendering */
- .katex {
- font-size: 1.1em;
- }
-
- .katex-display {
- margin: 1em 0;
- overflow-x: auto;
- overflow-y: hidden;
-
- > .katex {
- text-align: center;
- }
- }
-
- /* Math inline */
- p .katex,
- li .katex {
- display: inline;
- }
-`;
-
// Normalize markdown to remove excess blank lines
export function normalizeMarkdown(content: string): string {
// Replace 3 or more consecutive newlines with exactly 2 newlines
diff --git a/src/components/Messages/MessageWindow.tsx b/src/components/Messages/MessageWindow.tsx
index f77122b94..a896ae973 100644
--- a/src/components/Messages/MessageWindow.tsx
+++ b/src/components/Messages/MessageWindow.tsx
@@ -1,84 +1,11 @@
import type { ReactNode } from "react";
import React, { useState, useMemo } from "react";
-import styled from "@emotion/styled";
import type { CmuxMessage, DisplayedMessage } from "@/types/message";
import { HeaderButton } from "../tools/shared/ToolPrimitives";
import { formatTimestamp } from "@/utils/ui/dateTime";
import { TooltipWrapper, Tooltip } from "../Tooltip";
import { KebabMenu, type KebabMenuItem } from "../KebabMenu";
-const MessageBlock = styled.div<{ borderColor: string; backgroundColor?: string }>`
- position: relative;
- margin-bottom: 15px;
- margin-top: 15px;
- background: ${(props) => props.backgroundColor ?? "#1e1e1e"};
- border-left: 3px solid ${(props) => props.borderColor};
- border-radius: 3px;
- overflow: hidden;
-`;
-
-const MessageHeader = styled.div`
- position: relative;
- z-index: 1;
- padding: 4px 12px;
- background: rgba(255, 255, 255, 0.05);
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 11px;
- color: var(--color-message-header);
- font-weight: 500;
-`;
-
-const LeftSection = styled.div`
- display: flex;
- align-items: baseline; /* Use baseline for consistent text alignment */
- gap: 12px;
- min-width: 0; /* Allow flex children to shrink below content size */
- flex: 1; /* Take available space but allow ButtonGroup to stay on same line */
-`;
-
-const MessageTypeLabel = styled.div`
- display: inline-flex;
- align-items: baseline; /* Ensure children align on baseline */
- text-transform: uppercase;
- letter-spacing: 0.5px;
- white-space: nowrap; /* Prevent line breaking */
- overflow: hidden; /* Hide overflow */
- min-width: 0; /* Allow shrinking */
-`;
-
-const TimestampText = styled.span`
- font-size: 10px;
- color: var(--color-text-secondary);
- font-weight: 400;
-`;
-
-const ButtonGroup = styled.div`
- display: flex;
- gap: 6px;
-`;
-
-const MessageContent = styled.div`
- position: relative;
- z-index: 1;
- padding: 12px;
-`;
-
-const JsonContent = styled.pre`
- margin: 0;
- font-family: var(--font-monospace);
- font-size: 11px;
- line-height: 1.4;
- white-space: pre-wrap;
- color: #d4d4d4;
- background: rgba(0, 0, 0, 0.3);
- padding: 8px;
- border-radius: 3px;
- overflow-x: auto;
-`;
-
export interface ButtonConfig {
label: string;
onClick: () => void;
@@ -126,21 +53,38 @@ export const MessageWindow: React.FC
+
+
+ {formattedTimestamp}
+
+ {formattedTimestamp}
+
)}
-
-
+
+
+ {label}
+
{formattedTimestamp && (
-
{rightLabel}
{buttons.map((button, index) =>
button.tooltip ? (
@@ -176,12 +120,18 @@ export const MessageWindow: React.FC = ({
{showJson ? "Hide JSON" : "Show JSON"}
)}
-
-
-
- {showJson ? {JSON.stringify(message, null, 2)} : children}
-
-
+
+
+ {showJson ? (
+
+
);
};
@@ -207,7 +157,7 @@ const ButtonWithHoverEmoji: React.FC
+ {JSON.stringify(message, null, 2)}
+
+ ) : (
+ children
+ )}
+ Thinking...
;
}
// Streaming text gets typewriter effect
@@ -108,16 +45,37 @@ export const ReasoningMessage: React.FC
+
);
};
diff --git a/src/components/Messages/StreamErrorMessage.tsx b/src/components/Messages/StreamErrorMessage.tsx
index 1a7b9f891..46bb20da0 100644
--- a/src/components/Messages/StreamErrorMessage.tsx
+++ b/src/components/Messages/StreamErrorMessage.tsx
@@ -1,62 +1,6 @@
import React from "react";
-import styled from "@emotion/styled";
import type { DisplayedMessage } from "@/types/message";
-
-const ErrorContainer = styled.div`
- background: var(--color-error-bg);
- border: 1px solid var(--color-error);
- border-radius: 4px;
- padding: 16px 20px;
- margin: 12px 0;
-`;
-
-const ErrorHeader = styled.div`
- font-family: var(--font-primary);
- font-size: 13px;
- font-weight: 600;
- color: var(--color-error);
- margin-bottom: 12px;
- display: flex;
- align-items: center;
- gap: 10px;
- letter-spacing: 0.2px;
-`;
-
-const ErrorIcon = styled.span`
- font-size: 16px;
- line-height: 1;
-`;
-
-const ErrorContent = styled.div`
- font-family: var(--font-monospace);
- font-size: 13px;
- color: var(--color-text);
- line-height: 1.6;
- word-break: break-word;
-`;
-
-const ErrorType = styled.span`
- font-family: var(--font-monospace);
- font-size: 10px;
- color: var(--color-text-secondary);
- text-transform: uppercase;
- background: rgba(0, 0, 0, 0.4);
- padding: 3px 8px;
- border-radius: 3px;
- letter-spacing: 0.5px;
-`;
-
-const ErrorCount = styled.span`
- font-family: var(--font-monospace);
- font-size: 10px;
- color: var(--color-error);
- background: rgba(255, 0, 0, 0.15);
- padding: 3px 8px;
- border-radius: 3px;
- letter-spacing: 0.3px;
- font-weight: 600;
- margin-left: auto;
-`;
+import { cn } from "@/lib/utils";
interface StreamErrorMessageProps {
message: DisplayedMessage & { type: "stream-error" };
@@ -68,14 +12,22 @@ export const StreamErrorMessage: React.FC
+
+
+ {isExpanded && (
+
+ 💭
Thinking
-
- {!isStreaming && ▸ }
-
-
- {isExpanded && {renderContent()} }
-
+
+ {!isStreaming && (
+
+ ▸
+
+ )}
+
+ {renderContent()}
+
+ )}
+
+
);
};
diff --git a/src/components/Messages/TerminalOutput.tsx b/src/components/Messages/TerminalOutput.tsx
index d421dbac1..e63a577f2 100644
--- a/src/components/Messages/TerminalOutput.tsx
+++ b/src/components/Messages/TerminalOutput.tsx
@@ -1,21 +1,5 @@
import React from "react";
-import styled from "@emotion/styled";
-
-const ResultOutput = styled.pre<{ isError?: boolean }>`
- margin: 0;
- padding: 8px;
- background: rgba(0, 0, 0, 0.3);
- border-radius: 2px;
- font-family: var(--font-monospace);
- font-size: 11px;
- line-height: 1.4;
- color: ${(props) => (props.isError ? "#f48771" : "#d4d4d4")};
- overflow-x: auto;
- max-height: 300px;
- overflow-y: auto;
- white-space: pre-wrap;
- word-break: break-all;
-`;
+import { cn } from "@/lib/utils";
export interface TerminalOutputProps {
output: string;
@@ -29,8 +13,15 @@ export const TerminalOutput: React.FC
+ ●
Stream Error
- {message.errorType}
- {showCount && ×{message.errorCount} }
-
- {message.error}
-
+
+ {message.errorType}
+
+ {showCount && (
+
+ ×{message.errorCount}
+
+ )}
+
+
+ {message.error}
+
+
{output}
-
+ {content}
+
+ )}
{message.imageParts && message.imageParts.length > 0 && (
-
{message.imageParts.map((img, idx) => (
- 
))}
-
+
)}
);
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index bc083f962..f00b2f1c0 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,165 +1,178 @@
import React, { useEffect, useCallback, useId } from "react";
-import styled from "@emotion/styled";
+import { cn } from "@/lib/utils";
import { matchesKeybind, KEYBINDS } from "@/utils/ui/keybinds";
-// Styled Components
-export const ModalOverlay = styled.div`
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.5);
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 1000;
-`;
-
-export const ModalContent = styled.div<{ maxWidth?: string; maxHeight?: string }>`
- background: #1e1e1e;
- border-radius: 8px;
- padding: 24px;
- width: 90%;
- max-width: ${(props) => props.maxWidth ?? "500px"};
- ${(props) => props.maxHeight && `max-height: ${props.maxHeight};`}
- display: flex;
- flex-direction: column;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
- border: 1px solid #333;
-
- h2 {
- margin-top: 0;
- margin-bottom: 8px;
- color: #fff;
- }
-`;
-
-export const ModalSubtitle = styled.p`
- color: #888;
- font-size: 14px;
- margin-bottom: 20px;
-`;
-
-export const ModalInfo = styled.div`
- background: #2d2d2d;
- border: 1px solid #444;
- border-radius: 4px;
- padding: 12px;
- margin-bottom: 20px;
- font-size: 13px;
-
- p {
- margin: 0 0 8px 0;
- color: #888;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
+// Export utility components for backwards compatibility
+export const ModalOverlay: React.FC<{
+ children: React.ReactNode;
+ onClick?: () => void;
+ role?: string;
+ className?: string;
+}> = ({ children, onClick, role, className }) => (
+
+ {children}
+
+);
+
+export const ModalContent: React.FC<
+ {
+ children: React.ReactNode;
+ maxWidth?: string;
+ maxHeight?: string;
+ className?: string;
+ } & React.HTMLAttributes
+ {children}
+
+);
+
+export const ModalSubtitle: React.FC<{
+ children: React.ReactNode;
+ id?: string;
+ className?: string;
+}> = ({ children, id, className }) => (
+ + {children} +
+); + +export const ModalInfo: React.FC<{ + children: React.ReactNode; + className?: string; + id?: string; +}> = ({ children, className, id }) => ( +
+ {children}
+
+);
+
+export const ModalActions: React.FC<{ children: React.ReactNode; className?: string }> = ({
+ children,
+ className,
+}) => {children}
;
- code {
- color: #569cd6;
- font-family: var(--font-monospace);
- }
-`;
+// Reusable error/warning display components for modals
+export const ErrorSection: React.FC<{ children: React.ReactNode; className?: string }> = ({
+ children,
+ className,
+}) => {children}
;
-export const ModalActions = styled.div`
- display: flex;
- justify-content: flex-end;
- gap: 12px;
- margin-top: 24px;
-`;
+export const ErrorLabel: React.FC<{ children: React.ReactNode; className?: string }> = ({
+ children,
+ className,
+}) => (
+
+ {children}
+
+);
+
+export const ErrorCodeBlock: React.FC<{ children: React.ReactNode; className?: string }> = ({
+ children,
+ className,
+}) => (
+
+ {children}
+
+);
+
+export const WarningBox: React.FC<{ children: React.ReactNode; className?: string }> = ({
+ children,
+ className,
+}) => (
+
+ {children}
+
+);
+
+export const WarningTitle: React.FC<{ children: React.ReactNode; className?: string }> = ({
+ children,
+ className,
+}) => {children}
;
-// Reusable error/warning display components for modals
-export const ErrorSection = styled.div`
- margin: 16px 0;
-`;
-
-export const ErrorLabel = styled.div`
- font-size: 11px;
- color: var(--color-text-secondary);
- text-transform: uppercase;
- letter-spacing: 0.5px;
- margin-bottom: 8px;
-`;
-
-export const ErrorCodeBlock = styled.pre`
- background: var(--color-background-secondary);
- border: 1px solid var(--color-border);
- border-radius: 4px;
- padding: 12px;
- font-size: 12px;
- font-family: var(--font-monospace);
- color: var(--color-text);
- overflow-x: auto;
- white-space: pre-wrap;
- word-break: break-word;
- line-height: 1.4;
-`;
-
-export const WarningBox = styled.div`
- background: var(--color-error-bg);
- border-left: 3px solid var(--color-error);
- border-radius: 4px;
- padding: 12px 16px;
- margin: 16px 0;
-`;
-
-export const WarningTitle = styled.div`
- font-weight: 600;
- font-size: 13px;
- color: var(--color-error);
- margin-bottom: 4px;
-`;
-
-export const WarningText = styled.div`
- font-size: 13px;
- color: var(--color-text);
- line-height: 1.5;
-`;
-
-export const Button = styled.button`
- padding: 8px 20px;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 14px;
- font-weight: 500;
- transition: all 0.2s;
-
- &:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- }
-`;
-
-export const CancelButton = styled(Button)`
- background: #444;
- color: #ccc;
-
- &:hover:not(:disabled) {
- background: #555;
- }
-`;
-
-export const PrimaryButton = styled(Button)`
- background: #007acc;
- color: white;
-
- &:hover:not(:disabled) {
- background: #005a9e;
- }
-`;
-
-export const DangerButton = styled(Button)`
- background: var(--color-error);
- color: white;
-
- &:hover:not(:disabled) {
- background: color-mix(in srgb, var(--color-error), #fff 20%);
- }
-`;
+export const WarningText: React.FC<{ children: React.ReactNode; className?: string }> = ({
+ children,
+ className,
+}) => {children}
;
+
+// Button components
+interface ButtonProps extends React.ButtonHTMLAttributes
+
);
}
return (
-
{value}
-
-
+
+
- {error} }
+ {error &&
{showDropdown && filteredModels.length > 0 && (
- {error}
}
{filteredModels.map((model, index) => (
- (dropdownItemRefs.current[index] = el)}
- highlighted={index === highlightedIndex}
+ className={cn(
+ "text-[11px] font-monospace py-1.5 px-2.5 cursor-pointer transition-colors duration-100",
+ "first:rounded-t last:rounded-b",
+ index === highlightedIndex
+ ? "text-white bg-[#2a2a2b]"
+ : "text-[#d4d4d4] bg-transparent hover:bg-[#2a2a2b] hover:text-white"
+ )}
onClick={() => handleSelectModel(model)}
>
{model}
-
+
))}
-