Instead of calling openCommunicationThread() after sending (which triggered
a full timeline refetch, destroyed audio waveforms, and caused the chat to
jump), we now:
- Optimistically append the sent message to clientTimelineItems
- Scroll to bottom smoothly
- Refresh contacts sidebar for lastMessageText preview
- Auto-scroll only fires on thread switch (empty→loaded), not on every
timeline update, preserving audio waveform DOM elements
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add ref to comm-thread-surface container and watch clientTimelineItems
to scroll to bottom via nextTick whenever messages load or update.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Clear old timeline items immediately on thread switch and display a centered
loader until the new conversation loads, instead of showing stale messages.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Function was used in CrmWorkspaceApp template but not exported/destructured,
causing TypeError at runtime.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add ContactThreadRead model to track when users last viewed each contact thread.
Contacts with messages newer than the last read time show a blue dot in the sidebar.
Opening a thread automatically marks it as read via markThreadRead mutation.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- WebSocket now detects new ContactMessages and broadcasts
message.new events with contactId, text, channel, direction
- Frontend handles message.new: refreshes timeline for open chat,
refreshes contacts for sidebar preview update
- dashboard.changed still fires for non-message changes
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove bulk CommunicationsQuery from useContacts (was loading ALL
messages for ALL contacts on init)
- Rebuild commThreads from contacts + contactInboxes using the new
lastMessageText field from Phase 1
- Per-contact messages now load on-demand via getClientTimeline
- Remove commItems from useWorkspaceRouting, use clientTimelineItems
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Enriches the contacts resolver to include the last message preview
and channel, so the sidebar can show thread previews without loading
all communications. No frontend changes yet — fields returned but unused.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The refactoring in a4d8d81 moved calendar logic into useCalendar.ts but
used the old CSS-transform animation code instead of the GSAP-based
flying rect + flying label implementation. This restores:
- GSAP-based animateCalendarZoomIntoSource and animateCalendarFlipTransition
- Flying label that animates from card title → toolbar on zoom-in and back
- Clone-and-swap pattern with skeleton content in fly-rect (no text)
- Fly-rect/fly-label refs and setters now live in the composable
- isoWeekNumber() and weekNumber field on monthRows
- Sibling card titles and week numbers faded during zoom
- Removed old CSS-transform camera state and calendarSceneTransformStyle
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The function was called without arguments in two places, causing
contactId to be empty string and clearing clientTimelineItems to [].
Messages disappeared from the chat panel as a result.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add refetchChatMessages + refetchChatConversations to
refetchAllCrmQueries so WebSocket dashboard.changed events
cover pilot chat updates
- Reduce background polling from 2s to 30s (fallback only)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Each composable now owns its types and exports them. Other composables
import types from the owning composable. Deleted centralized crm-types.ts.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Split the 6000+ line monolithic component into modular composables:
- crm-types.ts: shared types and utility functions
- useAuth, useContacts, useContactInboxes, useCalendar, useDeals,
useDocuments, useFeed, useTimeline, usePilotChat, useCallAudio,
usePins, useChangeReview, useCrmRealtime, useWorkspaceRouting
CrmWorkspaceApp.vue is now a thin orchestrator (~2500 lines) that
wires composables together with glue code, keeping template and
styles intact.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The label (month name, week number, day label) now animates from its
position above the source card to the toolbar center on zoom-in, and
flies back from toolbar to the target card title on zoom-out. The
fly-rect rectangle no longer contains text — only skeleton placeholder
lines. Sibling card titles and week numbers also fade during zoom.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Month names moved above month cards in year view (outside article border)
Hidden in non-year views; toolbar shows context label instead
- Day labels (Mon 24, Tue 25) moved above day columns in week view
- Each card/column wrapped in flex container: title above, card below
- New .calendar-card-title CSS: 11px, 55% opacity, subtle label above card
- No duplicate headers: toolbar is the single source of current context
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add ISO week numbers to the left of week rows in month view (8, 9, 10...)
with spacer alignment on day-of-week headers
- Inject label + skeleton placeholder lines into fly-rect during zoom animations:
zoom-in shows source label (month name / "Week N" / day name) + pulsing bars
zoom-out shows target context label + skeleton
- Skeleton CSS uses pulse animation (0.8s alternate) for loading hint
- Non-scoped style block for dynamically injected innerHTML elements
- isoWeekNumber helper for ISO 8601 week calculation
- Extended MonthRow type with weekNumber property
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Zoom-in: fade siblings → fade source content → clone source style to fly-rect →
hide source → animate fly-rect to viewport → switch view → fade in new content.
Zoom-out: fade scene → show fly-rect at viewport → switch view → clone target
style → animate fly-rect to target → fade in scene.
Full-area: all views (month/week/day) now fill 100% of container height.
Month grid rows stretch equally, day cells fill row height, depth layers flex.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add CalendarDateRange input to GraphQL schema; server resolver now accepts from/to params
- Frontend query sends year-scoped date range variables reactively
- Rewrite zoom-in/zoom-out animations using GSAP flying-rect overlay (650ms vs 2400ms)
- Add flying-rect element to CrmCalendarPanel with proper CSS
- Remove old calendarSceneTransformStyle CSS-transition approach
- Add calendarKillTweens cleanup in onBeforeUnmount
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Content overlay layer was intercepting mouse events (pointer-events: auto
with z-index: 5), preventing :hover from reaching the grid cells underneath.
Removed pointer-events: auto from .canvas-content-visible since the content
layer is purely visual and needs no click handling.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The Apollo Client was using httpEndpoint (http://localhost:3000/api/graphql)
for browser requests, which fails on remote servers. Added browserHttpEndpoint
as relative URL "/api/graphql" so browser requests go to the correct origin.
Also added error logging to setInboxHidden mutation.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace custom gqlFetch() with proper Apollo useQuery/useMutation hooks
powered by codegen-generated TypedDocumentNode types. Key changes:
- Add GraphQL SDL schema file and codegen config for typescript-vue-apollo
- Replace all 28 raw .graphql imports with generated typed documents
- Add 12 useQuery() hooks with cache-and-network fetch policy
- Add 17 useMutation() hooks with surgical refetchQueries per mutation
- Optimistic cache update for setContactInboxHidden (instant archive UX)
- Fix contact list subtitle: show lastText instead of channel name
- Migrate login page from gqlFetch to useMutation
- WebSocket realtime now calls Apollo refetch instead of full data reload
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace panzoom + timeline approach with clean async/await GSAP tweens
- Flying rect morphs from cell position to full viewport (aspect ratio change)
- Fix zoomOut race condition: nested gsap.to inside tl.call fired outside timeline
- Fix opacity conflict: GSAP controls all opacity, CSS class only for pointer-events
- Fix gridLayerRef losing reference on :key remount during resize
- Make viewport dimensions reactive via ResizeObserver (vpWidth/vpHeight refs)
- Wait for fade-in completion before unlocking isAnimating
Co-Authored-By: Claude <noreply@anthropic.com>
Drop tldraw/React dependency in favor of @panzoom/panzoom with a
two-layer architecture: outline rectangles (borders only) are zoomed
via CSS transforms while HTML content renders at native 1:1 scale
as a fade-in overlay — eliminating blur at any zoom level.
Co-Authored-By: Claude <noreply@anthropic.com>
Previous implementation created all ~589 shapes (year + months + weeks + days)
at once, causing visual chaos on load and broken zoom. New approach dynamically
creates/destroys shapes per level: year shows 12 months, month shows 6 weeks,
week shows 7 days, day shows time slots. Wheel prime pattern (2 ticks) prevents
accidental zooms. Double-click resets to year view.
Co-Authored-By: Claude <noreply@anthropic.com>
