Skip to content

✨ UI: Minimalist Claude-style Redesign for Desktop App #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
iotserver24 wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

✨ UI: Minimalist Claude-style Redesign for Desktop App #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6c08f9d
feat(desktop): implement minimalist layout for ChatPanel, MessageBubb…
iotserver24 Jun 19, 2026
89fa4ec
ci: ignore dev dependencies in npm audit check
iotserver24 Jun 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ jobs:
continue-on-error: true

- name: Security audit
run: pnpm audit --audit-level=high
run: pnpm audit --audit-level=high --prod
continue-on-error: true

lint:
runs-on: ubuntu-latest
Expand Down
4 changes: 2 additions & 2 deletions packages/desktop/src/renderer/components/ChatPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export default function ChatPanel({
)}

{/* Floating Pill input */}
<div className="relative flex flex-col rounded-3xl bg-xibe-surface border border-xibe-border-subtle focus-within:border-xibe-border-focus focus-within:bg-xibe-surface transition-all duration-200">
<div className="relative flex flex-col rounded-lg bg-transparent border border-xibe-border-subtle focus-within:border-xibe-border-focus transition-all duration-200">
<div className="flex items-center px-4 pt-2 pb-1 text-xs text-xibe-text-dim">
<span className="flex items-center gap-1.5">
{MODES.map((m) => (
Expand Down Expand Up @@ -213,7 +213,7 @@ export default function ChatPanel({
placeholder={isRunning ? 'Thinking...' : 'Ask anything or type / for commands'}
disabled={isRunning}
rows={1}
className="flex-1 resize-none bg-transparent pl-4 pr-12 pb-3.5 pt-1 text-[15px] leading-relaxed text-xibe-text placeholder-xibe-text-dim/50 focus:outline-none disabled:opacity-40"
className="flex-1 resize-none bg-transparent pl-4 pr-12 pb-3.5 pt-1 text-[15px] leading-relaxed text-xibe-text placeholder-xibe-text-dim focus:outline-none disabled:opacity-40"
style={{ minHeight: '36px', maxHeight: '400px' }}
onInput={(e) => { const t = e.target as HTMLTextAreaElement; t.style.height = 'auto'; t.style.height = Math.min(t.scrollHeight, 400) + 'px'; }}
/>
Expand Down
12 changes: 7 additions & 5 deletions packages/desktop/src/renderer/components/MessageBubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,19 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }

if (isUser) {
return (
<div className="flex justify-end animate-fade-in w-full group">
<div className="max-w-[90%] sm:max-w-[80%] rounded-2xl bg-xibe-surface-raised px-5 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
<div className="flex animate-fade-in w-full group gap-4">
<div className="h-6 w-6 rounded flex items-center justify-center bg-xibe-surface-hover text-xibe-text text-[11px] font-bold shrink-0 mt-1">U</div>
<div className="flex-1 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap mt-1">
{content}
</div>
</div>
);
}

return (
<div className="animate-fade-in flex flex-col w-full group">
<div className="prose prose-invert max-w-none text-[15px] leading-relaxed text-xibe-text
<div className="animate-fade-in flex w-full group gap-4">
<div className="h-6 w-6 rounded flex items-center justify-center bg-xibe-text text-xibe-bg text-[11px] font-bold shrink-0 mt-1">X</div>
<div className="flex-1 mt-1 prose prose-invert max-w-none text-[15px] leading-relaxed text-xibe-text
prose-p:my-1.5 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0.5
prose-pre:my-3 prose-pre:bg-transparent prose-pre:p-0
prose-blockquote:my-4 prose-blockquote:border-l-2 prose-blockquote:border-xibe-border prose-blockquote:pl-4 prose-blockquote:text-xibe-text-dim
Expand All @@ -36,7 +38,7 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
remarkPlugins={[remarkGfm]}
components={{
pre: ({ children }) => (
<pre className="overflow-x-auto rounded-xl bg-xibe-surface-raised border border-xibe-border-subtle p-4 text-[13px] font-mono leading-relaxed my-4">{children}</pre>
<pre className="overflow-x-auto rounded-xl bg-transparent p-0 py-2 text-[13px] font-mono leading-relaxed my-4">{children}</pre>
),
code: ({ className, children }) => {
const isInline = !className;
Expand Down
12 changes: 6 additions & 6 deletions packages/desktop/src/renderer/components/ToolCallCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const ToolCallCard = memo(function ToolCallCard({ toolName, toolInput, toolOutpu
const outputStr = toolOutput ? (typeof toolOutput === 'string' ? toolOutput : JSON.stringify(toolOutput, null, 2)) : '';

return (
<div className="rounded-xl border border-xibe-border-subtle overflow-hidden animate-fade-in my-3 group">
<div className="overflow-hidden animate-fade-in my-3 group pl-10 border-l-2 border-transparent hover:border-xibe-border-subtle">
<button
onClick={() => setOpen(!open)}
className="flex w-full items-center gap-3 px-2.5 py-1 text-left hover:bg-xibe-surface-hover transition-colors"
Expand All @@ -25,17 +25,17 @@ const ToolCallCard = memo(function ToolCallCard({ toolName, toolInput, toolOutpu

<div className="flex items-center gap-2 flex-1 min-w-0">
<Wrench className="h-3.5 w-3.5 text-xibe-text-dim/70 shrink-0" />
<span className="font-mono text-[13px] font-medium text-xibe-brand-blue truncate">{toolName}</span>
<span className="font-mono text-[13px] font-medium text-xibe-text truncate">{toolName}</span>
</div>

<div className="flex items-center gap-1.5 shrink-0">
{done ? (
<div className="flex items-center gap-1 text-xibe-brand-green/80 bg-xibe-brand-green/10 px-2 py-0.5 rounded border border-xibe-brand-green/20">
<div className="flex items-center gap-1 text-xibe-text-dim px-2 py-0.5 rounded">
<CheckCircle2 className="h-3 w-3" />
<span className="text-[10px] font-medium uppercase tracking-wider">Done</span>
</div>
) : (
<div className="flex items-center gap-1 text-xibe-accent bg-xibe-accent/10 px-2 py-0.5 rounded border border-xibe-accent/20">
<div className="flex items-center gap-1 text-xibe-text-secondary px-2 py-0.5 rounded">
<Loader2 className="h-3 w-3 animate-spin" />
<span className="text-[10px] font-medium uppercase tracking-wider">Running</span>
</div>
Expand All @@ -51,7 +51,7 @@ const ToolCallCard = memo(function ToolCallCard({ toolName, toolInput, toolOutpu
<span className="text-[10px] font-bold uppercase tracking-widest text-xibe-text-dim">Input</span>
<div className="h-px flex-1 bg-xibe-border-subtle/50" />
</div>
<pre className="overflow-x-auto rounded-lg bg-xibe-bg border border-xibe-border-subtle p-3 text-[12px] font-mono text-xibe-text leading-relaxed">{inputStr}</pre>
<pre className="overflow-x-auto rounded-lg bg-transparent p-0 py-2 text-[12px] font-mono text-xibe-text leading-relaxed">{inputStr}</pre>
</div>
)}
{outputStr && (
Expand All @@ -60,7 +60,7 @@ const ToolCallCard = memo(function ToolCallCard({ toolName, toolInput, toolOutpu
<span className="text-[10px] font-bold uppercase tracking-widest text-xibe-text-dim">Output</span>
<div className="h-px flex-1 bg-xibe-border-subtle/50" />
</div>
<pre className="overflow-x-auto rounded-lg bg-xibe-bg border border-xibe-border-subtle p-3 text-[12px] font-mono text-xibe-text-secondary leading-relaxed max-h-64">{outputStr.length > 5000 ? outputStr.slice(0, 5000) + '\n\n...[Output truncated]...' : outputStr}</pre>
<pre className="overflow-x-auto rounded-lg bg-transparent p-0 py-2 text-[12px] font-mono text-xibe-text-secondary leading-relaxed max-h-64">{outputStr.length > 5000 ? outputStr.slice(0, 5000) + '\n\n...[Output truncated]...' : outputStr}</pre>
</div>
)}
</div>
Expand Down
Loading