First Cut at Durable Sessions Docs + Onboarding #2847
Conversation
WalkthroughAdds Durable Sessions documentation and integrates a new durable step into the onboarding flow. Introduces DurableSessionPage and a reusable OnboardingFooter component; updates onboarding sequence from three to four steps and adjusts navigation and telemetry calls. Updates a flyover link to the new docs page. Extends telemetry types to include "durable" in both TypeScript and Go type declarations. No exported/public API signatures were removed. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@docs/docs/durable-sessions.mdx`:
- Around line 194-200: In the "Session Won't Reconnect" troubleshooting bullet
list, replace the misleading line "The remote server can reach Wave's connection
manager" with wording that reflects the actual architecture such as "Wave can
reach the job manager process on the remote server" (or "Wave's client can
establish an SSH connection to the remote server/job manager"), so the intent is
clear; update the sentence in the docs/docs/durable-sessions.mdx under the
"Session Won't Reconnect" section where that bullet appears.
🧹 Nitpick comments (1)
frontend/app/onboarding/onboarding-durable.tsx (1)
36-125: Well-structured two-column layout with informative session states panel.The right panel effectively mirrors the flyover content (Attached/Detached/Standard states with matching shield icon colors), providing a consistent visual language. The "Common use cases" section adds good context for new users.
One minor note:
currentStepandtotalStepsare hardcoded here (line 122) and in each page component independently. If the step order or count changes, all page files need manual updates. Consider deriving these from a shared constant or passing them as props from the parent. This is optional since it matches the existing pattern.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@docs/docs/durable-sessions.mdx`:
- Around line 201-204: Update the sentence under the "Failed to Start" Error
section to remove the redundant word "specific" so it reads "...Check the error
message for details." Locate the heading "Failed to Start" and the sentence
"Check the error message for specific details." and replace it with the shorter
wording; ensure surrounding context (the "Try" suggestion and restart/bug report
guidance) remains unchanged.
- Around line 42-48: The MDX table uses Tailwind class names (text-muted,
text-sky-500, text-sky-300) that don't exist in the docs CSS; add explicit CSS
definitions for those utilities in your docs stylesheet (e.g., create rules for
.text-muted, .text-sky-500, .text-sky-300 in src/css/custom.scss with the
intended color values) so the icons in durable-sessions.mdx render with the
expected colors, or alternatively replace those className values in
durable-sessions.mdx with whatever existing Docusaurus/custom classes you
already have.
| | Icon | Status | Description | | ||
| |------|--------|-------------| | ||
| | <i className="fa-sharp fa-regular fa-shield text-muted"></i> | Standard Session | Connection drops will end the session | | ||
| | <i className="fa-sharp fa-solid fa-shield text-sky-500"></i> | Durable (Attached) | Session is protected and connected | | ||
| | <i className="fa-sharp fa-solid fa-shield text-sky-300"></i> | Durable (Detached) | Session running, currently disconnected | | ||
| | <i className="fa-sharp fa-solid fa-shield text-muted"></i> | Durable (Awaiting) | Configured but not yet started | | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check Font Awesome configuration
rg -l "font-awesome|fontawesome|@fortawesome" docs/ --include="*.json" --include="*.ts" --include="*.tsx" --include="*.js" --include="*.jsx" --include="*.mdx"Repository: wavetermdev/waveterm
Length of output: 505
🏁 Script executed:
# Check for Tailwind/CSS configuration files
fd -e "tailwind.config" -e "postcss.config" -e "docusaurus.config" docs/Repository: wavetermdev/waveterm
Length of output: 389
🏁 Script executed:
# Search for color utility class usage
rg "text-sky-500|text-sky-300|text-muted" docs/ --include="*.mdx" --include="*.tsx" --include="*.css"Repository: wavetermdev/waveterm
Length of output: 505
🏁 Script executed:
# Check for similar icon patterns in docs
rg "className=\"fa-" docs/ --include="*.mdx" | head -20Repository: wavetermdev/waveterm
Length of output: 505
🏁 Script executed:
# Look at the root docusaurus config
cat docusaurus.config.js 2>/dev/null | head -50Repository: wavetermdev/waveterm
Length of output: 46
🏁 Script executed:
# First, explore the docs directory structure
ls -la docs/ | head -20Repository: wavetermdev/waveterm
Length of output: 1055
🏁 Script executed:
# Find configuration files in docs
fd . docs/ -name "*.config.*" -o -name "docusaurus*" -o -name "tailwind*" -o -name "postcss*"Repository: wavetermdev/waveterm
Length of output: 294
🏁 Script executed:
# Search for Font Awesome configuration (corrected rg syntax)
rg "font-awesome|fontawesome|@fortawesome" docs/Repository: wavetermdev/waveterm
Length of output: 50377
🏁 Script executed:
# Search for color utility usage in mdx files
rg "text-sky-500|text-sky-300|text-muted" docs/Repository: wavetermdev/waveterm
Length of output: 679
🏁 Script executed:
# Check for Font Awesome icons in use
rg "fa-sharp|fa-solid|fa-regular" docs/ | head -20Repository: wavetermdev/waveterm
Length of output: 5691
🏁 Script executed:
# Look for CSS or Tailwind imports in the main docusaurus config
cat docusaurus.config.js | grep -A 5 -B 5 "css\|theme\|tailwind" || echo "No matches found"Repository: wavetermdev/waveterm
Length of output: 150
🏁 Script executed:
# Read the Docusaurus config to see Font Awesome and CSS setup
head -100 docs/docusaurus.config.ts | cat -nRepository: wavetermdev/waveterm
Length of output: 4140
🏁 Script executed:
# Search for Tailwind configuration
rg "tailwind" docs/Repository: wavetermdev/waveterm
Length of output: 163
🏁 Script executed:
# Look for global CSS files
find docs -name "*.css" -type f | head -20Repository: wavetermdev/waveterm
Length of output: 343
🏁 Script executed:
# Check if there's a global styles directory
ls -la docs/src/css/ 2>/dev/null || echo "No src/css directory"Repository: wavetermdev/waveterm
Length of output: 235
🏁 Script executed:
# Search for where text-sky or text-muted might be defined
rg "text-muted|text-sky" docs/Repository: wavetermdev/waveterm
Length of output: 679
🏁 Script executed:
# Read the custom.scss file
cat docs/src/css/custom.scssRepository: wavetermdev/waveterm
Length of output: 2862
🏁 Script executed:
# Check if Tailwind is in package.json dependencies
grep -A 5 -B 5 "tailwind" docs/package.jsonRepository: wavetermdev/waveterm
Length of output: 46
🏁 Script executed:
# Look at what's actually loaded in docusaurus config - the stylesheets section
sed -n '100,200p' docs/docusaurus.config.ts | cat -nRepository: wavetermdev/waveterm
Length of output: 4354
The Tailwind color utility classes are not configured in the docs site.
Font Awesome icons are properly configured and will render. However, the color classes (text-muted, text-sky-500, text-sky-300) do not exist in the docs CSS. Tailwind is not set up in the Docusaurus configuration, so these utilities won't apply any styling. The icons will appear but without the intended colors.
Use standard CSS color classes available in Docusaurus (like those defined in custom.scss) or define the color utilities explicitly in src/css/custom.scss.
🤖 Prompt for AI Agents
In `@docs/docs/durable-sessions.mdx` around lines 42 - 48, The MDX table uses
Tailwind class names (text-muted, text-sky-500, text-sky-300) that don't exist
in the docs CSS; add explicit CSS definitions for those utilities in your docs
stylesheet (e.g., create rules for .text-muted, .text-sky-500, .text-sky-300 in
src/css/custom.scss with the intended color values) so the icons in
durable-sessions.mdx render with the expected colors, or alternatively replace
those className values in durable-sessions.mdx with whatever existing
Docusaurus/custom classes you already have.
| ### "Failed to Start" Error | ||
| The job manager couldn't initialize on the remote server. Check the error message for specific details. | ||
|
|
||
| **Try**: Restart the session. If the issue persists, file a bug report with the error details. |
There was a problem hiding this comment.
Minor: "specific details" is redundant.
"Details" alone suffices here.
📝 Suggested wording
-The job manager couldn't initialize on the remote server. Check the error message for specific details.
+The job manager couldn't initialize on the remote server. Check the error message for details.🧰 Tools
🪛 LanguageTool
[style] ~202-~202: This phrase is redundant. Consider writing “details”.
Context: ...ote server. Check the error message for specific details. Try: Restart the session. If the ...
(SPECIFIC_DETAILS)
🤖 Prompt for AI Agents
In `@docs/docs/durable-sessions.mdx` around lines 201 - 204, Update the sentence
under the "Failed to Start" Error section to remove the redundant word
"specific" so it reads "...Check the error message for details." Locate the
heading "Failed to Start" and the sentence "Check the error message for specific
details." and replace it with the shorter wording; ensure surrounding context
(the "Try" suggestion and restart/bug report guidance) remains unchanged.
1 participant
No description provided.