Commit graph

40 commits

Author SHA1 Message Date
Naiyuan Qing
86a8c91c9b fix(web): remove max-width constraint on assistant messages
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 23:52:11 +08:00
Naiyuan Qing
716bbceaf4 refactor(chat, hooks): simplify handleSend and update useDeviceId to use useSyncExternalStore
- Simplified handleSend function in Chat component by removing unnecessary useCallback.
- Refactored useDeviceId hook to utilize useSyncExternalStore for better state management and removed useState and useEffect for device ID retrieval.
- Updated useGateway hook to ensure onMessageRef is set correctly on options change.
- Enhanced useScrollFade hook to properly cancel animation frames on cleanup.
2026-01-30 23:38:10 +08:00
Naiyuan Qing
5ee3176d3a docs: restore missing Atomic Commits details in CLAUDE.md
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 23:20:16 +08:00
Naiyuan Qing
403c44f536 refactor(web): unify hub + agent state into single Zustand store
Replace useState-based useHub hook and separate useActiveAgent store
with a single useHubStore (Zustand). This fixes the bug where
HubSidebar and Chat held independent state copies, causing stale data
and duplicate 30s polling. Agent create/delete logic now lives in the
store with automatic activeAgentId management.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 23:15:11 +08:00
Naiyuan Qing
cb28fbecc0 refactor(web): remove agent ID copy button from chat header
Keep only the device ID copy interaction; agent ID is display-only.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 23:12:49 +08:00
Naiyuan Qing
94f32701c7 feat(ui): auto-activate newly created agent
Return the new agent ID from createAgent and set it as active
immediately after creation.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 23:05:43 +08:00
Naiyuan Qing
cdd146e31f feat(web): restore device ID display and copy button in chat header
Re-add deviceId (full UUID) with copy-to-clipboard button next to the
SidebarTrigger, matching the original behavior from commit 0975510.
Both deviceId and agentId now have independent copy states.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 23:04:52 +08:00
Naiyuan Qing
d04952da91 feat(web): restore agent ID copy button in chat header
Re-add the copy-to-clipboard button that was lost when chat.tsx was
rewritten for hub/agent support. Clicking copies the full agentId,
shows a checkmark icon for 2s, and triggers a toast confirmation.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:55:57 +08:00
Naiyuan Qing
3b1bc5a17f fix(ui): use data-active: syntax and add text color for active agent item
Align with sidebar component library convention: use Tailwind v4 native
data-active: instead of data-[active]:, and add missing
text-sidebar-accent-foreground for active state.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:54:59 +08:00
Naiyuan Qing
78e34a1d63 refactor(ui): unify agent item hover to full row
Replace SidebarMenuButton with a custom flex row div that handles hover
and active states on the entire item, not just the text area. Delete
button uses stopPropagation to avoid triggering selection.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:51:21 +08:00
Naiyuan Qing
da5565adcf fix(ui): wrap agent ID in span for CSS truncate ellipsis
SidebarMenuButton applies truncate via [&>span:last-child]:truncate,
so the text must be in a <span> rather than a bare text node to get
overflow-hidden + text-ellipsis + whitespace-nowrap.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:49:10 +08:00
Naiyuan Qing
f1244f467b refactor(ui): replace absolute-positioned delete with flex layout in HubSidebar
Drop SidebarMenuAction (absolute positioning) in favor of a flex row:
left side (SidebarMenuButton) gets flex-1 min-w-0 for natural truncation,
right side (delete button) sits as a normal flex child with hover reveal.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:48:19 +08:00
Naiyuan Qing
bcaf14464a fix(ui): improve disabled state cursor and no-agent empty state
- Add cursor-not-allowed and reduced opacity to ChatInput when disabled
- Show user icon in empty state when no agent is selected
- Pass contextual placeholder text based on agent selection

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:45:53 +08:00
Naiyuan Qing
3190be60c3 fix(ui): soften HubSidebar styling and improve UX
Use CSS truncation for agent/hub IDs instead of JS slicing, show delete
button only on hover via showOnHover prop, and reduce contrast on status
dots, labels, and placeholder text for a more subtle appearance.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:44:14 +08:00
Naiyuan Qing
5319991868 feat(web): wire Hub sidebar, real chat messaging, and layout integration
- hub-sidebar: displays Hub connection status, agent list with create/delete
- chat: sends messages via Gateway to Hub, receives agent responses, filters by active agent
- layout: passes HubSidebar as children to AppSidebar, removes static NAV_ITEMS

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:41:03 +08:00
Naiyuan Qing
c5bf56282f feat(web): add gateway, hub, active-agent hooks and real message state
- use-gateway: GatewayClient WebSocket lifecycle with auto-connect/disconnect
- use-hub: REST polling for Hub status and agent CRUD operations
- use-active-agent: Zustand store for cross-component selected agent state
- use-messages: replace mock data with real addUser/addAssistant/clear API

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:40:50 +08:00
Naiyuan Qing
3ef7d5351c feat(web): add @multica/sdk dependency and URL config module
Adds gateway and console URL configuration in app/lib/config.ts,
centralizing endpoint URLs with env var overrides.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:40:43 +08:00
Naiyuan Qing
cdcce47141 feat(ui): add brand icon and artistic font to sidebar header
- Display Multica icon alongside brand name in sidebar header
- Use Playfair Display serif font for an artistic brand feel
- Expose --font-brand CSS variable from layout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:35:48 +08:00
Naiyuan Qing
db9d7ab2d7 feat(web): replace default Next.js branding with Multica icon
- Copy brand icon from gateway to web app/icon.png and public/icon.png
- Remove default favicon.ico and placeholder SVGs
- Update metadata title and description

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:31:41 +08:00
Naiyuan Qing
9af889a9bb fix(web): import toast from @multica/ui instead of bare sonner
sonner is a dependency of @multica/ui, not web. Re-export toast from
the ui sonner module and update the import path in chat.tsx.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:21:24 +08:00
Naiyuan Qing
0975510956 feat(web): show full deviceId with copy button and toast feedback
Display full UUID instead of truncated 8-char slice. Add ghost button
with copy icon that writes deviceId to clipboard, switches to checkmark
for 2s, and shows a sonner toast confirmation.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:19:57 +08:00
Naiyuan Qing
5f367fb6b7 fix(web): replace Zustand device store with local useDeviceId hook
Move device ID logic from @multica/store (Zustand persist) into a
simple useDeviceId hook in the web app. SSR returns empty string,
client reads/writes localStorage directly — no hydration mismatch,
no suppressHydrationWarning needed.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:16:54 +08:00
Naiyuan Qing
7d326695c1 feat(web): add scroll fade hint effect to chat message list
Use CSS mask-image gradients to hint at scrollable overflow in the chat
area. Adds useScrollFade hook that dynamically applies top/bottom fade
based on scroll position via scroll events and ResizeObserver.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:14:19 +08:00
Naiyuan Qing
047de2b431 fix(web): suppress deviceId hydration mismatch warning
Zustand persist generates a new deviceId on the server (no localStorage),
then hydrates a different value from localStorage on the client. Add
suppressHydrationWarning to the deviceId span since this mismatch is expected.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 22:04:57 +08:00
Naiyuan Qing
2a1e5f0343 feat(web): add SidebarTrigger to Chat header
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 21:24:47 +08:00
Naiyuan Qing
88d2e9340b feat(ui): add light/dark theme toggle in sidebar
Add next-themes integration with a ThemeProvider wrapper and a
ThemeToggle dropdown (Light / Dark / System) in the sidebar footer.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 21:21:31 +08:00
Naiyuan Qing
4375a6662b chore(web): set dev port to 3001 to avoid gateway conflict
Gateway occupies port 3000, so the Next.js dev server now
runs on port 3001.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 21:20:06 +08:00
Naiyuan Qing
e3643514d4 refactor(web): move sidebar layout shell to layout.tsx
Lift AppSidebar, SidebarInset and SidebarTrigger into the root layout
so page.tsx only contains page-specific content.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 21:09:06 +08:00
Naiyuan Qing
1ec6221664 feat(web): add Chat page component placeholder
Create empty Chat component and wire it into the main page,
replacing the previous mock Markdown/ChatInput content.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 21:05:10 +08:00
Naiyuan Qing
01790a57d2 refactor(ui): extract AppSidebar into shared UI component
Move sidebar markup from page.tsx into a reusable AppSidebar component
in packages/ui for cross-app reuse.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 20:57:57 +08:00
Naiyuan Qing
4036463d6c feat(web): add sidebar layout
Wrap layout in SidebarProvider, restructure page into left
sidebar navigation + right SidebarInset content area.
Add use-mobile hook via shadcn for responsive behavior.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 20:40:35 +08:00
Naiyuan Qing
9b87cd789e feat(ui): add Markdown rendering components
Add CodeBlock, Markdown, StreamingMarkdown components with
Shiki syntax highlighting, GFM support, and linkify utility.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 20:40:27 +08:00
Naiyuan Qing
6cc3a375e7 chore(desktop): clean up build artifacts and unused code
- Add dist-electron and release to .gitignore
- Remove tracked dist-electron build outputs from git
- Remove unused createRequire import in electron/main.ts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:34:09 +08:00
Naiyuan Qing
d7d2861a79 feat(store): add shared Zustand store package with counter example
- Create packages/store with @multica/store package
- Add zustand to pnpm catalog for version consistency
- Add counter store as cross-platform state example
- Integrate counter into ComponentExample for verification
- Add tsconfig path mappings for web and desktop
- Add @multica/store to Next.js transpilePackages
- Add @multica/store dependency to packages/ui

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:34:09 +08:00
Naiyuan Qing
eb5c388a80 refactor(ui): reorganize components into ui/ subdirectory and share layout
- Move shadcn components from src/components/ to src/components/ui/
- Move component-example and example from apps/web to packages/ui
- Update package.json exports with separate components/* and components/ui/* paths
- Update components.json ui alias in both packages/ui and apps/web
- Add missing @import "shadcn/tailwind.css" to globals.css
- Add new UI components: sheet, sidebar, skeleton, switch
- Update apps/web and apps/desktop to use shared ComponentExample

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:34:09 +08:00
Naiyuan Qing
141af9e9f1 feat(desktop): integrate @multica/ui shared components
Add @multica/ui workspace dependency with @tailwindcss/vite plugin
for CSS processing. Import globals.css for theme and replace template
UI with shared Button component. Remove unused template CSS files.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:34:09 +08:00
Naiyuan Qing
6431829b0c chore: unify shared deps with pnpm catalogs
Add catalog section to pnpm-workspace.yaml for react, react-dom,
@types/react, @types/react-dom, @types/node, and typescript.
Update all package.json files to use catalog: protocol.
Upgrade desktop from React 18 to 19. Rename to @multica/desktop.
Add dev:desktop script to root.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:34:09 +08:00
Naiyuan Qing
ff026b122d feat(desktop): scaffold Electron app with Vite
Add initial Electron desktop app using vite-plugin-electron template
with React and TypeScript.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:34:09 +08:00
Naiyuan Qing
5c240ab363 refactor(web): update imports to use @multica/ui package
Replace local UI component and utility imports with @multica/ui
subpath imports. Remove old components/ui/ directory, lib/utils.ts,
and globals.css. Configure postcss, next.config, and tsconfig for
monorepo UI package consumption.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:34:05 +08:00
Naiyuan Qing
84fe9d99f5 Add monorepo setup with Turborepo and Web client
- Add pnpm workspace and Turborepo configuration
- Extract Gateway SDK to packages/sdk as independent package
- Add Next.js + shadcn Web client in apps/web
- Update root package.json with turbo scripts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-29 16:33:35 +08:00