feat(frontend): offline support via service worker

frontend/.gitignore

@@ -7,6 +7,7 @@ cypress/results
 cypress/screenshots
 cypress/videos
 cypress/downloads
+tests/offline/results
 coverage
 .nyc_output
 .nyc_merged

frontend/package.json

@@ -9,6 +9,8 @@
     "serve": "vite preview",
     "test-local": "cypress open --e2e --browser chrome",
     "test": "cypress run",
+    "test:offline": "node tests/offline/runner.js",
+    "test:offline:smoke": "node tests/offline/smoke-online.js && node tests/offline/smoke-online-people.js && node tests/offline/smoke-online-shared-computer.js",
     "coverage:merge": "rm -rf .nyc_merged && mkdir -p .nyc_merged && cp coverage/baseline.json .nyc_merged/baseline.json && cp .nyc_output/out.json .nyc_merged/out.json && nyc report --nycrc-path \"$PWD/.nycrc.json\" --temp-dir \"$PWD/.nyc_merged\" --cwd \"${COVERAGE_ROOT:-$PWD}\" --report-dir \"$PWD/coverage\""
   },
   "dependencies": {
@@ -42,6 +44,7 @@
     "cypress": "14.5.1",
     "mocha-junit-reporter": "^2.2.1",
     "nyc": "^18.0.0",
+    "playwright": "^1.62.1",
     "postcss": "^8.4.5",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",

frontend/src/App.vue

@@ -13,6 +13,7 @@
          flip isFinished back to false and unmount the open settings dialog. -->
     <SettingsDialog v-if="$session.isLoggedIn && usersReady" />
     <component :is="DevUserSwitcher" v-if="DevUserSwitcher && $session.isLoggedIn && usersReady" />
+    <OfflineIndicator />
   </FrappeUIProvider>
 </template>
 
@@ -27,6 +28,7 @@ import { useTheme } from '@/utils/useTheme'
 import { useCursorStyle } from '@/utils/useCursorStyle'
 import NewTaskDialog from './components/NewTaskDialog/NewTaskDialog.vue'
 import SettingsDialog from './components/Settings/SettingsDialog.vue'
+import OfflineIndicator from './components/OfflineIndicator.vue'
 import { settingsBackgroundPath } from './components/Settings'
 import { getHomeRoute } from '@/router'
 

frontend/src/components/CommentsArea.vue

@@ -209,7 +209,7 @@
                 variant: 'solid',
                 onClick: submitComment,
                 loading: comments.insert.loading,
-                disabled: commentEmpty,
+                disabled: commentEmpty || !isOnline,
               }"
               :discardButtonProps="{
                 onClick: discardComment,
@@ -237,6 +237,7 @@
               :submitButtonProps="{
                 onClick: submitPoll,
                 loading: polls.insert.loading,
+                disabled: !isOnline,
               }"
               :discardButtonProps="{
                 onClick: discardPoll,
@@ -288,6 +289,7 @@ import { tags } from '@/data/tags'
 import { isNewCommentOpen } from '@/data/newComment'
 import { useRichQuotes } from '@/components/RichQuoteExtension/useRichQuotes'
 import { useDraftSync } from '@/data/useDraftSync'
+import { isOnline, onReconnect } from '@/data/online'
 import { useSessionUser } from '@/data/users'
 import type { Space } from '@/data/spaces'
 import { useIsMobile } from '@/utils/useIsMobile'
@@ -401,7 +403,11 @@ const composerStorageKey = computed(() => {
 
 const comments = useList<GPComment>({
   doctype: 'GP Comment',
-  cacheKey: ['Comments', props.doctype, props.name],
+  // Scoped to the session user: a discussion's comments can live in a private space,
+  // so a second account on the same browser must not see them cached offline before
+  // its own permission-checked fetch resolves (review finding from PR #516).
+  cacheKey: ['Comments', props.doctype, props.name, sessionUser.name],
+  staleOnError: true,
   fields: [
     'name',
     'content',
@@ -437,6 +443,8 @@ const comments = useList<GPComment>({
 
 const activities = useList<GPActivity>({
   doctype: 'GP Activity',
+  cacheKey: ['Activities', props.doctype, props.name, sessionUser.name],
+  staleOnError: true,
   fields: ['name', 'user', 'action', 'data', 'creation'],
   filters: {
     reference_doctype: props.doctype,
@@ -468,6 +476,8 @@ watch(
 
 const polls = useList<GPPoll>({
   doctype: 'GP Poll',
+  cacheKey: ['Polls', props.name, sessionUser.name],
+  staleOnError: true,
   fields: [
     'name',
     'title',
@@ -502,6 +512,19 @@ watchEffect(() => {
   }
 })
 
+// US5 (seamless recovery): while offline, comments/activity/polls posted by
+// other users never arrive — the socket that normally pushes them is down too.
+// Reload this discussion's timeline once the browser comes back online.
+// Unregistered on unmount: this callback closes over lists owned by this
+// component instance, and there's no reason to keep refetching an open
+// discussion the user has already navigated away from.
+const unregisterReconnect = onReconnect(() => {
+  comments.reload()
+  activities.reload()
+  polls.reload()
+})
+onUnmounted(unregisterReconnect)
+
 // Computed
 const timelineItems = computed(() => {
   let items: Array<GPComment | GPActivity | GPPoll> = []
@@ -667,7 +690,10 @@ function resetCommentState() {
 }
 
 async function submitComment() {
-  if (commentEmpty.value || comments.insert.loading) return
+  // The submit button is disabled while offline, but ctrl/cmd+Enter (bound below on
+  // the editor) reaches this directly and isn't gated by that - guard here too, rather
+  // than let it hit the network and surface a raw "Failed to fetch".
+  if (commentEmpty.value || comments.insert.loading || !isOnline.value) return
 
   const comment = await comments.insert.submit({
     reference_doctype: props.doctype,
@@ -748,7 +774,7 @@ function wait(ms: number) {
 }
 
 function submitPoll() {
-  if (props.doctype !== 'GP Discussion') return
+  if (props.doctype !== 'GP Discussion' || !isOnline.value) return
   return polls.insert
     .submit({
       discussion: props.name,

frontend/src/components/CommentsList.vue

@@ -118,6 +118,8 @@ import { subscribeToDoc, useSocket, type NewActivityEvent } from '@/socket'
 import { GPActivity, GPComment } from '@/types/doctypes'
 import type { Space } from '@/data/spaces'
 import { useDraftSync } from '@/data/useDraftSync'
+import { onReconnect } from '@/data/online'
+import { session } from '@/data/session'
 
 interface Props {
   doctype: string
@@ -171,7 +173,11 @@ const comments = useList<
   >
 >({
   doctype: 'GP Comment',
-  cacheKey: ['Comments', props.doctype, props.name],
+  // Scoped to the session user: a discussion's comments can live in a private space,
+  // so a second account on the same browser must not see them cached offline before
+  // its own permission-checked fetch resolves (review finding from PR #516).
+  cacheKey: ['Comments', props.doctype, props.name, session.user],
+  staleOnError: true,
   fields: [
     'name',
     'content',
@@ -212,6 +218,8 @@ interface Activity extends Pick<GPActivity, 'name' | 'user' | 'action' | 'creati
 
 const activities = useList<Activity>({
   doctype: 'GP Activity',
+  cacheKey: ['Activities', props.doctype, props.name, session.user],
+  staleOnError: true,
   fields: ['name', 'user', 'action', 'data', 'creation'],
   filters: {
     reference_doctype: props.doctype,
@@ -228,6 +236,14 @@ const activities = useList<Activity>({
   },
 })
 
+// US5 (seamless recovery): mirrors the same reconnect reload in CommentsArea.vue
+// (discussion comments) for this task's comment/activity timeline.
+const unregisterReconnect = onReconnect(() => {
+  comments.reload()
+  activities.reload()
+})
+onUnmounted(unregisterReconnect)
+
 // Computed
 type GroupedActivity = {
   doctype: 'GP Activity'

frontend/src/components/DiscussionView.vue

@@ -288,6 +288,16 @@
           again.
         </p>
       </EmptyStateBox>
+      <!-- Same catch-all as below, but for the offline/network case: name the actual reason
+           (never cached, can't reach the server) instead of the generic "something went
+           wrong", and offer a Retry rather than telling the user to refresh. -->
+      <OfflineContentFallback
+        v-else-if="discussion.isFinished && isOfflineFailure"
+        class="mx-auto mt-14 max-w-2xl px-6"
+        title="This discussion isn't available offline"
+        message="It hasn't been saved for offline use yet. Reconnect and retry to load it."
+        @retry="discussion.reload()"
+      />
       <!-- Fetch finished, but there is no doc and no recognised not-found/forbidden error.
            Fail visibly instead of rendering a blank page. Gated on isFinished so the
            pre-fetch tick (useFetch defers its first execute by a microtask) doesn't flash
@@ -352,7 +362,9 @@ import UserProfileLink from './UserProfileLink.vue'
 const RevisionsDialog = defineAsyncComponent(() => import('./RevisionsDialog.vue'))
 import SpaceBreadcrumbs from './SpaceBreadcrumbs.vue'
 import EmptyStateBox from './EmptyStateBox.vue'
+import OfflineContentFallback from './OfflineContentFallback.vue'
 import { copyToClipboard, isEditorContentEmpty } from '@/utils'
+import { isBrowserOffline, isNetworkError } from '@/offline'
 import { getSpace, useSpace } from '@/data/spaces'
 import { useCommunity } from '@/data/communities'
 import { useGroupedSpaceOptions } from '@/data/groupedSpaces'
@@ -408,6 +420,9 @@ function isMissingOrForbidden(error: unknown): boolean {
   const type = (error as { type?: string } | null)?.type
   return type === 'DoesNotExistError' || type === 'PermissionError'
 }
+// A network failure (offline, or the request never reached the server) deserves its own
+// copy and a Retry — telling someone offline to "refresh" is misleading busywork.
+const isOfflineFailure = computed(() => isBrowserOffline() || isNetworkError(discussion.error))
 const showTitleInMobileHeader = ref(false)
 const mobileHeaderTitle = computed(() =>
   showTitleInMobileHeader.value ? discussion.doc?.title || 'Discussion' : 'Discussion',

frontend/src/components/LastPostReminder.vue

@@ -24,9 +24,13 @@ import { useCall } from 'frappe-ui'
 import { dayjs } from 'frappe-ui'
 import { computed } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
+import { session } from '@/data/session'
 let lastPostAt = useCall<string>({
   url: `/api/v2/method/GP User Profile/get_last_post`,
-  cacheKey: 'last_post_at',
+  // Scoped to the session user so a second account on the same browser can't read the
+  // first account's cached "last post" date while offline (review finding from PR #516).
+  cacheKey: ['last_post_at', session.user],
+  staleOnError: true,
 })
 
 const daysSinceLastPost = computed(() => {

frontend/src/components/OfflineContentFallback.vue

@@ -0,0 +1,24 @@
+<template>
+  <EmptyStateBox>
+    <LucideTriangleAlert class="mb-3 size-7 text-ink-gray-4" />
+    <div class="text-base text-ink-gray-7">{{ title }}</div>
+    <p class="mt-2 max-w-md text-center text-p-sm text-ink-gray-5">{{ message }}</p>
+    <Button class="mt-4" icon-left="lucide-refresh-cw" @click="emit('retry')"> Retry </Button>
+  </EmptyStateBox>
+</template>
+
+<script setup lang="ts">
+// Presentational-only: callers decide *when* to show this (loading/empty/error
+// state belongs to the resource, not this component) and *what* to say (offline
+// vs. generic copy, via isBrowserOffline()/isNetworkError() from '@/offline').
+// Kept generic so any failed useList/useDoc fetch can reuse it instead of each
+// page hand-rolling its own dead-end card.
+import EmptyStateBox from './EmptyStateBox.vue'
+
+defineProps<{
+  title: string
+  message: string
+}>()
+
+const emit = defineEmits<{ retry: [] }>()
+</script>

frontend/src/components/OfflineIndicator.vue

@@ -0,0 +1,43 @@
+<template>
+  <!-- Teleported + fixed to the true viewport top so it renders above both
+       MobileShell and DesktopShell (frappe-ui), not inside either one - see the
+       `data-offline` attribute this sets below and the matching `[data-slot=...]`
+       rules in index.css, which push the shells' own content down by exactly this
+       banner's height. That's what keeps it from ever overlapping the header,
+       search, nav, or anything else already on screen, instead of covering it. -->
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 -translate-y-full"
+      leave-active-class="transition duration-150 ease-in"
+      leave-to-class="opacity-0 -translate-y-full"
+    >
+      <div
+        v-if="!isOnline"
+        role="status"
+        class="fixed inset-x-0 top-0 z-[60] flex h-[var(--offline-banner-height)] items-center justify-center gap-1.5 bg-surface-gray-3 px-3 text-p-sm text-ink-gray-7"
+      >
+        <span class="lucide-wifi-off size-3.5 shrink-0" aria-hidden="true" />
+        <span class="font-medium text-ink-gray-8">Network offline.</span>
+        <span class="font-normal text-ink-gray-5">Showing saved content.</span>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+import { isOnline } from '@/data/online'
+
+// A DOM attribute, not a Vue-scoped style: the shells this needs to push down
+// (MobileShell.vue, DesktopShell.vue) live in frappe-ui, outside this component's
+// own render tree, so index.css targets them by this attribute + their own
+// `data-slot` hooks instead.
+watch(
+  isOnline,
+  (online) => {
+    document.documentElement.toggleAttribute('data-offline', !online)
+  },
+  { immediate: true },
+)
+</script>