refactor(store): migrate device-id hook to @multica/store

- Move useDeviceId from apps/web to packages/store/src/device-id.ts
- Update imports in chat.tsx and use-gateway.ts to use @multica/store
- Add uuid dependency to @multica/store

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/app/components/chat.tsx

@@ -12,7 +12,7 @@ import { toast } from "@multica/ui/components/ui/sonner";
 import { useMessages } from "../hooks/use-messages";
 import { useGateway } from "../hooks/use-gateway";
 import { useHubStore } from "@multica/store";
-import { useDeviceId } from "../hooks/use-device-id";
+import { useDeviceId } from "@multica/store";
 import { useScrollFade } from "../hooks/use-scroll-fade";
 import { cn } from "@multica/ui/lib/utils";
 

apps/web/app/hooks/use-gateway.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, useCallback } from "react"
 import { GatewayClient, type ConnectionState, type RoutedMessage } from "@multica/sdk"
-import { useDeviceId } from "./use-device-id"
+import { useDeviceId } from "@multica/store"
 import { GATEWAY_URL } from "../lib/config"
 
 interface UseGatewayOptions {

packages/store/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@multica/fetch": "workspace:*",
     "react": "catalog:",
+    "uuid": "^13.0.0",
     "zustand": "catalog:"
   },
   "devDependencies": {

packages/store/src/device-id.ts

@@ -1,3 +1,5 @@
+"use client"
+
 import { useSyncExternalStore } from "react"
 import { v7 as uuidv7 } from "uuid"
 

packages/store/src/index.ts

@@ -1,3 +1,4 @@
 export { useHubStore } from "./hub"
 export type { HubInfo, Agent, HubStatus, HubStore } from "./hub"
 export { useHubInit } from "./hub-init"
+export { useDeviceId } from "./device-id"

packages/ui/src/components/hub-sidebar.tsx

@@ -68,7 +68,7 @@ export function HubSidebar() {
         <SidebarGroup>
           <SidebarGroupLabel>Agents</SidebarGroupLabel>
           <SidebarGroupAction onClick={() => createAgent()} title="Create agent">
-            <HugeiconsIcon icon={PlusSignIcon} strokeWidth={2} className="size-4" />
+            <HugeiconsIcon icon={PlusSignIcon} />
           </SidebarGroupAction>
           <SidebarGroupContent>
             <SidebarMenu>

pnpm-lock.yaml

@@ -285,6 +285,9 @@ importers:
       react:
         specifier: 'catalog:'
         version: 19.2.3
+      uuid:
+        specifier: ^13.0.0
+        version: 13.0.0
       zustand:
         specifier: 'catalog:'
         version: 5.0.10(@types/react@19.2.10)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))