@officexapp/vidfarm-devcli 0.21.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/dollarplatoon-skill/SKILL.md +1227 -0
- package/.agents/skills/editor-capabilities/SKILL.md +182 -0
- package/.agents/skills/editor-capabilities/references/re-theme-walkthrough.md +58 -0
- package/.agents/skills/embedded-captions/CATALOG.md +93 -0
- package/.agents/skills/embedded-captions/SKILL.md +286 -0
- package/.agents/skills/embedded-captions/assets/brand/CDPR-fankit-terms.txt +35 -0
- package/.agents/skills/embedded-captions/assets/brand/cyberpunk-widths.json +115 -0
- package/.agents/skills/embedded-captions/assets/fonts/char-widths.json +2211 -0
- package/.agents/skills/embedded-captions/assets/strokefonts/HersheyScript1.svg +242 -0
- package/.agents/skills/embedded-captions/assets/strokefonts/HersheyScriptMed.svg +242 -0
- package/.agents/skills/embedded-captions/dna/README.md +148 -0
- package/.agents/skills/embedded-captions/dna/chrome.json +68 -0
- package/.agents/skills/embedded-captions/dna/cream.json +69 -0
- package/.agents/skills/embedded-captions/dna/documentary.json +62 -0
- package/.agents/skills/embedded-captions/dna/editorial.json +70 -0
- package/.agents/skills/embedded-captions/dna/glitch.json +82 -0
- package/.agents/skills/embedded-captions/dna/ink.json +65 -0
- package/.agents/skills/embedded-captions/dna/keynote.json +62 -0
- package/.agents/skills/embedded-captions/dna/loud.json +75 -0
- package/.agents/skills/embedded-captions/dna/neon.json +58 -0
- package/.agents/skills/embedded-captions/dna/velocity.json +89 -0
- package/.agents/skills/embedded-captions/modes/cinematic/README.md +48 -0
- package/.agents/skills/embedded-captions/modes/cinematic/_archive/champion/spec.md +98 -0
- package/.agents/skills/embedded-captions/modes/cinematic/_archive/champion/template.html +188 -0
- package/.agents/skills/embedded-captions/modes/cinematic/_archive/memory-wall/spec.md +134 -0
- package/.agents/skills/embedded-captions/modes/cinematic/_archive/memory-wall/template.html +179 -0
- package/.agents/skills/embedded-captions/modes/cinematic/_archive/portrait-header/spec.md +81 -0
- package/.agents/skills/embedded-captions/modes/cinematic/_archive/portrait-header/template.html +170 -0
- package/.agents/skills/embedded-captions/modes/cinematic/cinematic-cream/spec.md +16 -0
- package/.agents/skills/embedded-captions/modes/cinematic/cinematic-cream/template.html +226 -0
- package/.agents/skills/embedded-captions/modes/cinematic/engine.html +355 -0
- package/.agents/skills/embedded-captions/modes/standard/_anatomy.md +233 -0
- package/.agents/skills/embedded-captions/modes/standard/_motion.md +192 -0
- package/.agents/skills/embedded-captions/modes/standard/fonts/build-fonts-css.cjs +97 -0
- package/.agents/skills/embedded-captions/references/aesthetic-principles.md +168 -0
- package/.agents/skills/embedded-captions/references/anti-patterns.md +188 -0
- package/.agents/skills/embedded-captions/references/bespoke-vs-presets.md +178 -0
- package/.agents/skills/embedded-captions/references/caption-grouping.md +130 -0
- package/.agents/skills/embedded-captions/references/composition-craft.md +522 -0
- package/.agents/skills/embedded-captions/references/direction-catalog.md +138 -0
- package/.agents/skills/embedded-captions/references/example-renders/champion.html +371 -0
- package/.agents/skills/embedded-captions/references/example-renders/memory-wall.html +334 -0
- package/.agents/skills/embedded-captions/references/failure-modes.md +145 -0
- package/.agents/skills/embedded-captions/references/layout-heuristics.md +238 -0
- package/.agents/skills/embedded-captions/references/motion-vocabulary.md +148 -0
- package/.agents/skills/embedded-captions/references/rail.md +68 -0
- package/.agents/skills/embedded-captions/references/reference-bar.md +47 -0
- package/.agents/skills/embedded-captions/references/scene-types.md +94 -0
- package/.agents/skills/embedded-captions/references/test-set.md +66 -0
- package/.agents/skills/embedded-captions/references/typographic-moves.md +266 -0
- package/.agents/skills/embedded-captions/references/typography-presets.md +63 -0
- package/.agents/skills/embedded-captions/scripts/audio-envelope.cjs +95 -0
- package/.agents/skills/embedded-captions/scripts/check-occlusion.cjs +250 -0
- package/.agents/skills/embedded-captions/scripts/check-overflow.cjs +194 -0
- package/.agents/skills/embedded-captions/scripts/check-rail-climax.cjs +233 -0
- package/.agents/skills/embedded-captions/scripts/check-timing.cjs +173 -0
- package/.agents/skills/embedded-captions/scripts/fill-timings.cjs +124 -0
- package/.agents/skills/embedded-captions/scripts/fit-fonts.cjs +158 -0
- package/.agents/skills/embedded-captions/scripts/gen-stroke-path.py +46 -0
- package/.agents/skills/embedded-captions/scripts/inject-fonts.cjs +169 -0
- package/.agents/skills/embedded-captions/scripts/lib-dna.cjs +201 -0
- package/.agents/skills/embedded-captions/scripts/make-cinematic.cjs +1205 -0
- package/.agents/skills/embedded-captions/scripts/make-composition.cjs +404 -0
- package/.agents/skills/embedded-captions/scripts/make-theme.cjs +8781 -0
- package/.agents/skills/embedded-captions/scripts/matte.cjs +294 -0
- package/.agents/skills/embedded-captions/scripts/measure-layout.cjs +293 -0
- package/.agents/skills/embedded-captions/scripts/prepare.sh +39 -0
- package/.agents/skills/embedded-captions/scripts/preview-frames.cjs +268 -0
- package/.agents/skills/embedded-captions/scripts/render-and-composite.sh +509 -0
- package/.agents/skills/embedded-captions/scripts/render-theme.sh +34 -0
- package/.agents/skills/embedded-captions/scripts/safe-zones.cjs +813 -0
- package/.agents/skills/embedded-captions/scripts/transcribe.cjs +349 -0
- package/.agents/skills/embedded-captions/themes/PORTING.md +49 -0
- package/.agents/skills/embedded-captions/themes/README.md +244 -0
- package/.agents/skills/embedded-captions/themes/anchor.json +27 -0
- package/.agents/skills/embedded-captions/themes/arcade.json +51 -0
- package/.agents/skills/embedded-captions/themes/aurora.json +41 -0
- package/.agents/skills/embedded-captions/themes/biolume.json +35 -0
- package/.agents/skills/embedded-captions/themes/brush.json +74 -0
- package/.agents/skills/embedded-captions/themes/chalkboard.json +52 -0
- package/.agents/skills/embedded-captions/themes/dossier.json +56 -0
- package/.agents/skills/embedded-captions/themes/graffiti.json +62 -0
- package/.agents/skills/embedded-captions/themes/hologram.json +41 -0
- package/.agents/skills/embedded-captions/themes/inkwater.json +43 -0
- package/.agents/skills/embedded-captions/themes/laser.json +46 -0
- package/.agents/skills/embedded-captions/themes/lastpage.json +33 -0
- package/.agents/skills/embedded-captions/themes/neonsign.json +53 -0
- package/.agents/skills/embedded-captions/themes/nightcity.json +56 -0
- package/.agents/skills/embedded-captions/themes/ordnance.json +54 -0
- package/.agents/skills/embedded-captions/themes/papercut.json +37 -0
- package/.agents/skills/embedded-captions/themes/popup.json +46 -0
- package/.agents/skills/embedded-captions/themes/ransom.json +62 -0
- package/.agents/skills/embedded-captions/themes/scoreboard.json +54 -0
- package/.agents/skills/embedded-captions/themes/spectrum.json +46 -0
- package/.agents/skills/embedded-captions/themes/stardust.json +29 -0
- package/.agents/skills/embedded-captions/themes/stomp.json +43 -0
- package/.agents/skills/embedded-captions/themes/terminal.json +49 -0
- package/.agents/skills/embedded-captions/themes/thunder.json +44 -0
- package/.agents/skills/embedded-captions/themes/transit.json +44 -0
- package/.agents/skills/embedded-captions/themes/vhs.json +47 -0
- package/.agents/skills/faceless-explainer/SKILL.md +209 -0
- package/.agents/skills/faceless-explainer/references/cut-catalog.md +215 -0
- package/.agents/skills/faceless-explainer/references/motion-language.md +156 -0
- package/.agents/skills/faceless-explainer/references/story-design.md +248 -0
- package/.agents/skills/faceless-explainer/references/visual-design.md +146 -0
- package/.agents/skills/faceless-explainer/scripts/assemble-index.mjs +570 -0
- package/.agents/skills/faceless-explainer/scripts/audio.mjs +260 -0
- package/.agents/skills/faceless-explainer/scripts/build-frame.mjs +536 -0
- package/.agents/skills/faceless-explainer/scripts/captions.mjs +508 -0
- package/.agents/skills/faceless-explainer/scripts/lib/assets.mjs +55 -0
- package/.agents/skills/faceless-explainer/scripts/lib/dimensions.mjs +45 -0
- package/.agents/skills/faceless-explainer/scripts/lib/storyboard.mjs +249 -0
- package/.agents/skills/faceless-explainer/scripts/lib/tokens.mjs +204 -0
- package/.agents/skills/faceless-explainer/scripts/lib/transition-registry.mjs +38 -0
- package/.agents/skills/faceless-explainer/scripts/lib/transitions.json +71 -0
- package/.agents/skills/faceless-explainer/scripts/transitions.mjs +320 -0
- package/.agents/skills/faceless-explainer/sub-agents/frame-worker.md +75 -0
- package/.agents/skills/farmville-saas-ux/SKILL.md +156 -0
- package/.agents/skills/farmville-saas-ux/assets/starter.html +294 -0
- package/.agents/skills/farmville-saas-ux/references/components.md +340 -0
- package/.agents/skills/farmville-saas-ux/references/porting-guide.md +121 -0
- package/.agents/skills/farmville-saas-ux/references/tokens.md +271 -0
- package/.agents/skills/flockposter/LICENSE +17 -0
- package/.agents/skills/flockposter/README.md +72 -0
- package/.agents/skills/flockposter/SKILL.md +562 -0
- package/.agents/skills/flockposter/examples/cli-instagram-reel.sh +21 -0
- package/.agents/skills/flockposter/examples/cli-multi-platform.json +69 -0
- package/.agents/skills/flockposter/examples/cli-tiktok-upload-only.sh +22 -0
- package/.agents/skills/flockposter/examples/cli-x-thread.sh +17 -0
- package/.agents/skills/flockposter/examples/cli-youtube-short.sh +21 -0
- package/.agents/skills/flockposter/examples/public-api-instagram-reel.json +28 -0
- package/.agents/skills/general-video/SKILL.md +143 -0
- package/.agents/skills/hyperframes/SKILL.md +160 -0
- package/.agents/skills/hyperframes-animation/SKILL.md +84 -0
- package/.agents/skills/hyperframes-animation/adapters/animate-text.md +64 -0
- package/.agents/skills/hyperframes-animation/adapters/animejs.md +114 -0
- package/.agents/skills/hyperframes-animation/adapters/css-animations.md +143 -0
- package/.agents/skills/hyperframes-animation/adapters/gsap-easing-and-stagger.md +118 -0
- package/.agents/skills/hyperframes-animation/adapters/gsap-timeline-and-labels.md +96 -0
- package/.agents/skills/hyperframes-animation/adapters/gsap-transforms-and-perf.md +96 -0
- package/.agents/skills/hyperframes-animation/adapters/gsap.md +105 -0
- package/.agents/skills/hyperframes-animation/adapters/html-in-canvas-patterns.md +507 -0
- package/.agents/skills/hyperframes-animation/adapters/lottie.md +117 -0
- package/.agents/skills/hyperframes-animation/adapters/three.md +131 -0
- package/.agents/skills/hyperframes-animation/adapters/typegpu.md +178 -0
- package/.agents/skills/hyperframes-animation/adapters/waapi.md +101 -0
- package/.agents/skills/hyperframes-animation/blueprints/comparison-split.md +27 -0
- package/.agents/skills/hyperframes-animation/blueprints/constellation-hub.md +44 -0
- package/.agents/skills/hyperframes-animation/blueprints/cta-morph-press.md +28 -0
- package/.agents/skills/hyperframes-animation/blueprints/cursor-ui-demo.md +57 -0
- package/.agents/skills/hyperframes-animation/blueprints/dataviz-countup.md +46 -0
- package/.agents/skills/hyperframes-animation/blueprints/device-surface-showcase.md +53 -0
- package/.agents/skills/hyperframes-animation/blueprints/grid-card-assemble.md +66 -0
- package/.agents/skills/hyperframes-animation/blueprints/kinetic-type-beats.md +78 -0
- package/.agents/skills/hyperframes-animation/blueprints/logo-assemble-lockup.md +69 -0
- package/.agents/skills/hyperframes-animation/blueprints/overwhelm-surround.md +28 -0
- package/.agents/skills/hyperframes-animation/blueprints/spatial-pan-stations.md +37 -0
- package/.agents/skills/hyperframes-animation/blueprints/ticker-takeover.md +29 -0
- package/.agents/skills/hyperframes-animation/blueprints/titlecard-reveal.md +42 -0
- package/.agents/skills/hyperframes-animation/blueprints/typewriter-reveal.md +51 -0
- package/.agents/skills/hyperframes-animation/blueprints/video-text-pivot.md +30 -0
- package/.agents/skills/hyperframes-animation/blueprints-index.md +146 -0
- package/.agents/skills/hyperframes-animation/examples/assets/avatars/02.avif +0 -0
- package/.agents/skills/hyperframes-animation/examples/assets/brands/github.avif +0 -0
- package/.agents/skills/hyperframes-animation/examples/assets/brands/nvidia.avif +0 -0
- package/.agents/skills/hyperframes-animation/examples/assets/brands/visa.avif +0 -0
- package/.agents/skills/hyperframes-animation/examples/assets/brands/zoominfo.avif +0 -0
- package/.agents/skills/hyperframes-animation/examples/brand-reveal-assemble-zoom.html +382 -0
- package/.agents/skills/hyperframes-animation/examples/comparison-split-cards.html +649 -0
- package/.agents/skills/hyperframes-animation/examples/concept-demo-decode-pan.html +520 -0
- package/.agents/skills/hyperframes-animation/examples/cta-morph-press.html +468 -0
- package/.agents/skills/hyperframes-animation/examples/cta-orbit-collapse.html +1298 -0
- package/.agents/skills/hyperframes-animation/examples/demo-page-scroll-spotlight.html +759 -0
- package/.agents/skills/hyperframes-animation/examples/hook-counter-burst.html +729 -0
- package/.agents/skills/hyperframes-animation/examples/messaging-multi-phrase.html +352 -0
- package/.agents/skills/hyperframes-animation/examples/metric-video-text-pivot.html +779 -0
- package/.agents/skills/hyperframes-animation/examples/problem-mockup-overwhelm.html +1374 -0
- package/.agents/skills/hyperframes-animation/examples/proof-logo-chain.html +861 -0
- package/.agents/skills/hyperframes-animation/examples/takeover-ticker-displace.html +347 -0
- package/.agents/skills/hyperframes-animation/examples/workflow-approve-press.html +606 -0
- package/.agents/skills/hyperframes-animation/rules/3d-page-scroll.md +227 -0
- package/.agents/skills/hyperframes-animation/rules/3d-text-depth-layers.md +297 -0
- package/.agents/skills/hyperframes-animation/rules/ai-tracking-box.md +382 -0
- package/.agents/skills/hyperframes-animation/rules/ambient-glow-bloom.md +305 -0
- package/.agents/skills/hyperframes-animation/rules/asr-keyword-glow.md +286 -0
- package/.agents/skills/hyperframes-animation/rules/avatar-cloud-network.md +371 -0
- package/.agents/skills/hyperframes-animation/rules/camera-cursor-tracking.md +246 -0
- package/.agents/skills/hyperframes-animation/rules/card-morph-anchor.md +267 -0
- package/.agents/skills/hyperframes-animation/rules/center-outward-expansion.md +227 -0
- package/.agents/skills/hyperframes-animation/rules/context-sensitive-cursor.md +257 -0
- package/.agents/skills/hyperframes-animation/rules/coordinate-target-zoom.md +332 -0
- package/.agents/skills/hyperframes-animation/rules/counting-dynamic-scale.md +283 -0
- package/.agents/skills/hyperframes-animation/rules/css-marker-patterns.md +373 -0
- package/.agents/skills/hyperframes-animation/rules/cursor-click-ripple.md +262 -0
- package/.agents/skills/hyperframes-animation/rules/depth-of-field-blur.md +313 -0
- package/.agents/skills/hyperframes-animation/rules/depth-scatter-assemble.md +303 -0
- package/.agents/skills/hyperframes-animation/rules/discrete-text-sequence.md +273 -0
- package/.agents/skills/hyperframes-animation/rules/dynamic-content-sequencing.md +307 -0
- package/.agents/skills/hyperframes-animation/rules/gsap-effects.md +299 -0
- package/.agents/skills/hyperframes-animation/rules/hacker-flip-3d.md +223 -0
- package/.agents/skills/hyperframes-animation/rules/kinetic-beat-slam.md +183 -0
- package/.agents/skills/hyperframes-animation/rules/motion-blur-streak.md +328 -0
- package/.agents/skills/hyperframes-animation/rules/multi-phase-camera.md +273 -0
- package/.agents/skills/hyperframes-animation/rules/orbit-3d-entry.md +301 -0
- package/.agents/skills/hyperframes-animation/rules/physics-press-reaction.md +350 -0
- package/.agents/skills/hyperframes-animation/rules/press-release-spring.md +296 -0
- package/.agents/skills/hyperframes-animation/rules/reactive-displacement.md +277 -0
- package/.agents/skills/hyperframes-animation/rules/scale-swap-transition.md +298 -0
- package/.agents/skills/hyperframes-animation/rules/sine-wave-loop.md +278 -0
- package/.agents/skills/hyperframes-animation/rules/split-tilt-cards.md +277 -0
- package/.agents/skills/hyperframes-animation/rules/spring-pop-entrance.md +273 -0
- package/.agents/skills/hyperframes-animation/rules/stat-bars-and-fills.md +156 -0
- package/.agents/skills/hyperframes-animation/rules/svg-icon-enrichment.md +329 -0
- package/.agents/skills/hyperframes-animation/rules/svg-path-draw.md +274 -0
- package/.agents/skills/hyperframes-animation/rules/vertical-spring-ticker.md +239 -0
- package/.agents/skills/hyperframes-animation/rules/viewport-change.md +349 -0
- package/.agents/skills/hyperframes-animation/rules-index.md +86 -0
- package/.agents/skills/hyperframes-animation/scripts/animation-map.mjs +606 -0
- package/.agents/skills/hyperframes-animation/scripts/package-loader.mjs +288 -0
- package/.agents/skills/hyperframes-animation/scripts/package-loader.test.mjs +62 -0
- package/.agents/skills/hyperframes-animation/techniques.md +507 -0
- package/.agents/skills/hyperframes-animation/transitions/TRANSITION-REGISTRY.md +167 -0
- package/.agents/skills/hyperframes-animation/transitions/catalog.md +127 -0
- package/.agents/skills/hyperframes-animation/transitions/css-3d.md +12 -0
- package/.agents/skills/hyperframes-animation/transitions/css-blur.md +51 -0
- package/.agents/skills/hyperframes-animation/transitions/css-cover.md +43 -0
- package/.agents/skills/hyperframes-animation/transitions/css-destruction.md +95 -0
- package/.agents/skills/hyperframes-animation/transitions/css-dissolve.md +66 -0
- package/.agents/skills/hyperframes-animation/transitions/css-distortion.md +45 -0
- package/.agents/skills/hyperframes-animation/transitions/css-grid.md +10 -0
- package/.agents/skills/hyperframes-animation/transitions/css-light.md +49 -0
- package/.agents/skills/hyperframes-animation/transitions/css-mechanical.md +30 -0
- package/.agents/skills/hyperframes-animation/transitions/css-other.md +25 -0
- package/.agents/skills/hyperframes-animation/transitions/css-push.md +41 -0
- package/.agents/skills/hyperframes-animation/transitions/css-radial.md +37 -0
- package/.agents/skills/hyperframes-animation/transitions/css-scale.md +24 -0
- package/.agents/skills/hyperframes-animation/transitions/overview.md +153 -0
- package/.agents/skills/hyperframes-cli/SKILL.md +113 -0
- package/.agents/skills/hyperframes-cli/references/doctor-browser.md +45 -0
- package/.agents/skills/hyperframes-cli/references/init-and-scaffold.md +55 -0
- package/.agents/skills/hyperframes-cli/references/lambda.md +132 -0
- package/.agents/skills/hyperframes-cli/references/lint-validate-inspect.md +121 -0
- package/.agents/skills/hyperframes-cli/references/preview-render.md +149 -0
- package/.agents/skills/hyperframes-cli/references/upgrade-info-misc.md +75 -0
- package/.agents/skills/hyperframes-core/SKILL.md +78 -0
- package/.agents/skills/hyperframes-core/references/composition-patterns.md +263 -0
- package/.agents/skills/hyperframes-core/references/data-attributes.md +70 -0
- package/.agents/skills/hyperframes-core/references/determinism-rules.md +68 -0
- package/.agents/skills/hyperframes-core/references/full-screen-motion.md +62 -0
- package/.agents/skills/hyperframes-core/references/minimal-composition.md +66 -0
- package/.agents/skills/hyperframes-core/references/script-format.md +49 -0
- package/.agents/skills/hyperframes-core/references/storyboard-format.md +95 -0
- package/.agents/skills/hyperframes-core/references/sub-compositions.md +237 -0
- package/.agents/skills/hyperframes-core/references/subagent-dispatch.md +41 -0
- package/.agents/skills/hyperframes-core/references/tailwind.md +125 -0
- package/.agents/skills/hyperframes-core/references/tracks-and-clips.md +76 -0
- package/.agents/skills/hyperframes-core/references/variables-and-media.md +90 -0
- package/.agents/skills/hyperframes-creative/SKILL.md +70 -0
- package/.agents/skills/hyperframes-creative/frame-presets/biennale-yellow/FRAME.md +289 -0
- package/.agents/skills/hyperframes-creative/frame-presets/biennale-yellow/caption-skin.html +221 -0
- package/.agents/skills/hyperframes-creative/frame-presets/biennale-yellow/frame-showcase.html +1214 -0
- package/.agents/skills/hyperframes-creative/frame-presets/blockframe/FRAME.md +275 -0
- package/.agents/skills/hyperframes-creative/frame-presets/blockframe/caption-skin.html +224 -0
- package/.agents/skills/hyperframes-creative/frame-presets/blockframe/frame-showcase.html +1347 -0
- package/.agents/skills/hyperframes-creative/frame-presets/blue-professional/FRAME.md +307 -0
- package/.agents/skills/hyperframes-creative/frame-presets/blue-professional/caption-skin.html +223 -0
- package/.agents/skills/hyperframes-creative/frame-presets/blue-professional/frame-showcase.html +1372 -0
- package/.agents/skills/hyperframes-creative/frame-presets/bold-poster/FRAME.md +275 -0
- package/.agents/skills/hyperframes-creative/frame-presets/bold-poster/caption-skin.html +230 -0
- package/.agents/skills/hyperframes-creative/frame-presets/bold-poster/frame-showcase.html +1140 -0
- package/.agents/skills/hyperframes-creative/frame-presets/broadside/FRAME.md +284 -0
- package/.agents/skills/hyperframes-creative/frame-presets/broadside/caption-skin.html +225 -0
- package/.agents/skills/hyperframes-creative/frame-presets/broadside/frame-showcase.html +1166 -0
- package/.agents/skills/hyperframes-creative/frame-presets/capsule/FRAME.md +284 -0
- package/.agents/skills/hyperframes-creative/frame-presets/capsule/caption-skin.html +224 -0
- package/.agents/skills/hyperframes-creative/frame-presets/capsule/frame-showcase.html +1465 -0
- package/.agents/skills/hyperframes-creative/frame-presets/cartesian/FRAME.md +278 -0
- package/.agents/skills/hyperframes-creative/frame-presets/cartesian/caption-skin.html +222 -0
- package/.agents/skills/hyperframes-creative/frame-presets/cartesian/frame-showcase.html +1263 -0
- package/.agents/skills/hyperframes-creative/frame-presets/claude/FRAME.md +277 -0
- package/.agents/skills/hyperframes-creative/frame-presets/claude/caption-skin.html +224 -0
- package/.agents/skills/hyperframes-creative/frame-presets/claude/frame-showcase.html +1439 -0
- package/.agents/skills/hyperframes-creative/frame-presets/cobalt-grid/FRAME.md +265 -0
- package/.agents/skills/hyperframes-creative/frame-presets/cobalt-grid/caption-skin.html +238 -0
- package/.agents/skills/hyperframes-creative/frame-presets/cobalt-grid/frame-showcase.html +1468 -0
- package/.agents/skills/hyperframes-creative/frame-presets/coral/FRAME.md +314 -0
- package/.agents/skills/hyperframes-creative/frame-presets/coral/caption-skin.html +226 -0
- package/.agents/skills/hyperframes-creative/frame-presets/coral/frame-showcase.html +1268 -0
- package/.agents/skills/hyperframes-creative/frame-presets/creative-mode/FRAME.md +333 -0
- package/.agents/skills/hyperframes-creative/frame-presets/creative-mode/caption-skin.html +227 -0
- package/.agents/skills/hyperframes-creative/frame-presets/creative-mode/frame-showcase.html +1330 -0
- package/.agents/skills/hyperframes-creative/frame-presets/daisy-days/FRAME.md +274 -0
- package/.agents/skills/hyperframes-creative/frame-presets/daisy-days/caption-skin.html +230 -0
- package/.agents/skills/hyperframes-creative/frame-presets/daisy-days/frame-showcase.html +1444 -0
- package/.agents/skills/hyperframes-creative/frame-presets/editorial-forest/FRAME.md +265 -0
- package/.agents/skills/hyperframes-creative/frame-presets/editorial-forest/caption-skin.html +223 -0
- package/.agents/skills/hyperframes-creative/frame-presets/editorial-forest/frame-showcase.html +1273 -0
- package/.agents/skills/hyperframes-creative/palettes/bold-energetic.md +14 -0
- package/.agents/skills/hyperframes-creative/palettes/clean-corporate.md +14 -0
- package/.agents/skills/hyperframes-creative/palettes/dark-premium.md +14 -0
- package/.agents/skills/hyperframes-creative/palettes/jewel-rich.md +14 -0
- package/.agents/skills/hyperframes-creative/palettes/monochrome.md +14 -0
- package/.agents/skills/hyperframes-creative/palettes/nature-earth.md +14 -0
- package/.agents/skills/hyperframes-creative/palettes/neon-electric.md +14 -0
- package/.agents/skills/hyperframes-creative/palettes/pastel-soft.md +14 -0
- package/.agents/skills/hyperframes-creative/palettes/warm-editorial.md +14 -0
- package/.agents/skills/hyperframes-creative/references/audio-reactive.md +76 -0
- package/.agents/skills/hyperframes-creative/references/beat-direction.md +164 -0
- package/.agents/skills/hyperframes-creative/references/composition-patterns.md +199 -0
- package/.agents/skills/hyperframes-creative/references/data-in-motion.md +19 -0
- package/.agents/skills/hyperframes-creative/references/design-adherence.md +19 -0
- package/.agents/skills/hyperframes-creative/references/design-picker.md +123 -0
- package/.agents/skills/hyperframes-creative/references/design-spec.md +55 -0
- package/.agents/skills/hyperframes-creative/references/house-style.md +73 -0
- package/.agents/skills/hyperframes-creative/references/motion-principles.md +150 -0
- package/.agents/skills/hyperframes-creative/references/narration.md +92 -0
- package/.agents/skills/hyperframes-creative/references/prompt-expansion.md +68 -0
- package/.agents/skills/hyperframes-creative/references/typography.md +218 -0
- package/.agents/skills/hyperframes-creative/references/video-composition.md +63 -0
- package/.agents/skills/hyperframes-creative/references/visual-styles.md +457 -0
- package/.agents/skills/hyperframes-creative/scripts/contrast-report.mjs +353 -0
- package/.agents/skills/hyperframes-creative/scripts/extract-audio-data.py +188 -0
- package/.agents/skills/hyperframes-creative/scripts/package-loader.mjs +288 -0
- package/.agents/skills/hyperframes-creative/scripts/package-loader.test.mjs +62 -0
- package/.agents/skills/hyperframes-creative/templates/design-picker.html +1432 -0
- package/.agents/skills/hyperframes-keyframes/SKILL.md +237 -0
- package/.agents/skills/hyperframes-keyframes/agents/openai.yaml +4 -0
- package/.agents/skills/hyperframes-keyframes/references/keyframe-patterns.md +106 -0
- package/.agents/skills/motion-graphics/SKILL.md +172 -0
- package/.agents/skills/motion-graphics/agents/builder.md +40 -0
- package/.agents/skills/motion-graphics/agents/director.md +53 -0
- package/.agents/skills/motion-graphics/agents/finalize.md +17 -0
- package/.agents/skills/motion-graphics/catalog-map.md +40 -0
- package/.agents/skills/motion-graphics/categories/asset-fusion/module.md +37 -0
- package/.agents/skills/motion-graphics/categories/charts/module.md +21 -0
- package/.agents/skills/motion-graphics/categories/kinetic-type/module.md +19 -0
- package/.agents/skills/motion-graphics/categories/logo-reveal/module.md +17 -0
- package/.agents/skills/motion-graphics/categories/lower-thirds/module.md +16 -0
- package/.agents/skills/motion-graphics/categories/maps/bake-basemap.mjs +273 -0
- package/.agents/skills/motion-graphics/categories/maps/module.md +61 -0
- package/.agents/skills/motion-graphics/categories/news/module.md +56 -0
- package/.agents/skills/motion-graphics/categories/stat/module.md +21 -0
- package/.agents/skills/motion-graphics/categories/tweet/module.md +16 -0
- package/.agents/skills/motion-graphics/categories/webpage/module.md +21 -0
- package/.agents/skills/motion-graphics/grounding/PROTOCOL.md +64 -0
- package/.agents/skills/motion-graphics/grounding/locate.mjs +227 -0
- package/.agents/skills/motion-graphics/phases/source/guide.md +21 -0
- package/.agents/skills/motion-graphics/references/builder-contract.md +38 -0
- package/.agents/skills/motion-graphics/references/motion-vocabulary.md +43 -0
- package/.agents/skills/motion-graphics/references/shot-plan-ir.md +54 -0
- package/.agents/skills/motion-graphics/samples/asset-fusion/_ref-circle-highlight.html +306 -0
- package/.agents/skills/music/SKILL.md +416 -0
- package/.agents/skills/music/references/api_reference.md +519 -0
- package/.agents/skills/music/references/installation.md +65 -0
- package/.agents/skills/product-launch-video/SKILL.md +208 -0
- package/.agents/skills/product-launch-video/references/cut-catalog.md +220 -0
- package/.agents/skills/product-launch-video/references/motion-language.md +156 -0
- package/.agents/skills/product-launch-video/references/story-design.md +373 -0
- package/.agents/skills/product-launch-video/references/visual-design.md +126 -0
- package/.agents/skills/product-launch-video/scripts/assemble-index.mjs +570 -0
- package/.agents/skills/product-launch-video/scripts/audio.mjs +260 -0
- package/.agents/skills/product-launch-video/scripts/build-frame.mjs +536 -0
- package/.agents/skills/product-launch-video/scripts/captions.mjs +508 -0
- package/.agents/skills/product-launch-video/scripts/lib/assets.mjs +55 -0
- package/.agents/skills/product-launch-video/scripts/lib/dimensions.mjs +45 -0
- package/.agents/skills/product-launch-video/scripts/lib/pad-frame-duration.mjs +36 -0
- package/.agents/skills/product-launch-video/scripts/lib/pad-frame-duration.test.mjs +76 -0
- package/.agents/skills/product-launch-video/scripts/lib/storyboard.mjs +249 -0
- package/.agents/skills/product-launch-video/scripts/lib/tokens.mjs +204 -0
- package/.agents/skills/product-launch-video/scripts/lib/transition-registry.mjs +38 -0
- package/.agents/skills/product-launch-video/scripts/lib/transitions.json +71 -0
- package/.agents/skills/product-launch-video/scripts/stage-assets.mjs +39 -0
- package/.agents/skills/product-launch-video/scripts/transitions.mjs +327 -0
- package/.agents/skills/product-launch-video/sub-agents/frame-worker.md +75 -0
- package/.agents/skills/slideshow/SKILL.md +550 -0
- package/.agents/skills/slideshow/references/standalone-harness.md +1020 -0
- package/.agents/skills/talking-head-recut/NOTICE.md +39 -0
- package/.agents/skills/talking-head-recut/SKILL.md +1195 -0
- package/.agents/skills/talking-head-recut/assets/vendor/gsap.min.js +10 -0
- package/.agents/skills/talking-head-recut/references/DESIGN_INDEX.md +145 -0
- package/.agents/skills/talking-head-recut/references/frames/clean.html +92 -0
- package/.agents/skills/talking-head-recut/references/frames/hairline.html +171 -0
- package/.agents/skills/talking-head-recut/references/frames/polaroid.html +131 -0
- package/.agents/skills/talking-head-recut/references/layouts/overlay.html +164 -0
- package/.agents/skills/talking-head-recut/references/layouts/pip.html +143 -0
- package/.agents/skills/talking-head-recut/references/layouts/split.html +121 -0
- package/.agents/skills/talking-head-recut/references/layouts/stack.html +109 -0
- package/.agents/skills/talking-head-recut/references/styles/academic.html +172 -0
- package/.agents/skills/talking-head-recut/references/styles/audit.html +170 -0
- package/.agents/skills/talking-head-recut/references/styles/editorial.html +189 -0
- package/.agents/skills/talking-head-recut/references/styles/geom.html +181 -0
- package/.agents/skills/talking-head-recut/references/styles/minimal.html +130 -0
- package/.agents/skills/talking-head-recut/references/styles/spotlight.html +142 -0
- package/.agents/skills/talking-head-recut/references/styles/swiss.html +188 -0
- package/.agents/skills/talking-head-recut/references/styles/terminal.html +196 -0
- package/.agents/skills/talking-head-recut/references/styles/whiteboard.html +170 -0
- package/.agents/skills/talking-head-recut/references/styles/xhs.html +206 -0
- package/.agents/skills/text-to-speech/SKILL.md +226 -0
- package/.agents/skills/text-to-speech/references/installation.md +90 -0
- package/.agents/skills/text-to-speech/references/streaming.md +307 -0
- package/.agents/skills/text-to-speech/references/voice-settings.md +115 -0
- package/.agents/skills/vidfarm-director/SKILL.md +179 -0
- package/.agents/skills/vidfarm-director/recipes/find-and-fork-template.md +16 -0
- package/.agents/skills/vidfarm-director/recipes/local-edit-render-approve.md +13 -0
- package/.agents/skills/vidfarm-director/recipes/onboard-a-new-director.md +13 -0
- package/.agents/skills/vidfarm-director/recipes/retheme-template.md +17 -0
- package/.agents/skills/vidfarm-director/references/assets-and-sourcing.md +117 -0
- package/.agents/skills/vidfarm-director/references/automation-and-local-dev.md +276 -0
- package/.agents/skills/vidfarm-director/references/core-workflows.md +301 -0
- package/.agents/skills/vidfarm-director/references/editor-workflows.md +367 -0
- package/.agents/skills/vidfarm-director/references/onboarding.md +28 -0
- package/.agents/skills/vidfarm-director/references/primitives.md +307 -0
- package/.agents/skills/vidfarm-director/references/rest-api.md +84 -0
- package/.agents/skills/vidfarm-media/SKILL.md +158 -0
- package/.agents/skills/vidfarm-media/references/tts.md +111 -0
- package/.agents/skills/vidfarm-media/scripts/audio.mjs +628 -0
- package/.agents/skills/vidfarm-media/scripts/wait-bgm.mjs +31 -0
- package/.agents/skills/website-to-video/SKILL.md +145 -0
- package/.agents/skills/website-to-video/assets/sfx/CREDITS.md +35 -0
- package/.agents/skills/website-to-video/assets/sfx/manifest.json +97 -0
- package/.agents/skills/website-to-video/references/beat-builder-guide.md +263 -0
- package/.agents/skills/website-to-video/references/capabilities.md +713 -0
- package/.agents/skills/website-to-video/references/step-0-capture.md +55 -0
- package/.agents/skills/website-to-video/references/step-1-design.md +333 -0
- package/.agents/skills/website-to-video/references/step-2-brief.md +178 -0
- package/.agents/skills/website-to-video/references/step-3-storyboard.md +572 -0
- package/.agents/skills/website-to-video/references/step-4-vo.md +225 -0
- package/.agents/skills/website-to-video/references/step-5-build.md +483 -0
- package/.agents/skills/website-to-video/references/step-6-validate.md +341 -0
- package/.agents/skills/website-to-video/scripts/w2h-verify.mjs +759 -0
- package/README.md +97 -0
- package/SKILL.director.md +1644 -0
- package/SKILL.md +83 -0
- package/demo/README.md +28 -0
- package/demo/dist/app.css +1 -0
- package/demo/dist/app.js +968 -0
- package/demo/dist/chunks/chunk-3OT2D42H.js +1 -0
- package/demo/dist/chunks/chunk-DXB73IDG.js +1 -0
- package/demo/dist/chunks/domEditingLayers-AT7G6F4L-ZTHJHB7R.js +1 -0
- package/demo/dist/chunks/hyperframes-player-7HKH6NSO.js +459 -0
- package/demo/dist/chunks/lib-XAQ37YOE.js +1 -0
- package/demo/dist/chunks/src-TJ2QYA4U.js +207 -0
- package/demo/dist/favicon.ico +0 -0
- package/demo/dist/icons/timeline/audio.svg +7 -0
- package/demo/dist/icons/timeline/captions.svg +5 -0
- package/demo/dist/icons/timeline/composition.svg +12 -0
- package/demo/dist/icons/timeline/image.svg +18 -0
- package/demo/dist/icons/timeline/music.svg +10 -0
- package/demo/dist/icons/timeline/text.svg +3 -0
- package/demo/dist/index.html +16 -0
- package/dist/src/cli.js +7258 -0
- package/dist/src/devcli/auth-store.js +67 -0
- package/dist/src/devcli/captions.js +310 -0
- package/dist/src/devcli/clip-store.js +368 -0
- package/dist/src/devcli/clips.js +1138 -0
- package/dist/src/devcli/composition-edit.js +1292 -0
- package/dist/src/devcli/cost-mode.js +149 -0
- package/dist/src/devcli/doctor.js +192 -0
- package/dist/src/devcli/hyperframes-cli.js +118 -0
- package/dist/src/devcli/local-backend.js +167 -0
- package/dist/src/devcli/local-frontend-server.js +681 -0
- package/dist/src/devcli/local-render.js +136 -0
- package/dist/src/devcli/skills.js +476 -0
- package/dist/src/devcli/speech.js +178 -0
- package/dist/src/devcli/stills.js +249 -0
- package/dist/src/devcli/telemetry.js +236 -0
- package/dist/src/devcli/timeline-edit.js +490 -0
- package/dist/src/devcli/transitions.js +205 -0
- package/dist/src/hyperframes/composition.js +780 -0
- package/dist/src/lib/crypto.js +45 -0
- package/dist/src/lib/dev-log.js +54 -0
- package/dist/src/lib/display-name.js +11 -0
- package/dist/src/lib/ids.js +24 -0
- package/dist/src/lib/images.js +19 -0
- package/dist/src/lib/json.js +15 -0
- package/dist/src/lib/package-root.js +47 -0
- package/dist/src/lib/render-media-prep.js +293 -0
- package/dist/src/lib/template-paths.js +28 -0
- package/dist/src/lib/time.js +7 -0
- package/dist/src/lib/url-clean.js +85 -0
- package/dist/src/services/captions.js +123 -0
- package/dist/src/services/clip-curation/cost.js +116 -0
- package/dist/src/services/clip-curation/ffmpeg.js +352 -0
- package/dist/src/services/clip-curation/gemini.js +418 -0
- package/dist/src/services/clip-curation/hunt.js +470 -0
- package/dist/src/services/clip-curation/index.js +19 -0
- package/dist/src/services/clip-curation/local-agent.js +248 -0
- package/dist/src/services/clip-curation/media-select.js +152 -0
- package/dist/src/services/clip-curation/presets.js +20 -0
- package/dist/src/services/clip-curation/presets.v1.json +59 -0
- package/dist/src/services/clip-curation/query.js +167 -0
- package/dist/src/services/clip-curation/refine.js +165 -0
- package/dist/src/services/clip-curation/scan.js +189 -0
- package/dist/src/services/clip-curation/source-naming.js +131 -0
- package/dist/src/services/clip-curation/taxonomy.js +73 -0
- package/dist/src/services/clip-curation/taxonomy.v1.json +102 -0
- package/dist/src/services/clip-curation/types.js +7 -0
- package/dist/src/services/composition-lint.js +199 -0
- package/dist/src/services/provider-errors.js +128 -0
- package/dist/src/services/speech.js +629 -0
- package/package.json +154 -0
- package/public/assets/discover-client-app.js +1 -0
- package/public/assets/favicon.ico +0 -0
- package/public/assets/file-directory-app.js +89 -0
- package/public/assets/homepage-app.js +54 -0
- package/public/assets/homepage-client-app.js +80 -0
- package/public/assets/landing-page-client-app.js +87 -0
- package/public/assets/logo-vidfarm.png +0 -0
- package/public/assets/page-runtime-client-app.js +94 -0
- package/public/assets/placeholders/scene-placeholder.png +0 -0
- package/public/serve-shells/editor.html +3146 -0
- package/public/serve-shells/library-files.html +3450 -0
- package/public/serve-shells/library-raws.html +4404 -0
- package/public/serve-shells/tools-clipper.html +3991 -0
- package/public/serve-shells/tools-image.html +5584 -0
- package/public/serve-shells/tools-video.html +4404 -0
|
@@ -0,0 +1,3450 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<link rel="icon" href="/assets/favicon.ico" sizes="any">
|
|
7
|
+
<link rel="apple-touch-icon" href="/assets/logo-vidfarm.png">
|
|
8
|
+
<title>Library Files · VidFarm</title>
|
|
9
|
+
<meta name="description" content="Open your file workspace to manage durable assets, temp files, raws, and approved outputs.">
|
|
10
|
+
<meta name="theme-color" content="#f8f4eb">
|
|
11
|
+
<meta name="robots" content="index, follow">
|
|
12
|
+
<meta name="application-name" content="VidFarm">
|
|
13
|
+
<link rel="canonical" href="https://vidfarm.cc/library/files">
|
|
14
|
+
<meta property="og:type" content="website">
|
|
15
|
+
<meta property="og:site_name" content="VidFarm">
|
|
16
|
+
<meta property="og:title" content="Library Files · VidFarm">
|
|
17
|
+
<meta property="og:description" content="Open your file workspace to manage durable assets, temp files, raws, and approved outputs.">
|
|
18
|
+
<meta property="og:url" content="https://vidfarm.cc/library/files">
|
|
19
|
+
<meta property="og:image" content="https://vidfarmprodstack-vidfarmbucket335ee12f-0vsvtd5earqy.s3.us-east-1.amazonaws.com/primitives/marketing/meta-previews/library-files-4b4646efb9.jpg">
|
|
20
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
21
|
+
<meta name="twitter:title" content="Library Files · VidFarm">
|
|
22
|
+
<meta name="twitter:description" content="Open your file workspace to manage durable assets, temp files, raws, and approved outputs.">
|
|
23
|
+
<meta name="twitter:image" content="https://vidfarmprodstack-vidfarmbucket335ee12f-0vsvtd5earqy.s3.us-east-1.amazonaws.com/primitives/marketing/meta-previews/library-files-4b4646efb9.jpg">
|
|
24
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
25
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
26
|
+
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
27
|
+
<style>
|
|
28
|
+
:root{
|
|
29
|
+
--rk-font-display:"Hanken Grotesk","blMelody",ui-sans-serif,system-ui,sans-serif;
|
|
30
|
+
--rk-font-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
|
|
31
|
+
--rk-font-mono:ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,monospace;
|
|
32
|
+
/* honey gold — the one joy accent */
|
|
33
|
+
--rk-gold-500:#ffc738;--rk-gold-600:#f6c744;--rk-gold-700:#fcb900;--rk-gold-tint:#fff5e4;--rk-gold-tint2:#ffe9cc;
|
|
34
|
+
/* ink + neutral scale */
|
|
35
|
+
--rk-ink:#171717;--rk-n-800:#262626;--rk-n-700:#404040;--rk-n-600:#525252;--rk-n-500:#737373;--rk-n-400:#a3a3a3;
|
|
36
|
+
--rk-n-300:#d4d4d4;--rk-n-200:#ededed;--rk-n-100:#f5f5f5;--rk-n-50:#fbfbfb;--rk-white:#fff;
|
|
37
|
+
/* support pastels */
|
|
38
|
+
--rk-sky:#3f9fe0;--rk-sky-tint:#e2effd;--rk-violet:#9f5bde;--rk-violet-tint:#e4ddfd;
|
|
39
|
+
--rk-green:#22c55e;--rk-green-tint:#dcfce7;--rk-coral:#f97316;--rk-coral-tint:#ffe9cc;
|
|
40
|
+
--rk-red:#ef4444;--rk-red-tint:#fee2e2;
|
|
41
|
+
/* semantic */
|
|
42
|
+
--rk-bg:var(--rk-n-50);--rk-bg-section:var(--rk-n-100);--rk-surface:var(--rk-white);
|
|
43
|
+
--rk-border:var(--rk-n-200);--rk-border-strong:var(--rk-n-300);
|
|
44
|
+
--rk-text:var(--rk-n-700);--rk-text-muted:var(--rk-n-500);--rk-text-faint:var(--rk-n-400);
|
|
45
|
+
/* radius */
|
|
46
|
+
--rk-r-sm:6px;--rk-r-md:8px;--rk-r-lg:10px;--rk-r-xl:12px;--rk-r-2xl:16px;--rk-r-3xl:24px;--rk-r-full:9999px;
|
|
47
|
+
/* shadow — diffuse soft sunlight, never harsh */
|
|
48
|
+
--rk-shadow-xs:0 1px 2px 0 #0000000d;
|
|
49
|
+
--rk-shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;
|
|
50
|
+
--rk-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
|
|
51
|
+
--rk-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
|
|
52
|
+
--rk-shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;
|
|
53
|
+
--rk-shadow-card:0 1px 2px #0000000d,0 8px 24px -12px #00000014;
|
|
54
|
+
--rk-shadow-nav:0 4px 24px -8px #00000026,0 1px 2px #0000000d;
|
|
55
|
+
--rk-ring-gold:0 0 0 3px var(--rk-gold-600),0 0 14px rgba(246,199,68,.4);
|
|
56
|
+
/* type scale */
|
|
57
|
+
--rk-text-xs:.75rem;--rk-text-sm:.875rem;--rk-text-base:1rem;--rk-text-lg:1.125rem;
|
|
58
|
+
--rk-text-xl:1.25rem;--rk-text-2xl:1.5rem;--rk-text-3xl:1.875rem;--rk-text-4xl:2.25rem;--rk-text-5xl:3rem;
|
|
59
|
+
/* space + motion */
|
|
60
|
+
--rk-container:75rem;--rk-gutter:clamp(1rem,4vw,2rem);--rk-section-y:clamp(3rem,6vw,5rem);
|
|
61
|
+
--rk-glass-blur:16px;--rk-ease:cubic-bezier(.22,1,.36,1);--rk-dur:200ms;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
*,*::before,*::after{box-sizing:border-box}
|
|
65
|
+
.rk-root{margin:0;font-family:var(--rk-font-body);color:var(--rk-text);background:var(--rk-bg);
|
|
66
|
+
-webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh}
|
|
67
|
+
.rk-root a{text-decoration:none;color:inherit}
|
|
68
|
+
/* buttons define their own text color; don't let the inherit rule above override it */
|
|
69
|
+
.rk-root a.rk-btn-ink{color:#fff}
|
|
70
|
+
.rk-root a.rk-btn-gold{color:var(--rk-ink)}
|
|
71
|
+
.rk-root a.rk-btn-ghost{color:var(--rk-ink)}
|
|
72
|
+
.rk-root a.rk-btn-danger{color:var(--rk-red)}
|
|
73
|
+
.rk-root h1,.rk-root h2,.rk-root h3,.rk-root h4{font-family:var(--rk-font-display);font-weight:800;
|
|
74
|
+
letter-spacing:-.025em;line-height:1.1;color:var(--rk-ink);margin:0}
|
|
75
|
+
.rk-root p{margin:0}
|
|
76
|
+
.rk-root code{font-family:var(--rk-font-mono);font-size:.9em;background:var(--rk-n-100);
|
|
77
|
+
padding:2px 6px;border-radius:6px;color:var(--rk-n-700)}
|
|
78
|
+
|
|
79
|
+
/* layout */
|
|
80
|
+
.rk-container{width:min(var(--rk-container),100%);margin:0 auto;padding:0 var(--rk-gutter)}
|
|
81
|
+
.rk-container-wide{width:min(85rem,100%);margin:0 auto;padding:0 var(--rk-gutter)}
|
|
82
|
+
/* vertical-only so it never clobbers the horizontal gutter that .rk-container
|
|
83
|
+
/ .rk-container-wide set via padding-left/right (a full padding shorthand
|
|
84
|
+
here would zero the side gutter, leaving content flush to the viewport
|
|
85
|
+
edges, most visible on mobile) */
|
|
86
|
+
.rk-page{padding-top:24px;padding-bottom:80px}
|
|
87
|
+
.rk-page-head{display:grid;gap:4px;margin-bottom:18px}
|
|
88
|
+
.rk-h1{font-size:var(--rk-text-3xl);letter-spacing:-.03em}
|
|
89
|
+
.rk-sub{font-size:var(--rk-text-base);color:var(--rk-text-muted)}
|
|
90
|
+
.rk-stack{display:grid;gap:16px}
|
|
91
|
+
.rk-row{display:flex;align-items:center;gap:12px}
|
|
92
|
+
.rk-spread{display:flex;align-items:center;justify-content:space-between;gap:16px}
|
|
93
|
+
.rk-wrap{flex-wrap:wrap}
|
|
94
|
+
.rk-grid{display:grid;gap:20px}
|
|
95
|
+
.rk-grid-2{grid-template-columns:repeat(2,1fr)}
|
|
96
|
+
.rk-grid-3{grid-template-columns:repeat(3,1fr)}
|
|
97
|
+
.rk-grid-4{grid-template-columns:repeat(4,1fr)}
|
|
98
|
+
@media(max-width:900px){.rk-grid-3,.rk-grid-4{grid-template-columns:repeat(2,1fr)}}
|
|
99
|
+
@media(max-width:620px){.rk-grid-2,.rk-grid-3,.rk-grid-4{grid-template-columns:1fr}}
|
|
100
|
+
.rk-muted{color:var(--rk-text-muted)}.rk-faint{color:var(--rk-text-faint)}
|
|
101
|
+
.rk-mono{font-family:var(--rk-font-mono)}
|
|
102
|
+
|
|
103
|
+
/* app chrome — fixed LEFT sidebar nav + content column */
|
|
104
|
+
.rk-app{min-height:100vh}
|
|
105
|
+
.rk-sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;z-index:50;display:flex;flex-direction:column;gap:4px;
|
|
106
|
+
padding:20px 14px 16px;background:#fff;border-right:1px solid var(--rk-border);overflow-y:auto}
|
|
107
|
+
.rk-content{margin-left:248px;min-height:100vh;background:var(--rk-bg)}
|
|
108
|
+
.rk-sidebar-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;font-family:var(--rk-font-display);
|
|
109
|
+
font-weight:800;font-size:20px;color:var(--rk-ink);letter-spacing:-.02em}
|
|
110
|
+
.rk-sidebar-brand .rk-brand-mark{width:36px;height:36px;border-radius:10px}
|
|
111
|
+
.rk-sidebar-nav{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0}
|
|
112
|
+
.rk-sidebar-sep{height:1px;background:var(--rk-border);margin:8px}
|
|
113
|
+
.rk-sidebar-item{display:flex;align-items:center;padding:9px 13px;border-radius:var(--rk-r-lg);
|
|
114
|
+
font-size:14px;font-weight:600;color:var(--rk-n-600);white-space:nowrap;
|
|
115
|
+
transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
116
|
+
.rk-sidebar-item:hover{background:var(--rk-n-100);color:var(--rk-ink)}
|
|
117
|
+
.rk-sidebar-item.is-active{background:var(--rk-gold-tint);color:var(--rk-ink)}
|
|
118
|
+
/* signed-in identity — subtle, small, pinned to the very bottom of the sidebar
|
|
119
|
+
* so you can tell which account you're in at a glance. The chat FAB hovers
|
|
120
|
+
* ABOVE this block (see .rk-signed-in .rk-fab) rather than sharing the spot. */
|
|
121
|
+
.rk-sidebar-account{margin-top:8px;padding:8px 13px 2px;border-top:1px solid var(--rk-border);
|
|
122
|
+
color:var(--rk-n-500);line-height:1.3;overflow:hidden}
|
|
123
|
+
.rk-sidebar-account-name{font-size:12px;font-weight:600;color:var(--rk-n-600);
|
|
124
|
+
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
125
|
+
.rk-sidebar-account-email{font-size:11px;font-weight:500;color:var(--rk-n-400);
|
|
126
|
+
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
127
|
+
/* subtle "cloud status" line under the nav (above the account footer) — a quiet
|
|
128
|
+
always-on indicator that opens the Cloud Status drawer on click. Indented past
|
|
129
|
+
the chat FAB's default resting spot (x 16–72px) so the label is never hidden
|
|
130
|
+
behind it. */
|
|
131
|
+
.rk-sidebar-cloud{margin:2px 8px 4px 70px;display:flex;align-items:center;gap:7px;padding:6px 8px;
|
|
132
|
+
border:0;border-radius:var(--rk-r-lg);background:transparent;cursor:pointer;color:var(--rk-n-400);
|
|
133
|
+
font:inherit;font-size:11.5px;font-weight:600;text-align:left;width:calc(100% - 78px);
|
|
134
|
+
transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
135
|
+
.rk-sidebar-cloud[hidden]{display:none}
|
|
136
|
+
.rk-sidebar-cloud:hover{background:var(--rk-n-100);color:var(--rk-n-600)}
|
|
137
|
+
.rk-sidebar-cloud svg{width:14px;height:14px;flex:none;opacity:.85}
|
|
138
|
+
.rk-sidebar-cloud-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
139
|
+
.rk-sidebar-cloud.is-running{color:var(--rk-gold-700)}
|
|
140
|
+
.rk-sidebar-cloud-spin{flex:none;width:12px;height:12px;border-radius:999px;
|
|
141
|
+
border:2px solid var(--rk-gold-tint2);border-top-color:var(--rk-gold-600);
|
|
142
|
+
animation:rk-sidebar-cloud-spin .7s linear infinite}
|
|
143
|
+
@keyframes rk-sidebar-cloud-spin{to{transform:rotate(360deg)}}
|
|
144
|
+
/* AI chat dock — draggable FAB (defaults to the old sidebar-foot spot) + popup panel.
|
|
145
|
+
* The panel is 2x the sidebar width and, when it opens on the left, visually
|
|
146
|
+
* REPLACES the nav (sidebar goes visibility:hidden via body.rk-chat-left so the
|
|
147
|
+
* layout never jumps). If the FAB was dragged to the right half of the viewport
|
|
148
|
+
* the panel anchors right instead, so it is never cut off. */
|
|
149
|
+
.rk-fab{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;width:56px;height:56px;border-radius:var(--rk-r-full);
|
|
150
|
+
border:0;cursor:grab;background:var(--rk-gold-500);color:var(--rk-ink);display:grid;place-items:center;
|
|
151
|
+
box-shadow:var(--rk-shadow-lg);touch-action:none;user-select:none;-webkit-user-select:none;
|
|
152
|
+
transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),opacity var(--rk-dur) var(--rk-ease)}
|
|
153
|
+
/* signed in: the name/email block sits at the sidebar foot, so lift the FAB's
|
|
154
|
+
* default resting spot to hover just above it (never overlapping the identity).
|
|
155
|
+
* Only applies to the CSS default — a dragged FAB uses its saved inline top. */
|
|
156
|
+
.rk-signed-in .rk-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
|
|
157
|
+
.rk-fab:hover{transform:translateY(-2px);box-shadow:0 6px 18px -6px rgba(252,185,0,.6),var(--rk-shadow-lg)}
|
|
158
|
+
.rk-fab.is-dragging{cursor:grabbing;transition:none;transform:scale(1.08)}
|
|
159
|
+
.rk-fab.is-open{opacity:0;pointer-events:none;transform:scale(.6)}
|
|
160
|
+
.rk-fab svg{width:26px;height:26px}
|
|
161
|
+
.rk-aichat{position:fixed;z-index:95;top:12px;bottom:12px;left:12px;width:min(440px,calc(100vw - 24px));
|
|
162
|
+
display:flex;flex-direction:row;background:var(--rk-surface);border:1px solid var(--rk-border);
|
|
163
|
+
border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-xl);overflow:hidden;
|
|
164
|
+
animation:rk-aichat-in .22s var(--rk-ease)}
|
|
165
|
+
.rk-aichat.has-files,.rk-aichat.has-history,.rk-aichat.has-cloud{width:min(772px,calc(100vw - 24px))}
|
|
166
|
+
.rk-aichat.is-right{left:auto;right:12px}
|
|
167
|
+
.rk-aichat[hidden]{display:none}
|
|
168
|
+
@keyframes rk-aichat-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
|
|
169
|
+
.rk-chat-left .rk-sidebar{visibility:hidden}
|
|
170
|
+
|
|
171
|
+
/* left Files pane — baked into the panel; My Files + Temp as root folders of
|
|
172
|
+
one virtual root + directory nav. Also reused inline by /reskin/settings. */
|
|
173
|
+
.rk-aichat-files{flex:none;width:266px;display:none;flex-direction:column;min-height:0;
|
|
174
|
+
border-right:1px solid var(--rk-border);background:var(--rk-n-50)}
|
|
175
|
+
.rk-aichat.has-files .rk-aichat-files{display:flex}
|
|
176
|
+
.rk-aichat-files .rk-aichat-crumbs{padding-top:2px}
|
|
177
|
+
|
|
178
|
+
/* files-only mode — opened from the /chat composer's attach button. Shows ONLY
|
|
179
|
+
the file explorer (no chat column / history), as a slim right-hand drawer. */
|
|
180
|
+
/* Narrow panels can't hold a left drawer AND a usable chat column side-by-side
|
|
181
|
+
(266px files + a crushed ~150px chat — the classic "can't get to the chat"
|
|
182
|
+
trap). Below this width the OPEN drawer takes the full panel and the chat
|
|
183
|
+
column steps aside; each drawer's own close/back button (Files/History/Cloud)
|
|
184
|
+
restores the chat. Above it they sit side-by-side as usual. */
|
|
185
|
+
@media (max-width:640px){
|
|
186
|
+
.rk-aichat.has-files .rk-aichat-main,
|
|
187
|
+
.rk-aichat.has-history .rk-aichat-main,
|
|
188
|
+
.rk-aichat.has-cloud .rk-aichat-main{display:none}
|
|
189
|
+
.rk-aichat.has-files .rk-aichat-files,
|
|
190
|
+
.rk-aichat.has-history .rk-aichat-history,
|
|
191
|
+
.rk-aichat.has-cloud .rk-aichat-cloud{flex:1 1 auto;width:auto;border-right:0}
|
|
192
|
+
}
|
|
193
|
+
.rk-aichat.is-files-only{width:min(384px,calc(100vw - 24px))}
|
|
194
|
+
.rk-aichat.is-files-only .rk-aichat-main,
|
|
195
|
+
.rk-aichat.is-files-only .rk-aichat-history,
|
|
196
|
+
.rk-aichat.is-files-only .rk-aichat-cloud{display:none}
|
|
197
|
+
.rk-aichat.is-files-only .rk-aichat-files{display:flex;flex:1;border-right:0}
|
|
198
|
+
.rk-aichat.is-files-only .rk-aichat-files .rk-aichat-crumbs{padding-top:2px}
|
|
199
|
+
.rk-aichat-files-head{display:flex;align-items:center;gap:8px;
|
|
200
|
+
padding:14px 14px 10px;flex:none}
|
|
201
|
+
.rk-aichat-files-title{flex:1;min-width:0;font-family:var(--rk-font-display);font-weight:800;
|
|
202
|
+
font-size:15px;color:var(--rk-ink);letter-spacing:-.01em}
|
|
203
|
+
|
|
204
|
+
/* left Chat-history pane — shares the same left slot as Files (only one shows
|
|
205
|
+
at a time); reuses the rk-aichat-frow row visuals for each past chat. */
|
|
206
|
+
.rk-aichat-history{flex:none;width:266px;display:none;flex-direction:column;min-height:0;
|
|
207
|
+
border-right:1px solid var(--rk-border);background:var(--rk-n-50)}
|
|
208
|
+
.rk-aichat.has-history .rk-aichat-history{display:flex}
|
|
209
|
+
.rk-aichat-hist-head{display:flex;align-items:center;gap:8px;padding:18px 12px 8px;flex:none}
|
|
210
|
+
.rk-aichat-hist-title{flex:1;min-width:0;font-family:var(--rk-font-display);font-weight:800;
|
|
211
|
+
font-size:13px;color:var(--rk-ink);letter-spacing:-.01em}
|
|
212
|
+
.rk-aichat-hist-body{flex:1;min-height:0;overflow-y:auto;padding:2px 8px 12px;display:grid;gap:2px;align-content:start}
|
|
213
|
+
.rk-aichat-hist-body .rk-aichat-frow.is-active{background:#fff;box-shadow:var(--rk-shadow-xs);
|
|
214
|
+
outline:1.5px solid var(--rk-gold-600);outline-offset:-1.5px}
|
|
215
|
+
.rk-aichat-hist-body .rk-aichat-frow.is-active .rk-aichat-fic{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
|
|
216
|
+
|
|
217
|
+
/* left Cloud-status pane — shares the same left slot as Files/History. Lists the
|
|
218
|
+
customer's long-lived async work (imports, forks, renders, jobs) with All /
|
|
219
|
+
Running / Done / Error filters, live status, and open-in-new-tab links. */
|
|
220
|
+
.rk-aichat-cloud{flex:none;width:300px;display:none;flex-direction:column;min-height:0;
|
|
221
|
+
border-right:1px solid var(--rk-border);background:var(--rk-n-50)}
|
|
222
|
+
.rk-aichat.has-cloud .rk-aichat-cloud{display:flex}
|
|
223
|
+
.rk-aichat-cloud-head{display:flex;align-items:center;gap:8px;padding:18px 12px 8px;flex:none}
|
|
224
|
+
.rk-aichat-cloud-title{flex:1;min-width:0;font-family:var(--rk-font-display);font-weight:800;
|
|
225
|
+
font-size:13px;color:var(--rk-ink);letter-spacing:-.01em}
|
|
226
|
+
.rk-aichat-cloud-refresh{width:26px;height:26px}
|
|
227
|
+
.rk-aichat-cloud-refresh svg{width:14px;height:14px}
|
|
228
|
+
.rk-aichat-cloud-filters{display:flex;gap:4px;padding:0 12px 8px;flex:none;flex-wrap:wrap}
|
|
229
|
+
.rk-cloud-fbtn{padding:3px 9px;border-radius:999px;border:1px solid var(--rk-border);background:#fff;
|
|
230
|
+
cursor:pointer;color:var(--rk-n-600);font:inherit;font-size:11.5px;font-weight:600;line-height:1.4;
|
|
231
|
+
transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
232
|
+
.rk-cloud-fbtn:hover{background:var(--rk-n-100);color:var(--rk-ink)}
|
|
233
|
+
.rk-cloud-fbtn.is-on{background:var(--rk-gold-tint);border-color:var(--rk-gold-600);color:var(--rk-ink)}
|
|
234
|
+
.rk-aichat-cloud-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 8px 12px;
|
|
235
|
+
display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-content:start}
|
|
236
|
+
.rk-cloud-row{display:flex;align-items:center;gap:9px;min-width:0;max-width:100%;padding:8px 9px;border-radius:var(--rk-r-lg);
|
|
237
|
+
background:#fff;border:1px solid var(--rk-border);text-align:left}
|
|
238
|
+
.rk-cloud-row.is-highlight{outline:2px solid var(--rk-gold-600);outline-offset:-1px;
|
|
239
|
+
background:var(--rk-gold-tint);animation:rk-cloud-flash 1.1s var(--rk-ease)}
|
|
240
|
+
@keyframes rk-cloud-flash{0%{box-shadow:0 0 0 0 rgba(252,185,0,.55)}100%{box-shadow:0 0 0 8px rgba(252,185,0,0)}}
|
|
241
|
+
.rk-cloud-ic{flex:none;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;
|
|
242
|
+
font-size:11px;line-height:1;background:var(--rk-n-100);color:var(--rk-n-600)}
|
|
243
|
+
.rk-cloud-ic.is-running{background:var(--rk-gold-tint2);color:var(--rk-gold-700);animation:rk-cloud-pulse 1.5s ease-in-out infinite}
|
|
244
|
+
.rk-cloud-ic.is-queued{background:var(--rk-n-100);color:var(--rk-n-500)}
|
|
245
|
+
.rk-cloud-ic.is-done{background:#e7f6ec;color:#1a7f43}
|
|
246
|
+
.rk-cloud-ic.is-error{background:#fdeaea;color:#c0362c}
|
|
247
|
+
@keyframes rk-cloud-pulse{0%,100%{opacity:1}50%{opacity:.35}}
|
|
248
|
+
.rk-cloud-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
|
|
249
|
+
.rk-cloud-name{font-size:12.5px;font-weight:700;color:var(--rk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
250
|
+
.rk-cloud-sub{font-size:11px;color:var(--rk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
251
|
+
.rk-cloud-right{flex:none;display:flex;align-items:center;gap:6px}
|
|
252
|
+
.rk-cloud-pill{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--rk-n-100);color:var(--rk-n-600)}
|
|
253
|
+
.rk-cloud-pill.is-running{background:var(--rk-gold-tint);color:var(--rk-gold-700)}
|
|
254
|
+
.rk-cloud-pill.is-done{background:#e7f6ec;color:#1a7f43}
|
|
255
|
+
.rk-cloud-pill.is-error{background:#fdeaea;color:#c0362c}
|
|
256
|
+
.rk-cloud-open{flex:none;width:24px;height:24px;border-radius:var(--rk-r-md);display:grid;place-items:center;
|
|
257
|
+
color:var(--rk-n-500);border:1px solid transparent}
|
|
258
|
+
.rk-cloud-open:hover{background:var(--rk-n-100);color:var(--rk-ink);border-color:var(--rk-border)}
|
|
259
|
+
/* the toggle-button running dot */
|
|
260
|
+
.rk-cloud-dot{position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:999px;
|
|
261
|
+
background:var(--rk-gold-600);box-shadow:0 0 0 2px #fff;animation:rk-cloud-pulse 1.5s ease-in-out infinite}
|
|
262
|
+
#rkCloudToggle{position:relative}
|
|
263
|
+
.rk-aichat-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:0 12px 8px;flex:none}
|
|
264
|
+
.rk-aichat-crumb{padding:2px 6px;border-radius:var(--rk-r-sm);cursor:pointer;background:transparent;border:0;
|
|
265
|
+
color:var(--rk-text-muted);font-size:12px;font-weight:600;font-family:inherit;max-width:120px;overflow:hidden;
|
|
266
|
+
text-overflow:ellipsis;white-space:nowrap}
|
|
267
|
+
.rk-aichat-crumb:hover{background:var(--rk-n-100);color:var(--rk-ink)}
|
|
268
|
+
.rk-aichat-crumb.is-current{color:var(--rk-ink)}
|
|
269
|
+
.rk-aichat-crumb-sep{color:var(--rk-n-300);font-size:12px}
|
|
270
|
+
.rk-aichat-files-body{flex:1;min-height:0;overflow-y:auto;padding:2px 8px 12px;display:grid;gap:2px;align-content:start}
|
|
271
|
+
.rk-aichat-frow{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border-radius:var(--rk-r-lg);
|
|
272
|
+
border:0;background:transparent;cursor:pointer;text-align:left;font-family:inherit;min-width:0;
|
|
273
|
+
transition:background var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
|
|
274
|
+
.rk-aichat-frow:hover{background:#fff;box-shadow:var(--rk-shadow-xs)}
|
|
275
|
+
/* preview trigger fills the row; attach button sits to its right */
|
|
276
|
+
.rk-aichat-fmainbtn{flex:1;min-width:0;display:flex;align-items:center;gap:9px;border:0;background:transparent;
|
|
277
|
+
padding:0;cursor:pointer;text-align:left;font-family:inherit}
|
|
278
|
+
.rk-aichat-fic{width:30px;height:30px;border-radius:var(--rk-r-md);flex:none;display:grid;place-items:center;
|
|
279
|
+
font-size:11px;font-weight:700;overflow:hidden}
|
|
280
|
+
.rk-aichat-fic-folder{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
|
|
281
|
+
.rk-aichat-fic-file{background:var(--rk-n-100);color:var(--rk-n-600)}
|
|
282
|
+
.rk-aichat-fic img,.rk-aichat-fic video{width:100%;height:100%;object-fit:cover}
|
|
283
|
+
.rk-aichat-fmain{flex:1;min-width:0;display:grid;gap:1px}
|
|
284
|
+
.rk-aichat-fname{font-size:12.5px;font-weight:600;color:var(--rk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
285
|
+
.rk-aichat-fmeta{font-size:11px;color:var(--rk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
286
|
+
.rk-aichat-fadd{flex:none;font-size:11px;font-weight:700;color:var(--rk-gold-700);opacity:0;cursor:pointer;
|
|
287
|
+
border:1px solid transparent;border-radius:var(--rk-r-full);background:transparent;padding:3px 9px;font-family:inherit;
|
|
288
|
+
transition:opacity var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
289
|
+
.rk-aichat-frow:hover .rk-aichat-fadd{opacity:1}
|
|
290
|
+
.rk-aichat-fadd:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
|
|
291
|
+
.rk-aichat-fadd:focus-visible{opacity:1}
|
|
292
|
+
.rk-aichat-fstate{padding:22px 14px;text-align:center;font-size:12.5px;color:var(--rk-text-muted);line-height:1.5;display:grid;gap:8px;justify-items:center}
|
|
293
|
+
.rk-aichat-fstate a{color:var(--rk-gold-700);font-weight:600}
|
|
294
|
+
.rk-aichat-fstate button{font-family:inherit;font-size:12px;font-weight:600;color:var(--rk-ink);cursor:pointer;
|
|
295
|
+
background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:5px 12px}
|
|
296
|
+
.rk-aichat-fstate button:hover{background:var(--rk-n-100)}
|
|
297
|
+
/* upload dropzone footer (shown when inside My Files / Temp) */
|
|
298
|
+
.rk-aichat-drop{flex:none;margin:2px 10px 12px;padding:13px 12px;border:1.5px dashed var(--rk-border-strong);
|
|
299
|
+
border-radius:var(--rk-r-xl);background:#fff;display:grid;gap:9px;justify-items:center;text-align:center;
|
|
300
|
+
transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
|
|
301
|
+
.rk-aichat-drop[hidden]{display:none}
|
|
302
|
+
.rk-aichat-drop.is-drag{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
|
|
303
|
+
.rk-aichat-drop-text{font-size:11.5px;color:var(--rk-text-muted);line-height:1.4;overflow-wrap:anywhere}
|
|
304
|
+
.rk-aichat-drop-btn{font-family:inherit;font-size:12px;font-weight:700;color:var(--rk-ink);cursor:pointer;
|
|
305
|
+
background:var(--rk-gold-tint);border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-full);padding:6px 15px;
|
|
306
|
+
transition:background var(--rk-dur) var(--rk-ease)}
|
|
307
|
+
.rk-aichat-drop-btn:hover{background:var(--rk-gold-tint2)}
|
|
308
|
+
.rk-aichat-drop-btn:disabled{opacity:.6;cursor:default}
|
|
309
|
+
|
|
310
|
+
/* ── reusable directory explorer (createDirectoryExplorer) ──
|
|
311
|
+
Shares the .rk-aichat-frow/-fic/-fmain row look; adds search, multi-select,
|
|
312
|
+
a folder Open button, a per-row "…" kebab menu, and a copy-path toast.
|
|
313
|
+
Reused verbatim by the chat dock (attach mode) and /library/raws (standalone). */
|
|
314
|
+
.rk-dir{display:flex;flex-direction:column;min-height:0;flex:1}
|
|
315
|
+
.rk-dir-space{flex:none;display:inline-flex;gap:2px;margin:2px 12px 8px;padding:2px;
|
|
316
|
+
background:var(--rk-n-100,#f1ede6);border:1px solid var(--rk-border);border-radius:var(--rk-r-full);align-self:flex-start}
|
|
317
|
+
.rk-dir-space-btn{font-family:inherit;font-size:12px;font-weight:600;color:var(--rk-n-500,#7a7266);
|
|
318
|
+
background:transparent;border:0;border-radius:var(--rk-r-full);padding:4px 14px;cursor:pointer;
|
|
319
|
+
transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
320
|
+
.rk-dir-space-btn.is-on{background:var(--rk-surface,#fff);color:var(--rk-ink);box-shadow:var(--rk-shadow-sm,0 1px 2px rgba(0,0,0,.06))}
|
|
321
|
+
.rk-dir-search{flex:none;padding:0 12px 8px}
|
|
322
|
+
.rk-dir-search-input{width:100%;font-family:inherit;font-size:12.5px;color:var(--rk-ink);
|
|
323
|
+
background:var(--rk-surface,#fff);border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:7px 12px;
|
|
324
|
+
transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
|
|
325
|
+
.rk-dir-search-input:focus{outline:none;border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
|
|
326
|
+
.rk-dir-search-input::placeholder{color:var(--rk-n-400)}
|
|
327
|
+
.rk-dir-body{flex:1 1 auto;min-height:0}
|
|
328
|
+
.rk-dir-crumbs{align-items:center}
|
|
329
|
+
.rk-dir-newfolder{margin-left:auto;flex:none;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
|
|
330
|
+
color:var(--rk-gold-700);background:transparent;border:1px solid transparent;border-radius:var(--rk-r-full);padding:3px 10px;
|
|
331
|
+
transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
332
|
+
.rk-dir-newfolder:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
|
|
333
|
+
.rk-dir-uploadbtn{flex:none;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
|
|
334
|
+
color:var(--rk-gold-700);background:transparent;border:1px solid transparent;border-radius:var(--rk-r-full);padding:3px 10px;
|
|
335
|
+
transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
336
|
+
.rk-dir-uploadbtn:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
|
|
337
|
+
.rk-dir-uploadbtn:disabled{opacity:.6;cursor:default}
|
|
338
|
+
.rk-dir-uploadbtn.is-drag{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
|
|
339
|
+
/* selection toolbar (shown when 1+ rows are selected) */
|
|
340
|
+
.rk-dir-selbar{flex:none;display:flex;align-items:center;gap:8px;margin:0 10px 8px;padding:7px 10px;
|
|
341
|
+
background:var(--rk-gold-tint);border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-xl)}
|
|
342
|
+
.rk-dir-selbar[hidden]{display:none}
|
|
343
|
+
.rk-dir-selcount{flex:1;font-size:12px;font-weight:700;color:var(--rk-gold-700)}
|
|
344
|
+
.rk-dir-selbtn{flex:none;font-family:inherit;font-size:12px;font-weight:800;color:var(--rk-ink);cursor:pointer;
|
|
345
|
+
background:transparent;border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-full);padding:5px 14px;
|
|
346
|
+
transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
347
|
+
.rk-dir-selbtn.is-primary{background:var(--rk-gold-500);border-color:var(--rk-gold-600);color:var(--rk-ink)}
|
|
348
|
+
.rk-dir-selbtn.is-primary:hover{background:var(--rk-gold-600)}
|
|
349
|
+
.rk-dir-selbtn.is-ghost{border-color:var(--rk-border);color:var(--rk-text-muted);background:transparent}
|
|
350
|
+
.rk-dir-selbtn.is-ghost:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600);color:var(--rk-ink)}
|
|
351
|
+
.rk-dir-selmore{padding:5px 10px;font-size:15px;line-height:1;font-weight:700}
|
|
352
|
+
/* per-row select checkbox — discoverable on hover, sticky when selected */
|
|
353
|
+
.rk-dir-check{flex:none;width:15px;height:15px;margin:0;accent-color:var(--rk-gold-600);cursor:pointer;opacity:0;
|
|
354
|
+
transition:opacity var(--rk-dur) var(--rk-ease)}
|
|
355
|
+
.rk-aichat-frow:hover .rk-dir-check,.rk-dir-row.is-selected .rk-dir-check,.rk-dir-check:focus-visible{opacity:1}
|
|
356
|
+
.rk-dir-row.is-selected{background:var(--rk-gold-tint);outline:1.5px solid var(--rk-gold-600);outline-offset:-1.5px}
|
|
357
|
+
/* folder Open button — always visible (it's the navigation affordance) */
|
|
358
|
+
.rk-dir-open{opacity:1;color:var(--rk-text-muted)}
|
|
359
|
+
.rk-aichat-frow:hover .rk-dir-open{color:var(--rk-gold-700)}
|
|
360
|
+
/* per-row "…" kebab */
|
|
361
|
+
.rk-dir-kebab{flex:none;width:26px;height:26px;border-radius:var(--rk-r-md);border:1px solid transparent;background:transparent;
|
|
362
|
+
cursor:pointer;color:var(--rk-n-500);font-size:16px;line-height:1;display:grid;place-items:center;opacity:0;
|
|
363
|
+
transition:opacity var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
364
|
+
.rk-aichat-frow:hover .rk-dir-kebab,.rk-dir-kebab:focus-visible{opacity:1}
|
|
365
|
+
.rk-dir-kebab:hover{background:var(--rk-n-100);color:var(--rk-ink);border-color:var(--rk-border)}
|
|
366
|
+
/* kebab popup + copy toast (appended to <body>, so plain colors not tokens for
|
|
367
|
+
portability onto any host page) */
|
|
368
|
+
.rk-dir-menu{position:fixed;z-index:2147483000;min-width:150px;background:#fff;border:1px solid var(--rk-border,#e6e1d8);
|
|
369
|
+
border-radius:var(--rk-r-lg,12px);box-shadow:var(--rk-shadow-md,0 10px 30px rgba(40,30,10,.16));padding:5px;display:grid;gap:1px}
|
|
370
|
+
.rk-dir-menuitem{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--rk-ink,#2b2620);cursor:pointer;
|
|
371
|
+
text-align:left;background:transparent;border:0;border-radius:var(--rk-r-md,8px);padding:7px 10px}
|
|
372
|
+
.rk-dir-menuitem:hover{background:var(--rk-n-100,#f2efe9)}
|
|
373
|
+
.rk-dir-menuitem.is-danger{color:#b4341f}
|
|
374
|
+
.rk-dir-menuitem.is-danger:hover{background:#fbeae6}
|
|
375
|
+
.rk-dir-toast{position:fixed;z-index:2147483001;left:50%;bottom:26px;transform:translate(-50%,12px);
|
|
376
|
+
background:#2b2620;color:#fff;font-family:var(--rk-font-body,inherit);font-size:12.5px;font-weight:600;
|
|
377
|
+
padding:9px 15px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:80vw;overflow:hidden;
|
|
378
|
+
text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none;
|
|
379
|
+
transition:opacity .18s ease,transform .18s ease}
|
|
380
|
+
.rk-dir-toast.is-on{opacity:1;transform:translate(-50%,0)}
|
|
381
|
+
|
|
382
|
+
/* chat column */
|
|
383
|
+
.rk-aichat-main{flex:1;min-width:0;display:flex;flex-direction:column}
|
|
384
|
+
.rk-aichat-head{display:flex;align-items:center;gap:8px;padding:14px 14px;border-bottom:1px solid var(--rk-border);flex:none}
|
|
385
|
+
.rk-aichat-head-main{flex:1;min-width:0;display:grid;gap:1px}
|
|
386
|
+
.rk-aichat-title{font-family:var(--rk-font-display);font-weight:800;font-size:15px;color:var(--rk-ink);letter-spacing:-.01em}
|
|
387
|
+
.rk-aichat-sub{font-size:11.5px;color:var(--rk-text-muted)}
|
|
388
|
+
.rk-aichat-back{flex:1;min-width:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;
|
|
389
|
+
border-radius:999px;border:1px solid var(--rk-border);background:#fff;cursor:pointer;text-decoration:none;
|
|
390
|
+
font-family:var(--rk-font-display);font-weight:700;font-size:13.5px;color:var(--rk-ink);letter-spacing:-.01em;
|
|
391
|
+
transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
392
|
+
.rk-aichat-back:hover{background:var(--rk-n-100);border-color:var(--rk-n-300)}
|
|
393
|
+
.rk-aichat-back svg{width:17px;height:17px;flex:none;color:var(--rk-n-600)}
|
|
394
|
+
.rk-aichat-back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
395
|
+
/* SKILL.md pill riding to the right of "Back to Library" in the editor dock head */
|
|
396
|
+
.rk-aichat-head:has(.rk-aichat-skill) .rk-aichat-back{flex:0 1 auto}
|
|
397
|
+
.rk-aichat-skill{flex:1;min-width:0;display:flex}
|
|
398
|
+
.rk-aichat-skill .vf-skill-install{width:100%;background:transparent;box-shadow:none;border-color:var(--rk-border);backdrop-filter:none;-webkit-backdrop-filter:none}
|
|
399
|
+
.rk-aichat-skill .vf-skill-install-main{flex:1;justify-content:flex-start}
|
|
400
|
+
.rk-aichat-skill .vf-skill-install-menu{border-left-color:var(--rk-border)}
|
|
401
|
+
.rk-aichat-skill .vf-skill-install-popover{right:0;left:auto}
|
|
402
|
+
.rk-aichat-tool{width:30px;height:30px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:#fff;
|
|
403
|
+
cursor:pointer;color:var(--rk-n-600);display:grid;place-items:center;font-size:13px;flex:none;
|
|
404
|
+
transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
405
|
+
.rk-aichat-tool:hover{background:var(--rk-n-100);color:var(--rk-ink)}
|
|
406
|
+
.rk-aichat-tool svg{width:15px;height:15px}
|
|
407
|
+
.rk-aichat-tool.is-on{background:var(--rk-gold-tint);border-color:var(--rk-gold-600);color:var(--rk-ink)}
|
|
408
|
+
/* overflow-x:hidden + a capped single column (minmax(0,1fr), NOT the default
|
|
409
|
+
auto track which grows to content) keep the log scrolling ONLY vertically —
|
|
410
|
+
a wide child (long tool note / URL / file path) can no longer widen the grid
|
|
411
|
+
and force a horizontal scrollbar in the narrow dock column. */
|
|
412
|
+
.rk-aichat-log{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;background:var(--rk-n-50)}
|
|
413
|
+
.rk-aichat-msg{max-width:85%;min-width:0;padding:10px 14px;border-radius:var(--rk-r-2xl);font-size:13.5px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}
|
|
414
|
+
.rk-aichat-msg.is-ai{background:#fff;border:1px solid var(--rk-border);color:var(--rk-text);justify-self:start;
|
|
415
|
+
border-bottom-left-radius:var(--rk-r-sm);box-shadow:var(--rk-shadow-xs)}
|
|
416
|
+
.rk-aichat-msg.is-user{background:var(--rk-gold-tint2);color:var(--rk-ink);justify-self:end;border-bottom-right-radius:var(--rk-r-sm)}
|
|
417
|
+
/* rendered markdown inside assistant replies (bold / italic / links) */
|
|
418
|
+
.rk-aichat-msg.is-ai a,.rk-aichat-stream a{color:var(--rk-gold-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
|
|
419
|
+
.rk-aichat-msg.is-ai strong,.rk-aichat-stream strong{color:var(--rk-ink);font-weight:700}
|
|
420
|
+
.rk-aichat-msg.is-ai em,.rk-aichat-stream em{font-style:italic}
|
|
421
|
+
.rk-aichat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0;flex:none}
|
|
422
|
+
.rk-aichat-chips:empty{display:none}
|
|
423
|
+
.rk-aichat-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;border-radius:var(--rk-r-full);
|
|
424
|
+
background:var(--rk-gold-tint2);color:var(--rk-gold-700);font-size:11.5px;font-weight:600;max-width:190px}
|
|
425
|
+
.rk-aichat-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
426
|
+
.rk-aichat-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
|
|
427
|
+
.rk-aichat-chip-label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:inherit;
|
|
428
|
+
font-size:11.5px;font-weight:600;text-align:left;text-decoration:underline;text-underline-offset:2px;text-decoration-color:transparent}
|
|
429
|
+
.rk-aichat-chip-label:hover{text-decoration-color:currentColor}
|
|
430
|
+
.rk-aichat-chip.is-pending{opacity:.75}
|
|
431
|
+
.rk-aichat-chip.is-pending .rk-aichat-chip-label{text-decoration:none;cursor:default}
|
|
432
|
+
.rk-aichat-chip-spin{width:11px;height:11px;flex:none;border-radius:50%;border:2px solid currentColor;
|
|
433
|
+
border-top-color:transparent;animation:rk-aichat-chip-spin .7s linear infinite}
|
|
434
|
+
@keyframes rk-aichat-chip-spin{to{transform:rotate(360deg)}}
|
|
435
|
+
/* composer = one bordered "text area" box: the textarea fills the top and the
|
|
436
|
+
attach + send controls sit inside it along the bottom row. */
|
|
437
|
+
.rk-aichat-composer{display:flex;flex-direction:column;gap:8px;margin:12px;padding:10px 10px 9px;flex:none;background:#fff;
|
|
438
|
+
border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-xs);
|
|
439
|
+
transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
|
|
440
|
+
.rk-aichat-composer:focus-within{border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
|
|
441
|
+
.rk-aichat-field{width:100%;min-height:70px;max-height:210px;resize:none;border:0;background:transparent;
|
|
442
|
+
color:var(--rk-ink);font-family:var(--rk-font-body);font-size:14px;line-height:1.5;padding:4px 4px 0}
|
|
443
|
+
.rk-aichat-field:focus{outline:none;box-shadow:none}
|
|
444
|
+
.rk-aichat-field::placeholder{color:var(--rk-n-400)}
|
|
445
|
+
.rk-aichat-composer-actions{display:flex;align-items:center;gap:8px}
|
|
446
|
+
.rk-aichat-composer-actions .rk-btn{margin-left:auto}
|
|
447
|
+
/* composer paperclip — opens the folder directory nav to browse + attach files
|
|
448
|
+
(tokens so it re-themes on the dark editor dock automatically) */
|
|
449
|
+
.rk-aichat-attach{flex:none;width:38px;height:38px;border-radius:var(--rk-r-full);border:1px solid var(--rk-border);
|
|
450
|
+
background:var(--rk-surface);color:var(--rk-n-500);cursor:pointer;display:grid;place-items:center;
|
|
451
|
+
transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
452
|
+
.rk-aichat-attach:hover,.rk-aichat-attach.is-on{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);color:var(--rk-ink)}
|
|
453
|
+
.rk-aichat-attach svg{width:18px;height:18px}
|
|
454
|
+
|
|
455
|
+
/* ── live agentic turn: status → actions (tool notes + HTTP cards) → text ── */
|
|
456
|
+
.rk-aichat-turn{display:grid;gap:8px;justify-items:start;width:100%;min-width:0}
|
|
457
|
+
.rk-aichat-stream{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
|
|
458
|
+
.rk-aichat-stream[hidden]{display:none}
|
|
459
|
+
.rk-aichat-actions{display:grid;gap:6px;width:100%}
|
|
460
|
+
.rk-aichat-actions:empty{display:none}
|
|
461
|
+
.rk-aichat-status{display:flex;align-items:center;padding:2px 2px}
|
|
462
|
+
.rk-aichat-status[hidden]{display:none}
|
|
463
|
+
.rk-aichat-typing{display:inline-flex;gap:4px;align-items:center}
|
|
464
|
+
.rk-aichat-typing span{width:6px;height:6px;border-radius:50%;background:var(--rk-n-400);
|
|
465
|
+
animation:rk-aichat-blink 1.2s var(--rk-ease) infinite}
|
|
466
|
+
.rk-aichat-typing span:nth-child(2){animation-delay:.18s}
|
|
467
|
+
.rk-aichat-typing span:nth-child(3){animation-delay:.36s}
|
|
468
|
+
@keyframes rk-aichat-blink{0%,80%,100%{opacity:.28;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
|
|
469
|
+
.rk-aichat-toolnote{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--rk-text-muted);
|
|
470
|
+
font-family:var(--rk-font-mono);background:#fff;border:1px solid var(--rk-border);
|
|
471
|
+
border-radius:var(--rk-r-lg);padding:5px 10px;width:fit-content;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
|
|
472
|
+
.rk-aichat-toolnote::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rk-gold-500);flex:none}
|
|
473
|
+
.rk-aichat-loadmore{width:100%;margin-top:6px;padding:9px 12px;font-size:12.5px;font-weight:600;
|
|
474
|
+
color:var(--rk-text);background:var(--rk-white);border:1px solid var(--rk-border);
|
|
475
|
+
border-radius:var(--rk-r-lg);cursor:pointer;font-family:var(--rk-font-mono)}
|
|
476
|
+
.rk-aichat-loadmore:hover{background:var(--rk-n-50);border-color:var(--rk-border-strong)}
|
|
477
|
+
.rk-aichat-loadmore:disabled{opacity:.6;cursor:default}
|
|
478
|
+
.rk-aichat-toolnote.is-ok{color:#0a7c3f}
|
|
479
|
+
.rk-aichat-toolnote.is-ok::before{background:#12a150}
|
|
480
|
+
.rk-aichat-toolnote.is-err{color:#b42318}
|
|
481
|
+
.rk-aichat-toolnote.is-err::before{background:#d92d20}
|
|
482
|
+
.rk-aichat-err{font-size:12.5px;color:#b42318;background:#fff;border:1px solid var(--rk-border);
|
|
483
|
+
border-radius:var(--rk-r-lg);padding:9px 11px;white-space:pre-wrap;width:100%}
|
|
484
|
+
|
|
485
|
+
/* first-class HTTP action card (chip → modal) */
|
|
486
|
+
.rk-aichat-http{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;cursor:pointer;text-align:left;
|
|
487
|
+
background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);box-shadow:var(--rk-shadow-xs);
|
|
488
|
+
transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
|
|
489
|
+
.rk-aichat-http:hover{border-color:var(--rk-gold-600);box-shadow:var(--rk-shadow-sm)}
|
|
490
|
+
.rk-aichat-http-method{flex:none;font-family:var(--rk-font-mono);font-size:10.5px;font-weight:700;letter-spacing:.03em;
|
|
491
|
+
color:var(--rk-gold-700);background:var(--rk-gold-tint);border-radius:var(--rk-r-sm);padding:2px 7px}
|
|
492
|
+
.rk-aichat-http-url{flex:1;min-width:0;font-family:var(--rk-font-mono);font-size:11.5px;color:var(--rk-n-700);
|
|
493
|
+
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
494
|
+
.rk-aichat-http-status{flex:none;font-family:var(--rk-font-mono);font-size:11px;font-weight:700;color:var(--rk-green);
|
|
495
|
+
background:var(--rk-green-tint);border-radius:var(--rk-r-sm);padding:2px 7px}
|
|
496
|
+
.rk-aichat-http-status[data-error="true"]{color:var(--rk-red);background:var(--rk-red-tint)}
|
|
497
|
+
|
|
498
|
+
/* HTTP request/response modal (portalled to body, above the fixed panel) */
|
|
499
|
+
.rk-aichat-modal-back{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
|
|
500
|
+
background:rgba(23,23,23,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
|
|
501
|
+
animation:rk-aichat-in .16s var(--rk-ease)}
|
|
502
|
+
.rk-aichat-modal{width:min(720px,100%);max-height:min(82vh,calc(100vh - 24px));display:flex;flex-direction:column;background:var(--rk-surface);
|
|
503
|
+
border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-xl);overflow:hidden}
|
|
504
|
+
.rk-aichat-modal-head{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--rk-border);flex:none}
|
|
505
|
+
.rk-aichat-modal-head .rk-aichat-http-url{font-size:12.5px}
|
|
506
|
+
.rk-aichat-modal-x{flex:none;margin-left:2px;width:28px;height:28px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);
|
|
507
|
+
background:#fff;color:var(--rk-n-500);cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center}
|
|
508
|
+
.rk-aichat-modal-x:hover{background:var(--rk-n-100);color:var(--rk-ink)}
|
|
509
|
+
.rk-aichat-modal-body{padding:14px 16px;overflow-y:auto;display:grid;gap:14px}
|
|
510
|
+
.rk-aichat-http-note{font-size:12.5px;color:var(--rk-text-muted);line-height:1.5}
|
|
511
|
+
.rk-aichat-http-block{display:grid;gap:5px}
|
|
512
|
+
.rk-aichat-http-blabel{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rk-text-faint)}
|
|
513
|
+
.rk-aichat-http-pre{margin:0;font-family:var(--rk-font-mono);font-size:11.5px;line-height:1.55;color:var(--rk-n-700);
|
|
514
|
+
background:var(--rk-n-50);border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);padding:10px 12px;
|
|
515
|
+
max-height:220px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
|
|
516
|
+
|
|
517
|
+
/* collapsible JSON tree (request/response/headers inspection in the modal) */
|
|
518
|
+
.rk-aichat-json{border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:#fff;overflow:hidden}
|
|
519
|
+
.rk-aichat-json-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--rk-border);
|
|
520
|
+
background:var(--rk-n-50)}
|
|
521
|
+
.rk-aichat-json-all{font-family:var(--rk-font-body);font-size:11px;font-weight:700;color:var(--rk-n-600);cursor:pointer;
|
|
522
|
+
background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:3px 10px}
|
|
523
|
+
.rk-aichat-json-all:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600);color:var(--rk-ink)}
|
|
524
|
+
.rk-aichat-json-scroll{max-height:300px;overflow:auto;padding:8px 0}
|
|
525
|
+
.rk-aichat-json-line{position:relative;display:flex;align-items:flex-start;width:100%;min-height:22px;padding-right:34px}
|
|
526
|
+
.rk-aichat-json-line:hover{background:var(--rk-gold-tint)}
|
|
527
|
+
.rk-aichat-json-line.is-toggle{padding-left:0}
|
|
528
|
+
.rk-aichat-json-caret{flex:none;width:20px;height:20px;margin-top:1px;display:grid;place-items:center;border:0;
|
|
529
|
+
background:transparent;color:var(--rk-n-500);cursor:pointer}
|
|
530
|
+
.rk-aichat-json-caret svg{transition:transform var(--rk-dur) var(--rk-ease)}
|
|
531
|
+
.rk-aichat-json-caret[data-open="true"] svg{transform:rotate(90deg)}
|
|
532
|
+
.rk-aichat-json-text{display:block;width:100%;font-family:var(--rk-font-mono);font-size:11.5px;line-height:1.5;
|
|
533
|
+
color:var(--rk-n-700);white-space:pre-wrap;word-break:break-word}
|
|
534
|
+
.rk-aichat-json-copy{position:absolute;right:8px;top:2px;width:20px;height:20px;border-radius:var(--rk-r-sm);
|
|
535
|
+
display:grid;place-items:center;border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-500);cursor:pointer;
|
|
536
|
+
opacity:0;box-shadow:var(--rk-shadow-xs);transition:opacity var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
537
|
+
.rk-aichat-json-line:hover .rk-aichat-json-copy,.rk-aichat-json-copy:focus-visible{opacity:1}
|
|
538
|
+
.rk-aichat-json-copy:hover{color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
|
|
539
|
+
|
|
540
|
+
/* ── file preview modal (images carousel, video, audio, pdf, md/txt/json) ── */
|
|
541
|
+
.rk-aichat-preview{width:min(880px,100%);max-height:min(88vh,calc(100vh - 24px))}
|
|
542
|
+
.rk-aichat-preview-name{flex:1;min-width:0;font-family:var(--rk-font-body);font-weight:700;font-size:13px;color:var(--rk-ink);
|
|
543
|
+
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
544
|
+
.rk-aichat-preview-open{flex:none;font-size:11.5px;font-weight:700;color:var(--rk-gold-700);text-decoration:none;
|
|
545
|
+
border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:4px 11px}
|
|
546
|
+
.rk-aichat-preview-open:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
|
|
547
|
+
.rk-aichat-preview-body{padding:0;display:block;min-height:120px;background:var(--rk-n-50)}
|
|
548
|
+
.rk-aichat-preview-img{display:block;max-width:100%;max-height:70vh;margin:0 auto;object-fit:contain;background:var(--rk-n-100)}
|
|
549
|
+
.rk-aichat-preview-media{display:block;width:100%;max-height:70vh;background:#000}
|
|
550
|
+
.rk-aichat-preview-audiowrap{padding:34px 20px;display:grid;place-items:center}
|
|
551
|
+
.rk-aichat-preview-audio{width:100%;max-width:460px}
|
|
552
|
+
.rk-aichat-preview-frame{display:block;width:100%;height:70vh;border:0;background:#fff}
|
|
553
|
+
.rk-aichat-preview-loading{padding:34px 16px;text-align:center;font-size:12.5px;color:var(--rk-text-muted)}
|
|
554
|
+
.rk-aichat-preview-text{margin:0;border:0;border-radius:0;max-height:70vh;background:#fff}
|
|
555
|
+
.rk-aichat-preview .rk-aichat-json{border:0;border-radius:0}
|
|
556
|
+
.rk-aichat-preview .rk-aichat-json-scroll{max-height:70vh}
|
|
557
|
+
.rk-aichat-preview-md{padding:18px 22px;max-height:70vh;overflow:auto;background:#fff;font-size:13.5px;line-height:1.6;color:var(--rk-n-700)}
|
|
558
|
+
.rk-aichat-preview-md h1,.rk-aichat-preview-md h2,.rk-aichat-preview-md h3,.rk-aichat-preview-md h4,.rk-aichat-preview-md h5,.rk-aichat-preview-md h6{
|
|
559
|
+
font-family:var(--rk-font-display);color:var(--rk-ink);font-weight:800;line-height:1.25;margin:16px 0 8px}
|
|
560
|
+
.rk-aichat-preview-md h1{font-size:20px}.rk-aichat-preview-md h2{font-size:17px}.rk-aichat-preview-md h3{font-size:15px}
|
|
561
|
+
.rk-aichat-preview-md h4,.rk-aichat-preview-md h5,.rk-aichat-preview-md h6{font-size:13.5px}
|
|
562
|
+
.rk-aichat-preview-md p{margin:0 0 10px}
|
|
563
|
+
.rk-aichat-preview-md ul,.rk-aichat-preview-md ol{margin:0 0 10px;padding-left:22px}
|
|
564
|
+
.rk-aichat-preview-md li{margin:3px 0}
|
|
565
|
+
.rk-aichat-preview-md a{color:var(--rk-gold-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
|
|
566
|
+
.rk-aichat-preview-md strong{color:var(--rk-ink);font-weight:700}.rk-aichat-preview-md em{font-style:italic}
|
|
567
|
+
.rk-aichat-preview-md code{font-family:var(--rk-font-mono);font-size:12px;background:var(--rk-n-100);border-radius:5px;padding:1px 5px;color:var(--rk-n-700)}
|
|
568
|
+
.rk-aichat-preview-md blockquote{margin:0 0 10px;padding:2px 0 2px 12px;border-left:3px solid var(--rk-border-strong);color:var(--rk-text-muted)}
|
|
569
|
+
.rk-aichat-preview-md hr{border:0;border-top:1px solid var(--rk-border);margin:14px 0}
|
|
570
|
+
.rk-aichat-preview-code{margin:0 0 10px;font-family:var(--rk-font-mono);font-size:11.5px;line-height:1.5;color:var(--rk-n-700);
|
|
571
|
+
background:var(--rk-n-50);border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);padding:10px 12px;overflow:auto;white-space:pre}
|
|
572
|
+
.rk-aichat-preview-code code{background:transparent;padding:0}
|
|
573
|
+
.rk-aichat-preview-empty{padding:40px 16px;display:grid;gap:12px;justify-items:center;text-align:center;font-size:12.5px;color:var(--rk-text-muted)}
|
|
574
|
+
.rk-aichat-preview-dl{font-size:12.5px;font-weight:700;color:var(--rk-ink);cursor:pointer;background:var(--rk-gold-tint);
|
|
575
|
+
border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-full);padding:7px 15px;text-decoration:none}
|
|
576
|
+
.rk-aichat-preview-dl:hover{background:var(--rk-gold-tint2)}
|
|
577
|
+
.rk-aichat-preview-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:11px 16px;
|
|
578
|
+
border-top:1px solid var(--rk-border);flex:none;background:var(--rk-surface)}
|
|
579
|
+
.rk-aichat-preview-nav[hidden]{display:none}
|
|
580
|
+
.rk-aichat-preview-btn{font-family:inherit;font-size:12px;font-weight:700;color:var(--rk-ink);cursor:pointer;
|
|
581
|
+
background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:6px 14px;
|
|
582
|
+
transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
583
|
+
.rk-aichat-preview-btn:hover:not(:disabled){background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
|
|
584
|
+
.rk-aichat-preview-btn:disabled{opacity:.4;cursor:default}
|
|
585
|
+
.rk-aichat-preview-count{font-size:11.5px;font-weight:600;color:var(--rk-text-muted);font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
|
|
586
|
+
/* modal header action buttons (copy / download / copy link) */
|
|
587
|
+
.rk-aichat-preview-act{flex:none;font-family:var(--rk-font-body);font-size:11.5px;font-weight:700;color:var(--rk-ink);cursor:pointer;
|
|
588
|
+
background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:4px 11px;text-decoration:none;line-height:1.4;
|
|
589
|
+
transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
590
|
+
.rk-aichat-preview-act:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
|
|
591
|
+
|
|
592
|
+
/* ── markdown pipe tables (assistant messages + .md previews) ── */
|
|
593
|
+
.rk-md-tablewrap{max-width:100%;overflow-x:auto;margin:8px 0;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg)}
|
|
594
|
+
.rk-md-table{border-collapse:collapse;width:100%;font-size:12.5px;line-height:1.45;background:#fff}
|
|
595
|
+
.rk-md-table th,.rk-md-table td{padding:7px 11px;text-align:left;border-bottom:1px solid var(--rk-border);border-right:1px solid var(--rk-border);vertical-align:top;white-space:normal;overflow-wrap:anywhere}
|
|
596
|
+
.rk-md-table th:last-child,.rk-md-table td:last-child{border-right:0}
|
|
597
|
+
.rk-md-table tr:last-child td{border-bottom:0}
|
|
598
|
+
.rk-md-table thead th{background:var(--rk-n-50);font-weight:700;color:var(--rk-ink);white-space:nowrap}
|
|
599
|
+
.rk-md-table tbody tr:nth-child(even){background:var(--rk-n-50)}
|
|
600
|
+
.rk-md-table code{font-family:var(--rk-font-mono);font-size:11px;background:var(--rk-n-100);border-radius:4px;padding:1px 4px;color:var(--rk-n-700)}
|
|
601
|
+
/* inline code inside dock assistant messages */
|
|
602
|
+
.rk-aichat-msg.is-ai code,.rk-aichat-stream code{font-family:var(--rk-font-mono);font-size:12px;background:var(--rk-n-100);border-radius:5px;padding:1px 5px;color:var(--rk-n-700)}
|
|
603
|
+
|
|
604
|
+
/* ── finished job / tool output as file-preview thumbnails (in-transcript) ──
|
|
605
|
+
NOTE: distinct class from the LEFT files drawer (.rk-aichat-files). They used
|
|
606
|
+
to share the name, and this rule's display:grid clobbered the drawer's
|
|
607
|
+
display:none base — so the drawer could never be minimized (permanently open,
|
|
608
|
+
crushing the chat column). Keep these namespaced apart. */
|
|
609
|
+
.rk-aichat-filepreview{margin-top:10px;display:grid;gap:7px}
|
|
610
|
+
.rk-aichat-files-label{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rk-text-faint)}
|
|
611
|
+
.rk-aichat-files-grid{display:flex;flex-wrap:wrap;gap:9px}
|
|
612
|
+
.rk-aichat-file{display:flex;flex-direction:column;gap:6px;width:112px;padding:0;cursor:pointer;background:transparent;border:0;text-align:left;font-family:inherit}
|
|
613
|
+
.rk-aichat-file-thumb{position:relative;width:112px;height:84px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:var(--rk-n-100);
|
|
614
|
+
overflow:hidden;display:grid;place-items:center;transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
|
|
615
|
+
.rk-aichat-file:hover .rk-aichat-file-thumb{border-color:var(--rk-gold-600);box-shadow:var(--rk-shadow-sm)}
|
|
616
|
+
.rk-aichat-file-thumb img,.rk-aichat-file-thumb video{width:100%;height:100%;object-fit:cover;display:block}
|
|
617
|
+
.rk-aichat-file-ic{font-family:var(--rk-font-mono);font-size:20px;font-weight:700;color:var(--rk-n-500)}
|
|
618
|
+
.rk-aichat-file-thumb--pdf{background:var(--rk-red-tint)}.rk-aichat-file-thumb--json{background:var(--rk-gold-tint)}
|
|
619
|
+
.rk-aichat-file-thumb--markdown,.rk-aichat-file-thumb--text{background:var(--rk-n-50)}.rk-aichat-file-thumb--audio{background:var(--rk-gold-tint2)}
|
|
620
|
+
.rk-aichat-file-play{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);pointer-events:none}
|
|
621
|
+
.rk-aichat-file-name{font-size:11px;font-weight:600;color:var(--rk-n-600);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:112px}
|
|
622
|
+
|
|
623
|
+
/* create_video pipeline: live status row + clickable result links */
|
|
624
|
+
.rk-aichat-flow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--rk-text-muted);padding:2px 2px}
|
|
625
|
+
.rk-aichat-flow[hidden]{display:none}
|
|
626
|
+
.rk-aichat-flow-label{line-height:1.4}
|
|
627
|
+
.rk-aichat-msg a,.rk-aichat-stream a{color:var(--rk-gold-700);font-weight:700;text-decoration:underline;
|
|
628
|
+
text-underline-offset:2px;overflow-wrap:anywhere}
|
|
629
|
+
.rk-aichat-msg a:hover,.rk-aichat-stream a:hover{color:var(--rk-ink)}
|
|
630
|
+
|
|
631
|
+
/* narrow: stack the left drawer above the chat so neither pane is cut off.
|
|
632
|
+
Cap the drawer to a fraction of the *viewport* (not 44% of the panel) and
|
|
633
|
+
floor the chat log so the composer is never crushed on short/landscape phones. */
|
|
634
|
+
@media(max-width:700px){
|
|
635
|
+
.rk-aichat.has-files,.rk-aichat.has-history,.rk-aichat.has-cloud{flex-direction:column}
|
|
636
|
+
.rk-aichat.has-files .rk-aichat-files,
|
|
637
|
+
.rk-aichat.has-history .rk-aichat-history,
|
|
638
|
+
.rk-aichat.has-cloud .rk-aichat-cloud{width:auto;max-height:min(44%,34vh);border-right:0;border-bottom:1px solid var(--rk-border)}
|
|
639
|
+
.rk-aichat-log{min-height:60px}
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
/* touch devices have no hover, so controls that reveal on :hover would stay
|
|
643
|
+
invisible. Un-hide them on coarse pointers: the row kebab "…" (Copy path /
|
|
644
|
+
Delete), the multi-select checkbox, the folder Open chevron, the chat +Attach
|
|
645
|
+
button, and the JSON copy button. (Hover-only decorative states stay as-is.) */
|
|
646
|
+
@media(hover:none){
|
|
647
|
+
.rk-dir-kebab,.rk-dir-check,.rk-dir-open,.rk-aichat-fadd,.rk-aichat-json-copy{opacity:1}
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
/* brand + glass helpers (kept — reused by the sidebar brand + the login page) */
|
|
651
|
+
.rk-glass{background:rgba(255,255,255,.72);backdrop-filter:blur(var(--rk-glass-blur));
|
|
652
|
+
-webkit-backdrop-filter:blur(var(--rk-glass-blur));border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-nav)}
|
|
653
|
+
.rk-brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--rk-font-display);
|
|
654
|
+
font-weight:800;font-size:20px;color:var(--rk-ink);letter-spacing:-.02em;flex:none}
|
|
655
|
+
.rk-brand-mark{display:inline-block;vertical-align:middle;width:26px;height:26px;border-radius:8px;
|
|
656
|
+
background:center/contain no-repeat url("/assets/logo-vidfarm.png");
|
|
657
|
+
font-size:0;color:transparent;flex:none;text-indent:-9999px;overflow:hidden}
|
|
658
|
+
.rk-brand-tag{font-family:var(--rk-font-body);font-size:11px;font-weight:600;color:var(--rk-gold-700);
|
|
659
|
+
background:var(--rk-gold-tint2);padding:2px 8px;border-radius:var(--rk-r-full);letter-spacing:.02em}
|
|
660
|
+
|
|
661
|
+
/* narrow: sidebar collapses to a horizontal top strip */
|
|
662
|
+
@media(max-width:900px){
|
|
663
|
+
.rk-sidebar{position:static;width:auto;flex-direction:row;align-items:center;gap:6px;
|
|
664
|
+
padding:10px 14px;border-right:0;border-bottom:1px solid var(--rk-border);overflow-x:auto}
|
|
665
|
+
.rk-sidebar-brand{padding:6px 8px;flex:none}
|
|
666
|
+
.rk-sidebar-nav{flex-direction:row;gap:4px;flex:1}
|
|
667
|
+
.rk-sidebar-sep{display:none}
|
|
668
|
+
.rk-sidebar-item{padding:8px 12px}
|
|
669
|
+
/* horizontal strip: FAB no longer collides with the foot, drop the reserve */
|
|
670
|
+
/* horizontal strip: kill the foot border + top offset so the account block
|
|
671
|
+
sits centered in the row instead of showing a stray hairline above it */
|
|
672
|
+
.rk-sidebar-account{padding:8px 13px 2px;border-top:0;margin-top:0}
|
|
673
|
+
/* strip/burger layout: the account block is no longer at the sidebar foot,
|
|
674
|
+
so drop the FAB back to its normal bottom-left resting spot */
|
|
675
|
+
.rk-signed-in .rk-fab{bottom:calc(16px + env(safe-area-inset-bottom))}
|
|
676
|
+
.rk-content{margin-left:0}
|
|
677
|
+
.rk-chat-left .rk-sidebar{visibility:visible}
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
/* hamburger button — hidden except on phones (see ≤640 block below) */
|
|
681
|
+
.rk-nav-burger{display:none;margin-left:auto;flex:none;width:40px;height:40px;border-radius:var(--rk-r-lg);
|
|
682
|
+
border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-700);cursor:pointer;place-items:center;
|
|
683
|
+
transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
684
|
+
.rk-nav-burger:hover{background:var(--rk-n-100);border-color:var(--rk-border-strong)}
|
|
685
|
+
|
|
686
|
+
/* phones: swap the horizontal-scroll strip for a real hamburger dropdown so all
|
|
687
|
+
nav items + the account block are reachable (the strip pushes them off-screen). */
|
|
688
|
+
@media(max-width:640px){
|
|
689
|
+
.rk-sidebar{flex-wrap:wrap;overflow:visible;position:sticky;top:0;z-index:60;gap:8px;
|
|
690
|
+
background:#fff;border-bottom:1px solid var(--rk-border)}
|
|
691
|
+
.rk-nav-burger{display:grid}
|
|
692
|
+
.rk-sidebar-nav{order:3;flex-basis:100%;flex-direction:column;gap:3px;display:none;padding-bottom:4px}
|
|
693
|
+
.rk-nav-toggle-cb:checked~.rk-sidebar-nav{display:flex}
|
|
694
|
+
.rk-sidebar-item{width:100%;padding:11px 13px}
|
|
695
|
+
/* account block + cloud line only inside the open dropdown (just noise in the collapsed bar) */
|
|
696
|
+
.rk-sidebar-account{display:none;order:4;flex-basis:100%;border-top:1px solid var(--rk-border);
|
|
697
|
+
margin-top:2px;padding-top:8px}
|
|
698
|
+
.rk-nav-toggle-cb:checked~.rk-sidebar-account{display:block}
|
|
699
|
+
.rk-sidebar-cloud{display:none;order:4;flex-basis:100%;margin-left:8px;width:calc(100% - 16px)}
|
|
700
|
+
.rk-nav-toggle-cb:checked~.rk-sidebar-cloud{display:flex}
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
/* buttons */
|
|
704
|
+
.rk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;
|
|
705
|
+
border-radius:var(--rk-r-full);font-family:var(--rk-font-body);font-size:14px;font-weight:600;
|
|
706
|
+
border:1px solid transparent;cursor:pointer;white-space:nowrap;text-align:center;
|
|
707
|
+
transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
708
|
+
.rk-btn .rk-arrow{transition:transform var(--rk-dur) var(--rk-ease)}
|
|
709
|
+
.rk-btn:hover .rk-arrow{transform:translateX(3px)}
|
|
710
|
+
.rk-btn-ink{background:var(--rk-ink);color:#fff;box-shadow:var(--rk-shadow-sm)}
|
|
711
|
+
.rk-btn-ink:hover{background:#000;box-shadow:var(--rk-shadow-md);transform:translateY(-1px)}
|
|
712
|
+
.rk-btn-gold{background:var(--rk-gold-500);color:var(--rk-ink);font-weight:700;box-shadow:var(--rk-shadow-sm)}
|
|
713
|
+
.rk-btn-gold:hover{background:var(--rk-gold-700);box-shadow:0 6px 18px -6px rgba(252,185,0,.6);transform:translateY(-1px)}
|
|
714
|
+
/* interruptive Stop — the composer send button while a reply is streaming.
|
|
715
|
+
Fixed charcoal (not token-based) so it reads on both the light /chat page
|
|
716
|
+
and the dark editor dock. */
|
|
717
|
+
.rk-btn.is-stop{background:#2f2f2f;color:#fff;box-shadow:var(--rk-shadow-sm)}
|
|
718
|
+
.rk-btn.is-stop:hover{background:#1a1a1a;box-shadow:var(--rk-shadow-md);transform:none}
|
|
719
|
+
.rk-btn.is-stop svg{width:14px;height:14px}
|
|
720
|
+
.rk-btn-ghost{background:#fff;color:var(--rk-ink);border-color:var(--rk-border);box-shadow:var(--rk-shadow-xs)}
|
|
721
|
+
.rk-btn-ghost:hover{border-color:var(--rk-border-strong);box-shadow:var(--rk-shadow-sm)}
|
|
722
|
+
.rk-btn-danger{background:#fff;color:var(--rk-red);border-color:var(--rk-red-tint)}
|
|
723
|
+
.rk-btn-danger:hover{background:var(--rk-red-tint)}
|
|
724
|
+
.rk-btn-sm{padding:7px 13px;font-size:13px}
|
|
725
|
+
.rk-btn-lg{padding:14px 24px;font-size:15px}
|
|
726
|
+
.rk-btn-block{width:100%}
|
|
727
|
+
/* touch: guarantee a comfortable tap size on the small pill buttons */
|
|
728
|
+
@media(hover:none){.rk-btn-sm{min-height:40px}}
|
|
729
|
+
|
|
730
|
+
/* badges + pills */
|
|
731
|
+
.rk-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--rk-r-full);
|
|
732
|
+
background:#fff;border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xs);
|
|
733
|
+
font-size:13px;font-weight:500;color:var(--rk-n-700);justify-self:start;width:fit-content}
|
|
734
|
+
.rk-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--rk-r-full);
|
|
735
|
+
font-size:12px;font-weight:600;background:var(--rk-n-100);color:var(--rk-n-600)}
|
|
736
|
+
.rk-pill-gold{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
|
|
737
|
+
.rk-pill-green{background:var(--rk-green-tint);color:#15803d}
|
|
738
|
+
.rk-pill-sky{background:var(--rk-sky-tint);color:#1d6fb8}
|
|
739
|
+
.rk-pill-violet{background:var(--rk-violet-tint);color:#7c3aed}
|
|
740
|
+
.rk-pill-red{background:var(--rk-red-tint);color:#b91c1c}
|
|
741
|
+
|
|
742
|
+
/* cards */
|
|
743
|
+
.rk-card{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);
|
|
744
|
+
padding:28px;box-shadow:var(--rk-shadow-card)}
|
|
745
|
+
.rk-card-hover{transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
|
|
746
|
+
.rk-card-hover:hover{transform:translateY(-2px);box-shadow:var(--rk-shadow-lg)}
|
|
747
|
+
/* subtle loading spinner injected over any <video> that is still buffering (see document.ts) */
|
|
748
|
+
.rk-vspin{position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:2.5px solid rgba(255,255,255,.28);border-top-color:rgba(255,255,255,.92);box-shadow:0 1px 5px rgba(0,0,0,.28);animation:rk-vspin-rot .72s linear infinite;pointer-events:none;opacity:0;transition:opacity .2s var(--rk-ease);z-index:4}
|
|
749
|
+
.rk-vspin.is-on{opacity:1}
|
|
750
|
+
@keyframes rk-vspin-rot{to{transform:rotate(360deg)}}
|
|
751
|
+
@media(prefers-reduced-motion:reduce){.rk-vspin{animation-duration:1.5s}}
|
|
752
|
+
.rk-card-pad-sm{padding:20px}
|
|
753
|
+
.rk-card h2{font-size:var(--rk-text-2xl);letter-spacing:-.02em}
|
|
754
|
+
.rk-card h3{font-size:var(--rk-text-lg);font-weight:700;font-family:var(--rk-font-display)}
|
|
755
|
+
.rk-card-head{display:grid;gap:6px;margin-bottom:20px}
|
|
756
|
+
.rk-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
|
|
757
|
+
color:var(--rk-gold-700);text-transform:uppercase;letter-spacing:.04em;justify-self:start;width:fit-content}
|
|
758
|
+
|
|
759
|
+
/* icon tiles */
|
|
760
|
+
.rk-tile{width:40px;height:40px;border-radius:var(--rk-r-xl);display:grid;place-items:center;font-size:18px;flex:none}
|
|
761
|
+
.rk-tile-sm{width:32px;height:32px;font-size:15px;border-radius:var(--rk-r-lg)}
|
|
762
|
+
.rk-tile-lg{width:52px;height:52px;font-size:24px}
|
|
763
|
+
.rk-tile-gold{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
|
|
764
|
+
.rk-tile-sky{background:var(--rk-sky-tint);color:var(--rk-sky)}
|
|
765
|
+
.rk-tile-violet{background:var(--rk-violet-tint);color:var(--rk-violet)}
|
|
766
|
+
.rk-tile-green{background:var(--rk-green-tint);color:#16a34a}
|
|
767
|
+
.rk-tile-amber{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
|
|
768
|
+
.rk-tile-coral{background:var(--rk-coral-tint);color:var(--rk-coral)}
|
|
769
|
+
.rk-tile-ink{background:var(--rk-n-100);color:var(--rk-ink)}
|
|
770
|
+
|
|
771
|
+
/* forms */
|
|
772
|
+
.rk-field{display:grid;gap:7px}
|
|
773
|
+
.rk-label{font-size:13px;font-weight:600;color:var(--rk-n-700)}
|
|
774
|
+
.rk-hint{font-size:12px;color:var(--rk-text-muted)}
|
|
775
|
+
.rk-input,.rk-textarea,.rk-select{width:100%;font-family:var(--rk-font-body);font-size:14px;
|
|
776
|
+
color:var(--rk-ink);background:#fff;border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-xl);
|
|
777
|
+
padding:11px 14px;transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
|
|
778
|
+
.rk-input::placeholder,.rk-textarea::placeholder{color:var(--rk-n-400)}
|
|
779
|
+
.rk-textarea{min-height:110px;resize:vertical;line-height:1.5}
|
|
780
|
+
.rk-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23737373' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
|
|
781
|
+
.rk-input:focus,.rk-textarea:focus,.rk-select:focus{outline:none;border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
|
|
782
|
+
.rk-input-group{display:flex;align-items:stretch;gap:8px}
|
|
783
|
+
.rk-input-group .rk-input{flex:1}
|
|
784
|
+
|
|
785
|
+
/* notice / flash */
|
|
786
|
+
.rk-notice{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:var(--rk-r-2xl);
|
|
787
|
+
font-size:14px;font-weight:500;border:1px solid transparent}
|
|
788
|
+
.rk-notice-ok{background:var(--rk-green-tint);color:#15803d;border-color:#bbf7d0}
|
|
789
|
+
.rk-notice-err{background:var(--rk-red-tint);color:#b91c1c;border-color:#fecaca}
|
|
790
|
+
|
|
791
|
+
/* two-column shell with sticky side rail (settings, etc.) */
|
|
792
|
+
.rk-shell{display:grid;grid-template-columns:248px minmax(0,1fr);gap:32px;align-items:start}
|
|
793
|
+
@media(max-width:900px){.rk-shell{grid-template-columns:1fr}}
|
|
794
|
+
.rk-side{position:sticky;top:88px;display:grid;gap:4px;background:#fff;border:1px solid var(--rk-border);
|
|
795
|
+
border-radius:var(--rk-r-2xl);padding:12px;box-shadow:var(--rk-shadow-card)}
|
|
796
|
+
@media(max-width:900px){.rk-side{position:static;grid-auto-flow:column;overflow:auto}}
|
|
797
|
+
.rk-side-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--rk-r-xl);
|
|
798
|
+
font-size:14px;font-weight:600;color:var(--rk-n-600);cursor:pointer;border:0;background:transparent;
|
|
799
|
+
box-sizing:border-box;text-decoration:none;
|
|
800
|
+
width:100%;text-align:left;white-space:nowrap;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
801
|
+
.rk-side-item:hover{background:var(--rk-n-100);color:var(--rk-ink)}
|
|
802
|
+
.rk-side-item.is-active{background:var(--rk-gold-tint);color:var(--rk-ink)}
|
|
803
|
+
.rk-side-item.is-active .rk-side-ic{background:var(--rk-gold-500)}
|
|
804
|
+
.rk-side-ic{width:26px;height:26px;border-radius:8px;background:var(--rk-n-100);display:grid;place-items:center;font-size:14px;flex:none}
|
|
805
|
+
|
|
806
|
+
/* simple list rows */
|
|
807
|
+
.rk-list{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
|
|
808
|
+
.rk-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;min-width:0;
|
|
809
|
+
border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-xs)}
|
|
810
|
+
.rk-item-main{flex:1;min-width:0}
|
|
811
|
+
.rk-item-title{font-weight:600;color:var(--rk-ink);font-size:14px}
|
|
812
|
+
.rk-item-sub{font-size:13px;color:var(--rk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
813
|
+
|
|
814
|
+
/* stat tiles */
|
|
815
|
+
.rk-stat{display:grid;gap:6px}
|
|
816
|
+
.rk-stat-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--rk-text-muted)}
|
|
817
|
+
.rk-stat-num{font-family:var(--rk-font-display);font-size:var(--rk-text-4xl);font-weight:800;letter-spacing:-.02em;color:var(--rk-ink)}
|
|
818
|
+
|
|
819
|
+
/* footer — warm-dark charcoal */
|
|
820
|
+
.rk-footer{background:var(--rk-ink);color:var(--rk-n-400);padding:56px var(--rk-gutter) 40px;margin-top:64px}
|
|
821
|
+
.rk-footer-inner{width:min(var(--rk-container),100%);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
|
|
822
|
+
.rk-footer-brand{font-family:var(--rk-font-display);font-weight:800;font-size:22px;color:var(--rk-gold-500);display:inline-flex;align-items:center;gap:8px}
|
|
823
|
+
.rk-footer a{color:var(--rk-n-300)}.rk-footer a:hover{color:#fff}
|
|
824
|
+
.rk-footer-links{display:flex;gap:8px;flex-wrap:wrap}
|
|
825
|
+
.rk-trust-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--rk-r-full);background:#ffffff0d;color:var(--rk-n-400);font-size:13px}
|
|
826
|
+
|
|
827
|
+
/* hero band (sunny sky) — sits flush at the top of the content column */
|
|
828
|
+
.rk-hero-band{position:relative;overflow:hidden;margin-top:0}
|
|
829
|
+
.rk-hero-art{position:absolute;inset:0;z-index:0;background:
|
|
830
|
+
radial-gradient(58% 46% at 78% 20%,rgba(255,241,204,.9),transparent 60%),
|
|
831
|
+
linear-gradient(180deg,#3f9fe0 0%,#6cc0f5 55%,#a9dbfb 100%)}
|
|
832
|
+
.rk-hero{position:relative;z-index:1;text-align:center;padding:clamp(56px,12vh,119px) var(--rk-gutter) clamp(44px,8vh,72px)}
|
|
833
|
+
|
|
834
|
+
:where(.rk-root a,.rk-root button,.rk-root input,.rk-root textarea,.rk-root select):focus-visible{outline:none;box-shadow:var(--rk-ring-gold)}
|
|
835
|
+
.rk-reveal[hidden]{display:none}
|
|
836
|
+
|
|
837
|
+
/* ── Desktop-agents nudge banner ─────────────────────────────────────────────
|
|
838
|
+
* A full-width alert pinned to the very top of the /editor and /chat surfaces,
|
|
839
|
+
* pointing to the "Desktop AI Agents" setup guide. Injected by the shared chrome
|
|
840
|
+
* script (RESKIN_CHROME_SCRIPT) only on those two paths; body.vf-has-topbanner
|
|
841
|
+
* offsets each surface's content so the bar never covers the app controls. */
|
|
842
|
+
.vf-topbanner{position:fixed;top:0;left:0;right:0;z-index:2147483000;height:var(--vf-topbanner-h,44px);
|
|
843
|
+
display:flex;align-items:center;justify-content:center;gap:12px;padding:0 44px 0 16px;box-sizing:border-box;
|
|
844
|
+
background:linear-gradient(90deg,#1b1305 0%,#3a2708 48%,#1b1305 100%);color:#fdf3d8;
|
|
845
|
+
font-family:var(--rk-font-body,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
|
|
846
|
+
font-size:13.5px;line-height:1.35;border-bottom:1px solid rgba(240,193,90,.32);
|
|
847
|
+
box-shadow:0 2px 14px rgba(0,0,0,.28);text-align:center}
|
|
848
|
+
.vf-topbanner-ico{flex:none;font-size:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
|
|
849
|
+
.vf-topbanner-msg{max-width:900px}
|
|
850
|
+
.vf-topbanner-msg strong{color:#ffd977;font-weight:800}
|
|
851
|
+
.vf-topbanner-cta{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
|
|
852
|
+
background:linear-gradient(180deg,#ffcf5f,#f0b429);color:#221602;font-weight:800;font-size:12.5px;line-height:1;
|
|
853
|
+
text-decoration:none;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 8px rgba(240,180,41,.35);
|
|
854
|
+
transition:transform .16s ease,box-shadow .16s ease}
|
|
855
|
+
.vf-topbanner-cta:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 4px 12px rgba(240,180,41,.5)}
|
|
856
|
+
.vf-topbanner-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;
|
|
857
|
+
display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;cursor:pointer;
|
|
858
|
+
background:transparent;color:#e7cf9a;font-size:17px;line-height:1;transition:background .16s ease,color .16s ease}
|
|
859
|
+
.vf-topbanner-close:hover{background:rgba(255,255,255,.1);color:#fff}
|
|
860
|
+
@media(max-width:720px){
|
|
861
|
+
.vf-topbanner{--vf-topbanner-h:auto;min-height:56px;flex-wrap:wrap;gap:6px 12px;padding:8px 40px;font-size:12.5px}
|
|
862
|
+
.vf-topbanner-msg{flex:1 1 100%;order:1}
|
|
863
|
+
.vf-topbanner-ico{order:0}
|
|
864
|
+
.vf-topbanner-cta{order:2}
|
|
865
|
+
}
|
|
866
|
+
/* Per-surface content offset so nothing hides beneath the fixed bar. */
|
|
867
|
+
body.vf-has-topbanner[data-rk-editor-dock] #root{margin-top:var(--vf-topbanner-h,44px);height:calc(100dvh - var(--vf-topbanner-h,44px))}
|
|
868
|
+
body.vf-has-topbanner.rk-has-sidebar .rk-sidebar{top:var(--vf-topbanner-h,44px)}
|
|
869
|
+
body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-h,44px)}
|
|
870
|
+
|
|
871
|
+
.vf-skill-install{
|
|
872
|
+
--vf-skill-surface:var(--rk-surface,var(--surface,#fff));
|
|
873
|
+
--vf-skill-surface-strong:var(--rk-n-50,var(--n-50,#fbfbfb));
|
|
874
|
+
--vf-skill-border:var(--rk-border,var(--border,#ededed));
|
|
875
|
+
--vf-skill-border-strong:var(--rk-border-strong,var(--border-strong,#d4d4d4));
|
|
876
|
+
--vf-skill-text:var(--rk-ink,var(--ink,#171717));
|
|
877
|
+
--vf-skill-muted:var(--rk-text-muted,var(--text-muted,#737373));
|
|
878
|
+
--vf-skill-accent:var(--rk-gold-500,var(--gold-500,#ffc738));
|
|
879
|
+
--vf-skill-accent-deep:var(--rk-gold-700,var(--gold-700,#fcb900));
|
|
880
|
+
--vf-skill-shadow:var(--rk-shadow-nav,var(--shadow-nav,0 4px 24px -8px #00000026,0 1px 2px #0000000d));
|
|
881
|
+
position:relative;
|
|
882
|
+
display:inline-flex;
|
|
883
|
+
align-items:center;
|
|
884
|
+
border:1px solid var(--vf-skill-border);
|
|
885
|
+
border-radius:999px;
|
|
886
|
+
background:rgba(255,255,255,.86);
|
|
887
|
+
backdrop-filter:blur(16px);
|
|
888
|
+
-webkit-backdrop-filter:blur(16px);
|
|
889
|
+
box-shadow:0 4px 14px -10px rgba(15,23,42,.35);
|
|
890
|
+
color:var(--vf-skill-text);
|
|
891
|
+
}
|
|
892
|
+
.vf-skill-install-main,
|
|
893
|
+
.vf-skill-install-menu,
|
|
894
|
+
.vf-skill-install-copy{
|
|
895
|
+
border:0;
|
|
896
|
+
background:transparent;
|
|
897
|
+
color:inherit;
|
|
898
|
+
cursor:pointer;
|
|
899
|
+
}
|
|
900
|
+
.vf-skill-install-main{
|
|
901
|
+
display:inline-flex;
|
|
902
|
+
align-items:center;
|
|
903
|
+
gap:6px;
|
|
904
|
+
min-height:32px;
|
|
905
|
+
padding:0 9px 0 11px;
|
|
906
|
+
border-radius:999px 0 0 999px;
|
|
907
|
+
font:600 13px/1 var(--rk-font-body,var(--font-body,ui-sans-serif,system-ui,sans-serif));
|
|
908
|
+
letter-spacing:-.01em;
|
|
909
|
+
transition:background 180ms ease,color 180ms ease;
|
|
910
|
+
}
|
|
911
|
+
.vf-skill-install-main:hover,
|
|
912
|
+
.vf-skill-install-main:focus-visible{
|
|
913
|
+
background:#0000000a;
|
|
914
|
+
outline:none;
|
|
915
|
+
}
|
|
916
|
+
.vf-skill-install-main-icon,
|
|
917
|
+
.vf-skill-install-copy,
|
|
918
|
+
.vf-skill-install-link-icon{
|
|
919
|
+
display:inline-flex;
|
|
920
|
+
align-items:center;
|
|
921
|
+
justify-content:center;
|
|
922
|
+
}
|
|
923
|
+
.vf-skill-install-main-icon{
|
|
924
|
+
width:15px;
|
|
925
|
+
height:15px;
|
|
926
|
+
}
|
|
927
|
+
.vf-skill-install-main-icon svg,
|
|
928
|
+
.vf-skill-install-copy svg,
|
|
929
|
+
.vf-skill-install-link-icon svg,
|
|
930
|
+
.vf-skill-install-menu svg{
|
|
931
|
+
width:15px;
|
|
932
|
+
height:15px;
|
|
933
|
+
}
|
|
934
|
+
.vf-skill-install-main-label{
|
|
935
|
+
white-space:nowrap;
|
|
936
|
+
}
|
|
937
|
+
.vf-skill-install-menu{
|
|
938
|
+
display:inline-flex;
|
|
939
|
+
align-items:center;
|
|
940
|
+
justify-content:center;
|
|
941
|
+
width:32px;
|
|
942
|
+
min-height:32px;
|
|
943
|
+
border-left:1px solid var(--vf-skill-border);
|
|
944
|
+
border-radius:0 999px 999px 0;
|
|
945
|
+
transition:background 180ms ease,color 180ms ease;
|
|
946
|
+
}
|
|
947
|
+
.vf-skill-install-menu:hover,
|
|
948
|
+
.vf-skill-install-menu:focus-visible{
|
|
949
|
+
background:#0000000a;
|
|
950
|
+
outline:none;
|
|
951
|
+
}
|
|
952
|
+
.vf-skill-install-popover{
|
|
953
|
+
position:absolute;
|
|
954
|
+
right:0;
|
|
955
|
+
top:calc(100% + 10px);
|
|
956
|
+
z-index:40;
|
|
957
|
+
width:min(320px,calc(100vw - 28px));
|
|
958
|
+
display:grid;
|
|
959
|
+
gap:10px;
|
|
960
|
+
padding:14px;
|
|
961
|
+
border:1px solid var(--vf-skill-border);
|
|
962
|
+
border-radius:var(--rk-r-2xl,var(--r-2xl,16px));
|
|
963
|
+
background:var(--vf-skill-surface);
|
|
964
|
+
box-shadow:var(--vf-skill-shadow);
|
|
965
|
+
}
|
|
966
|
+
.vf-skill-install-popover[hidden]{
|
|
967
|
+
display:none;
|
|
968
|
+
}
|
|
969
|
+
.vf-skill-install-popover-kicker{
|
|
970
|
+
font:600 12px/1.2 var(--rk-font-body,var(--font-body,ui-sans-serif,system-ui,sans-serif));
|
|
971
|
+
color:var(--vf-skill-muted);
|
|
972
|
+
letter-spacing:.02em;
|
|
973
|
+
text-transform:uppercase;
|
|
974
|
+
}
|
|
975
|
+
.vf-skill-install-command{
|
|
976
|
+
display:grid;
|
|
977
|
+
grid-template-columns:minmax(0,1fr) 44px;
|
|
978
|
+
gap:8px;
|
|
979
|
+
align-items:stretch;
|
|
980
|
+
}
|
|
981
|
+
.vf-skill-install-input{
|
|
982
|
+
width:100%;
|
|
983
|
+
min-width:0;
|
|
984
|
+
height:36px;
|
|
985
|
+
padding:0 12px;
|
|
986
|
+
border:1px solid var(--vf-skill-border);
|
|
987
|
+
border-radius:var(--rk-r-xl,var(--r-xl,12px));
|
|
988
|
+
background:var(--vf-skill-surface-strong);
|
|
989
|
+
color:var(--vf-skill-text);
|
|
990
|
+
font:500 13px/1.2 var(--rk-font-mono,var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace));
|
|
991
|
+
letter-spacing:-.02em;
|
|
992
|
+
}
|
|
993
|
+
.vf-skill-install-copy{
|
|
994
|
+
height:36px;
|
|
995
|
+
border:1px solid color-mix(in srgb,var(--vf-skill-accent) 55%, white);
|
|
996
|
+
border-radius:var(--rk-r-xl,var(--r-xl,12px));
|
|
997
|
+
background:var(--rk-gold-tint,var(--gold-tint,#fff5e4));
|
|
998
|
+
color:var(--vf-skill-accent-deep);
|
|
999
|
+
transition:transform 180ms ease,background 180ms ease,border-color 180ms ease,color 180ms ease;
|
|
1000
|
+
}
|
|
1001
|
+
.vf-skill-install-copy:hover,
|
|
1002
|
+
.vf-skill-install-copy:focus-visible{
|
|
1003
|
+
background:var(--vf-skill-accent);
|
|
1004
|
+
border-color:var(--vf-skill-accent);
|
|
1005
|
+
color:var(--vf-skill-text);
|
|
1006
|
+
outline:none;
|
|
1007
|
+
transform:translateY(-1px);
|
|
1008
|
+
}
|
|
1009
|
+
.vf-skill-install-copy[data-copied="true"]{
|
|
1010
|
+
background:color-mix(in srgb,#22c55e 14%, white);
|
|
1011
|
+
border-color:color-mix(in srgb,#22c55e 36%, white);
|
|
1012
|
+
color:#15803d;
|
|
1013
|
+
}
|
|
1014
|
+
.vf-skill-install-link{
|
|
1015
|
+
display:inline-flex;
|
|
1016
|
+
align-items:center;
|
|
1017
|
+
gap:7px;
|
|
1018
|
+
width:max-content;
|
|
1019
|
+
color:var(--vf-skill-accent-deep);
|
|
1020
|
+
font:600 13px/1.2 var(--rk-font-body,var(--font-body,ui-sans-serif,system-ui,sans-serif));
|
|
1021
|
+
}
|
|
1022
|
+
.vf-skill-install-link-icon{
|
|
1023
|
+
width:14px;
|
|
1024
|
+
height:14px;
|
|
1025
|
+
}
|
|
1026
|
+
.vf-skill-install-link-icon svg{
|
|
1027
|
+
width:14px;
|
|
1028
|
+
height:14px;
|
|
1029
|
+
}
|
|
1030
|
+
.vf-skill-install-link:hover{
|
|
1031
|
+
text-decoration:underline;
|
|
1032
|
+
}
|
|
1033
|
+
.vf-skill-install-nav{
|
|
1034
|
+
flex:none;
|
|
1035
|
+
}
|
|
1036
|
+
.vf-skill-install-panel{
|
|
1037
|
+
align-self:flex-start;
|
|
1038
|
+
}
|
|
1039
|
+
.vf-skill-install-panel .vf-skill-install-main{
|
|
1040
|
+
min-height:32px;
|
|
1041
|
+
}
|
|
1042
|
+
@media(max-width:560px){
|
|
1043
|
+
.vf-skill-install-main-label{
|
|
1044
|
+
font-size:13px;
|
|
1045
|
+
}
|
|
1046
|
+
.vf-skill-install-popover{
|
|
1047
|
+
width:min(300px,calc(100vw - 18px));
|
|
1048
|
+
right:-4px;
|
|
1049
|
+
}
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
.rk-sidebar-skill{margin:4px 6px 10px;display:flex}
|
|
1053
|
+
.rk-sidebar-skill .vf-skill-install{width:100%;background:transparent;box-shadow:none;border-color:var(--rk-border);backdrop-filter:none;-webkit-backdrop-filter:none}
|
|
1054
|
+
.rk-sidebar-skill .vf-skill-install-main{flex:1;justify-content:flex-start}
|
|
1055
|
+
.rk-sidebar-skill .vf-skill-install-menu{border-left-color:var(--rk-border)}
|
|
1056
|
+
/* The sidebar rail is a fixed 248px column with overflow-y:auto (which forces
|
|
1057
|
+
overflow-x to clip too), so the default right-anchored 320px popover spills off
|
|
1058
|
+
the left edge and gets cut. Anchor it left and fit it to the rail width. */
|
|
1059
|
+
.rk-sidebar-skill .vf-skill-install-popover{left:0;right:auto;width:100%;min-width:0}
|
|
1060
|
+
|
|
1061
|
+
/* Marketplace — the sidebar's PRIMARY action, pinned directly under the brand and
|
|
1062
|
+
above the SKILL.md pill. Gold "joy" accent so it reads as the headline CTA of
|
|
1063
|
+
the whole rail; the little live dot hints at an active exchange. */
|
|
1064
|
+
.rk-sidebar-market{display:flex;align-items:center;gap:9px;margin:2px 6px 8px;padding:11px 12px;border-radius:12px;
|
|
1065
|
+
background:var(--rk-gold-500);color:var(--rk-ink);font-family:var(--rk-font-display);font-weight:800;
|
|
1066
|
+
font-size:.95rem;text-decoration:none;box-shadow:var(--rk-shadow-sm);transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
|
|
1067
|
+
.rk-sidebar-market[hidden]{display:none}
|
|
1068
|
+
.rk-sidebar-market:hover{transform:translateY(-1px);box-shadow:var(--rk-shadow-md)}
|
|
1069
|
+
.rk-sidebar-market.is-active{outline:2px solid var(--rk-gold-700);outline-offset:1px}
|
|
1070
|
+
.rk-sidebar-market svg{width:17px;height:17px;flex:none}
|
|
1071
|
+
.rk-sidebar-market-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--rk-green);
|
|
1072
|
+
box-shadow:0 0 0 3px #ffffff66;animation:rk-market-pulse 1.6s ease-in-out infinite;flex:none}
|
|
1073
|
+
@keyframes rk-market-pulse{0%,100%{opacity:1}50%{opacity:.45}}
|
|
1074
|
+
@media (prefers-reduced-motion:reduce){.rk-sidebar-market-dot{animation:none}}
|
|
1075
|
+
|
|
1076
|
+
/* page-scoped */
|
|
1077
|
+
|
|
1078
|
+
/* .rk-page zeroes horizontal padding; the wide container == viewport at 1280 so
|
|
1079
|
+
margin:auto adds no gutter. Restore side gutters (longhand beats the shorthand). */
|
|
1080
|
+
.rk-library-page{padding-left:var(--rk-gutter);padding-right:var(--rk-gutter)}
|
|
1081
|
+
.rk-library-free-notice{margin:0 0 18px}
|
|
1082
|
+
.rk-library-free-notice a{font-weight:700;text-decoration:underline}
|
|
1083
|
+
/* compact head: title + sub left, small New project pinned top-right on the same row */
|
|
1084
|
+
.rk-library-head{align-items:flex-start}
|
|
1085
|
+
.rk-library-head-copy{gap:4px;margin:0;flex:1 1 auto;min-width:0}
|
|
1086
|
+
.rk-library-new-btn{flex:none;margin-top:2px}
|
|
1087
|
+
|
|
1088
|
+
/* topbar row: primary tab toggle + the tab's quick search share one line */
|
|
1089
|
+
.rk-library-topbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px}
|
|
1090
|
+
/* "Logs" — pulled out of the tab toggle; floats to the far right of the row.
|
|
1091
|
+
When a search bar is present it already grabs margin-left:auto, so Logs just
|
|
1092
|
+
trails it; when there's no search (Files tab) Logs floats right on its own. */
|
|
1093
|
+
.rk-library-logs-btn{flex:none;margin-left:auto;gap:7px}
|
|
1094
|
+
.rk-library-qsearch ~ .rk-library-logs-btn,#rkClipsSearch ~ .rk-library-logs-btn{margin-left:0}
|
|
1095
|
+
.rk-library-logs-btn svg{color:var(--rk-n-500)}
|
|
1096
|
+
@media(max-width:720px){.rk-library-logs-btn{margin-left:auto}}
|
|
1097
|
+
|
|
1098
|
+
/* primary tab toggle (Approved | Clips) */
|
|
1099
|
+
.rk-library-tabs{display:inline-flex;flex:none;padding:5px;gap:3px;background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:var(--rk-r-full)}
|
|
1100
|
+
.rk-library-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:var(--rk-r-full);font-size:14px;font-weight:600;color:var(--rk-n-600);transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
1101
|
+
.rk-library-tab span{font-size:15px}
|
|
1102
|
+
.rk-library-tab:hover{color:var(--rk-ink)}
|
|
1103
|
+
.rk-library-tab.is-active{background:var(--rk-ink);color:#fff;box-shadow:var(--rk-shadow-sm)}
|
|
1104
|
+
|
|
1105
|
+
/* stats — sits right-aligned in the chips row */
|
|
1106
|
+
.rk-library-summary{font-size:13.5px;color:var(--rk-text-muted);font-weight:500;line-height:1.7}
|
|
1107
|
+
.rk-library-summary b{color:var(--rk-ink);font-weight:800;font-family:var(--rk-font-display);font-size:15px;letter-spacing:-.01em}
|
|
1108
|
+
.rk-library-toolbar .rk-library-summary{margin-left:auto}
|
|
1109
|
+
|
|
1110
|
+
/* toolbar (filter chips + count) */
|
|
1111
|
+
.rk-library-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px}
|
|
1112
|
+
.rk-library-chips{display:flex;flex-wrap:wrap;gap:4px}
|
|
1113
|
+
.rk-library-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--rk-r-full);border:1px solid transparent;background:transparent;color:var(--rk-text-muted);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
1114
|
+
.rk-library-chip:hover{background:var(--rk-n-100);color:var(--rk-ink)}
|
|
1115
|
+
.rk-library-chip.is-active{background:var(--rk-ink);color:#fff}
|
|
1116
|
+
/* approved quickfilter — same pill search as the Clips tab, right-aligned */
|
|
1117
|
+
.rk-library-qsearch{flex:1 1 220px;max-width:360px;margin-left:auto}
|
|
1118
|
+
.rk-library-qsearch .rk-clips-search-input:disabled{background:var(--rk-n-100);cursor:not-allowed}
|
|
1119
|
+
@media(max-width:720px){.rk-library-qsearch{max-width:none;margin-left:0;width:100%}}
|
|
1120
|
+
|
|
1121
|
+
/* grid + cards */
|
|
1122
|
+
.rk-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
|
|
1123
|
+
.rk-library-card{display:flex;flex-direction:column;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);overflow:hidden;box-shadow:var(--rk-shadow-card)}
|
|
1124
|
+
.rk-library-card[hidden]{display:none}
|
|
1125
|
+
.rk-library-poster{position:relative;display:block;width:100%;aspect-ratio:9/16;overflow:hidden;background:linear-gradient(158deg,#2c2c2c,#171717);border:0;padding:0;margin:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
|
|
1126
|
+
.rk-library-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(0,0,0,.22));pointer-events:none}
|
|
1127
|
+
.rk-library-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050505}
|
|
1128
|
+
.rk-library-noprev{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.72);font-size:12px;font-weight:600;letter-spacing:.01em}
|
|
1129
|
+
.rk-library-pstatus{position:absolute;top:12px;left:12px;z-index:2;box-shadow:var(--rk-shadow-sm)}
|
|
1130
|
+
.rk-library-dot{width:6px;height:6px;border-radius:var(--rk-r-full);background:currentColor;opacity:.9}
|
|
1131
|
+
.rk-library-dur{position:absolute;bottom:12px;right:12px;z-index:2;padding:4px 9px;border-radius:var(--rk-r-full);background:rgba(23,23,23,.72);color:#fff;font-size:11px;font-weight:600;letter-spacing:.01em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
|
|
1132
|
+
.rk-library-play{position:absolute;top:50%;left:50%;z-index:2;width:52px;height:52px;border-radius:var(--rk-r-full);background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--rk-ink);box-shadow:var(--rk-shadow-md);opacity:0;transform:translate(-50%,-50%) scale(.82);transition:opacity var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
|
|
1133
|
+
.rk-library-card:hover .rk-library-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
|
|
1134
|
+
@media(hover:none){.rk-library-play{opacity:1;transform:translate(-50%,-50%) scale(1)}}
|
|
1135
|
+
.rk-library-play svg{margin-left:2px}
|
|
1136
|
+
.rk-library-meta{display:grid;gap:9px;padding:14px 14px 15px}
|
|
1137
|
+
.rk-library-title{font-family:var(--rk-font-display);font-size:15px;font-weight:700;color:var(--rk-ink);line-height:1.24;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.48em}
|
|
1138
|
+
.rk-library-origin{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:500;color:var(--rk-text-muted)}
|
|
1139
|
+
.rk-library-origin-sep{color:var(--rk-text-faint);flex:none}
|
|
1140
|
+
.rk-library-origin-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
|
|
1141
|
+
.rk-library-time{font-size:12px;font-weight:600;color:var(--rk-text-faint);white-space:nowrap;flex:none}
|
|
1142
|
+
/* compact action row: labelled Schedule + icon-only Open/View/Download */
|
|
1143
|
+
.rk-library-actions{display:flex;align-items:center;gap:6px;margin-top:1px}
|
|
1144
|
+
.rk-library-splitact{display:flex;align-items:stretch;flex:none;min-width:0}
|
|
1145
|
+
.rk-library-act{flex:none;min-height:32px;padding:0 12px;font-size:12.5px;border-radius:var(--rk-r-full)}
|
|
1146
|
+
.rk-library-splitact>.rk-library-act{border-top-right-radius:0;border-bottom-right-radius:0}
|
|
1147
|
+
.rk-library-act-ic{width:32px;min-width:32px;padding:0;display:inline-flex;align-items:center;justify-content:center}
|
|
1148
|
+
.rk-library-act-ic svg{display:block}
|
|
1149
|
+
|
|
1150
|
+
/* right-floated "⋯" overflow menu (Copy ID / Delete-with-popconfirm) */
|
|
1151
|
+
.rk-library-menu{position:relative;flex:none}
|
|
1152
|
+
.rk-library-splitact>.rk-library-menu{margin-left:0}
|
|
1153
|
+
.rk-library-kebab{width:32px;height:100%;min-height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid rgba(92,60,0,.18);border-radius:0 var(--rk-r-full) var(--rk-r-full) 0;background:var(--rk-gold-500);color:#6f4b00;cursor:pointer;appearance:none;-webkit-appearance:none;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
1154
|
+
.rk-library-splitact .rk-library-kebab{width:32px;height:100%;min-height:32px}
|
|
1155
|
+
.rk-library-splitact .rk-library-kebab:hover{background:#f0c44a;color:#523600}
|
|
1156
|
+
.rk-library-splitact .rk-library-menu.is-open .rk-library-kebab{background:#f0c44a;color:#523600;border-left-color:rgba(92,60,0,.24)}
|
|
1157
|
+
.rk-library-kebab.is-ok{color:#1f7a44;border-left-color:#bfe6cd;background:#e8f7ee}
|
|
1158
|
+
button.rk-library-kebab,
|
|
1159
|
+
[data-rk-menu-btn].rk-library-kebab,
|
|
1160
|
+
[data-rk-raw-menu-btn].rk-library-kebab{
|
|
1161
|
+
background:var(--rk-gold-500)!important;
|
|
1162
|
+
color:#6f4b00!important;
|
|
1163
|
+
border-left:1px solid rgba(92,60,0,.18)!important;
|
|
1164
|
+
}
|
|
1165
|
+
button.rk-library-kebab:hover,
|
|
1166
|
+
button.rk-library-kebab[aria-expanded="true"],
|
|
1167
|
+
.rk-library-menu.is-open .rk-library-kebab{
|
|
1168
|
+
background:#f0c44a!important;
|
|
1169
|
+
color:#523600!important;
|
|
1170
|
+
}
|
|
1171
|
+
.rk-library-menu-pop{position:absolute;right:0;bottom:calc(100% + 8px);z-index:30;min-width:172px;padding:6px;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-xl))}
|
|
1172
|
+
.rk-library-menu-pop[hidden]{display:none}
|
|
1173
|
+
.rk-library-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:0;border-radius:var(--rk-r-lg,12px);background:none;color:var(--rk-ink);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
1174
|
+
.rk-library-menu-item svg{flex:none;color:var(--rk-n-500)}
|
|
1175
|
+
.rk-library-menu-item:hover{background:var(--rk-n-100)}
|
|
1176
|
+
.rk-library-menu-item.is-danger{color:var(--rk-red)}
|
|
1177
|
+
.rk-library-menu-item.is-danger svg{color:var(--rk-red)}
|
|
1178
|
+
.rk-library-menu-item.is-danger:hover{background:var(--rk-red-tint)}
|
|
1179
|
+
.rk-library-menu-confirm{padding:10px 11px 4px}
|
|
1180
|
+
.rk-library-menu-confirm[hidden]{display:none}
|
|
1181
|
+
.rk-library-menu-confirm-q{font-size:12.5px;font-weight:600;color:var(--rk-ink);margin:0 0 9px}
|
|
1182
|
+
.rk-library-menu-confirm-row{display:flex;justify-content:flex-end;gap:7px}
|
|
1183
|
+
.rk-library-menu-confirm-row .rk-btn{min-height:30px}
|
|
1184
|
+
.rk-clips-foot .rk-library-splitact .rk-clips-dl{border-top-right-radius:0;border-bottom-right-radius:0}
|
|
1185
|
+
@media(max-width:640px){.rk-library-actions{flex-wrap:wrap}.rk-library-splitact{flex:1 1 auto}}
|
|
1186
|
+
|
|
1187
|
+
/* new-project tile */
|
|
1188
|
+
.rk-library-new{display:grid;grid-auto-flow:row;place-content:center;justify-items:center;gap:14px;text-align:center;padding:28px 22px;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-3xl);background:var(--rk-n-50);color:var(--rk-text-muted);transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
|
|
1189
|
+
.rk-library-new:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);transform:translateY(-2px)}
|
|
1190
|
+
.rk-library-new-plus{font-family:var(--rk-font-display);font-weight:800}
|
|
1191
|
+
.rk-library-new-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-lg);color:var(--rk-ink);letter-spacing:-.01em}
|
|
1192
|
+
.rk-library-new-sub{font-size:12.5px;color:var(--rk-text-muted);margin-top:3px;max-width:15ch}
|
|
1193
|
+
.rk-library-new[hidden]{display:none}
|
|
1194
|
+
|
|
1195
|
+
/* empty state */
|
|
1196
|
+
.rk-library-empty{display:none;place-items:center;gap:12px;text-align:center;padding:64px 24px;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-3xl);background:var(--rk-n-50)}
|
|
1197
|
+
.rk-library-empty.is-visible{display:grid}
|
|
1198
|
+
.rk-library-empty h3{font-size:var(--rk-text-xl)}
|
|
1199
|
+
.rk-library-empty p{max-width:42ch}
|
|
1200
|
+
|
|
1201
|
+
@media(prefers-reduced-motion:reduce){.rk-library-video{}}
|
|
1202
|
+
|
|
1203
|
+
/* ── fullscreen TikTok-style viewer (click a card → vertical scroll deck) ── */
|
|
1204
|
+
html.rk-noscroll,html.rk-noscroll body{overflow:hidden}
|
|
1205
|
+
.rk-library-viewer{position:fixed;inset:0;z-index:120}
|
|
1206
|
+
.rk-library-viewer[hidden]{display:none}
|
|
1207
|
+
.rk-library-viewer-scrim{position:absolute;inset:0;background:rgba(15,12,5,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
|
|
1208
|
+
.rk-library-viewer-track{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
|
|
1209
|
+
.rk-library-viewer-track::-webkit-scrollbar{display:none}
|
|
1210
|
+
.rk-library-viewer-slide{height:100%;display:grid;place-items:center;scroll-snap-align:start;scroll-snap-stop:always;padding:20px 0}
|
|
1211
|
+
.rk-library-viewer-stage{position:relative;width:min(92vw,calc(93vh * 9 / 16));aspect-ratio:9/16;max-height:100%;margin:0;border-radius:var(--rk-r-3xl);overflow:hidden;background:#000;box-shadow:var(--rk-shadow-xl)}
|
|
1212
|
+
.rk-library-viewer-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
|
|
1213
|
+
video.rk-library-viewer-media{cursor:pointer}
|
|
1214
|
+
.rk-library-viewer-pause{position:absolute;inset:0;z-index:2;display:none;place-items:center;color:rgba(255,255,255,.92);pointer-events:none;filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
|
|
1215
|
+
.rk-library-viewer-pause svg{width:64px;height:64px}
|
|
1216
|
+
.rk-library-viewer-slide.is-paused .rk-library-viewer-pause{display:grid}
|
|
1217
|
+
.rk-library-viewer-shade{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.22) 62%,transparent 100%)}
|
|
1218
|
+
.rk-library-viewer-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px;display:grid;gap:8px;justify-items:start;pointer-events:none}
|
|
1219
|
+
.rk-library-viewer-title{font-family:var(--rk-font-display);font-weight:700;font-size:1.12rem;line-height:1.2;letter-spacing:-.01em;color:#fff}
|
|
1220
|
+
.rk-library-viewer-desc{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
|
1221
|
+
.rk-library-viewer-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;pointer-events:auto}
|
|
1222
|
+
.rk-library-viewer-cta{flex:none}
|
|
1223
|
+
.rk-library-viewer .rk-btn-ghost-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:none}
|
|
1224
|
+
.rk-library-viewer .rk-btn-ghost-light:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.4)}
|
|
1225
|
+
.rk-library-viewer-ui{position:absolute;top:max(16px,env(safe-area-inset-top,0px));right:16px;z-index:5;display:flex;gap:10px}
|
|
1226
|
+
.rk-library-viewer-btn{width:44px;height:44px;border-radius:var(--rk-r-full);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
|
|
1227
|
+
.rk-library-viewer-btn:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
|
|
1228
|
+
.rk-library-viewer-btn span{display:grid;place-items:center;line-height:0}
|
|
1229
|
+
.rk-library-viewer .rk-lvm-off{display:none}
|
|
1230
|
+
.rk-library-viewer.is-muted .rk-lvm-on{display:none}
|
|
1231
|
+
.rk-library-viewer.is-muted .rk-lvm-off{display:grid}
|
|
1232
|
+
.rk-library-viewer-nav{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:5;display:grid;gap:12px}
|
|
1233
|
+
@media(hover:none){.rk-library-viewer-nav{display:none}}
|
|
1234
|
+
@media(max-width:640px){
|
|
1235
|
+
.rk-library-viewer-nav{display:none}
|
|
1236
|
+
.rk-library-viewer-slide{padding:0}
|
|
1237
|
+
.rk-library-viewer-stage{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
|
|
1238
|
+
}
|
|
1239
|
+
|
|
1240
|
+
/* ── clips tab ── */
|
|
1241
|
+
.rk-clips-toolbar{display:grid;gap:16px;margin-bottom:24px}
|
|
1242
|
+
.rk-clips-search{position:relative;display:flex;align-items:center;gap:8px;flex:1 1 300px;min-width:240px;margin:0}
|
|
1243
|
+
.rk-clips-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--rk-n-400);pointer-events:none;display:flex}
|
|
1244
|
+
.rk-clips-search-input{flex:1;padding-left:40px;border-radius:var(--rk-r-full)}
|
|
1245
|
+
.rk-clips-search-btn{flex:none}
|
|
1246
|
+
.rk-clips-scan{flex:none}
|
|
1247
|
+
.rk-clips-status{font-size:13px;color:var(--rk-text-muted);font-weight:500}
|
|
1248
|
+
.rk-clips-status code{font-family:var(--rk-font-mono,monospace);font-size:12px;background:var(--rk-n-100);padding:1px 5px;border-radius:6px}
|
|
1249
|
+
|
|
1250
|
+
/* ── raws file-directory explorer ── */
|
|
1251
|
+
/* breadcrumb bar (replaces the old count/summary double-row) */
|
|
1252
|
+
.rk-raws-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:30px;margin-bottom:18px}
|
|
1253
|
+
.rk-raws-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
|
|
1254
|
+
.rk-raws-crumb{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--rk-text-muted);max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
1255
|
+
.rk-raws-crumb.is-current{color:var(--rk-ink);font-family:var(--rk-font-display);font-weight:800;letter-spacing:-.01em}
|
|
1256
|
+
.rk-raws-crumb-link{border:0;background:none;padding:4px 8px 4px 6px;margin-left:-6px;border-radius:var(--rk-r-full);cursor:pointer;font-family:inherit;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
1257
|
+
.rk-raws-crumb-link:hover{background:var(--rk-n-100);color:var(--rk-ink)}
|
|
1258
|
+
.rk-raws-crumb-link svg{flex:none}
|
|
1259
|
+
.rk-raws-crumb-sep{color:var(--rk-text-faint);font-weight:500}
|
|
1260
|
+
.rk-raws-crumb-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:19px;padding:0 6px;border-radius:var(--rk-r-full);background:var(--rk-n-100);color:var(--rk-text-muted);font-family:var(--rk-font-mono,monospace);font-size:11px;font-weight:700}
|
|
1261
|
+
.rk-raws-bar .rk-clips-status{margin-left:auto;text-align:right}
|
|
1262
|
+
|
|
1263
|
+
/* the explorer grid switches between clip cards (default) and folder tiles */
|
|
1264
|
+
.rk-raws-explorer{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
|
|
1265
|
+
.rk-raws-explorer.is-folders{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
|
|
1266
|
+
|
|
1267
|
+
/* folder tile — 2×2 thumbnail mosaic + name + count */
|
|
1268
|
+
.rk-raws-folder-wrap{position:relative;display:flex}
|
|
1269
|
+
.rk-raws-folder-wrap>.rk-raws-folder{flex:1;min-width:0}
|
|
1270
|
+
.rk-raws-folder-menu{position:absolute;top:10px;right:10px;z-index:4}
|
|
1271
|
+
.rk-raws-folder-kebab{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--rk-r-full);background:var(--rk-gold-500);color:#6f4b00;cursor:pointer;opacity:0;transform:scale(.85);box-shadow:var(--rk-shadow-sm);appearance:none;-webkit-appearance:none;transition:opacity var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
|
|
1272
|
+
.rk-raws-folder-wrap:hover .rk-raws-folder-kebab,.rk-raws-folder-menu [aria-expanded="true"]{opacity:1;transform:scale(1)}
|
|
1273
|
+
.rk-raws-folder-kebab:hover{background:#f0c44a;color:#523600}
|
|
1274
|
+
@media(hover:none){.rk-raws-folder-kebab{opacity:1;transform:scale(1)}}
|
|
1275
|
+
button.rk-raws-folder-kebab,
|
|
1276
|
+
[data-folder-kebab].rk-raws-folder-kebab,
|
|
1277
|
+
[data-approved-fkebab].rk-raws-folder-kebab{
|
|
1278
|
+
background:var(--rk-gold-500)!important;
|
|
1279
|
+
color:#6f4b00!important;
|
|
1280
|
+
}
|
|
1281
|
+
button.rk-raws-folder-kebab:hover,
|
|
1282
|
+
button.rk-raws-folder-kebab[aria-expanded="true"]{
|
|
1283
|
+
background:#f0c44a!important;
|
|
1284
|
+
color:#523600!important;
|
|
1285
|
+
}
|
|
1286
|
+
.rk-raws-folder-pop{position:absolute;top:36px;right:0;min-width:168px;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);box-shadow:var(--rk-shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px}
|
|
1287
|
+
.rk-raws-folder-pop[hidden]{display:none}
|
|
1288
|
+
.rk-raws-folder-pop button{appearance:none;border:0;background:none;font:inherit;text-align:left;padding:8px 10px;border-radius:var(--rk-r-md);color:var(--rk-ink);font-size:13px;font-weight:600;cursor:pointer}
|
|
1289
|
+
.rk-raws-folder-pop button:hover{background:var(--rk-n-100)}
|
|
1290
|
+
.rk-raws-folder{display:flex;flex-direction:column;overflow:hidden;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-card);cursor:pointer;text-align:left;font:inherit;color:inherit;padding:0;transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
|
|
1291
|
+
.rk-raws-folder:hover{transform:translateY(-3px);box-shadow:var(--rk-shadow-md);border-color:var(--rk-gold-600)}
|
|
1292
|
+
.rk-raws-folder-mosaic{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:2px;aspect-ratio:4/3;background:var(--rk-n-100);overflow:hidden}
|
|
1293
|
+
.rk-raws-folder-mosaic.is-single{grid-template-columns:1fr}
|
|
1294
|
+
.rk-raws-folder-mosaic.is-empty{display:grid;grid-template-columns:1fr;place-items:center;color:var(--rk-n-400);background:linear-gradient(150deg,var(--rk-n-100),var(--rk-n-50))}
|
|
1295
|
+
.rk-raws-folder-mosaic.is-empty svg{width:38px;height:38px}
|
|
1296
|
+
.rk-raws-folder-cell{display:block;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#171717}
|
|
1297
|
+
.rk-raws-folder-meta{display:flex;align-items:center;gap:10px;padding:13px 14px}
|
|
1298
|
+
.rk-raws-folder-ic{flex:none;color:var(--rk-gold-700);display:flex}
|
|
1299
|
+
.rk-raws-folder-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
|
|
1300
|
+
.rk-raws-folder-name{font-family:var(--rk-font-display);font-size:14px;font-weight:700;color:var(--rk-ink);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
1301
|
+
.rk-raws-folder-count{font-size:12px;font-weight:600;color:var(--rk-text-muted)}
|
|
1302
|
+
|
|
1303
|
+
|
|
1304
|
+
.rk-clips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
|
|
1305
|
+
.rk-clips-card{display:flex;flex-direction:column;overflow:hidden;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-card)}
|
|
1306
|
+
.rk-clips-thumb{position:relative;aspect-ratio:3/4;overflow:hidden;display:grid;place-items:center;background:linear-gradient(150deg,#2c2c2c,#171717)}
|
|
1307
|
+
.rk-clips-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
|
|
1308
|
+
.rk-clips-thumb-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:1}
|
|
1309
|
+
.rk-clips-thumb.is-playing .rk-clips-thumb-vid{display:block}
|
|
1310
|
+
.rk-clips-thumb.is-playing .rk-clips-play{opacity:0!important}
|
|
1311
|
+
.rk-clips-noimg{color:rgba(255,255,255,.68);font-size:12px;font-weight:600;letter-spacing:.01em}
|
|
1312
|
+
.rk-clips-dur{position:absolute;left:10px;bottom:10px;padding:3px 9px;border-radius:var(--rk-r-full);background:rgba(255,255,255,.92);color:var(--rk-ink);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:var(--rk-shadow-xs);z-index:2}
|
|
1313
|
+
.rk-clips-fullbadge{position:absolute;left:10px;top:10px;padding:3px 9px;border-radius:var(--rk-r-full);background:var(--rk-ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.01em;box-shadow:var(--rk-shadow-xs);z-index:3}
|
|
1314
|
+
.rk-clips-play{position:absolute;right:10px;top:10px;width:34px;height:34px;display:grid;place-items:center;padding:0 0 0 2px;border:0;border-radius:var(--rk-r-full);background:rgba(255,255,255,.92);color:var(--rk-ink);font-size:13px;cursor:pointer;opacity:0;transform:scale(.85);box-shadow:var(--rk-shadow-sm);z-index:2;transition:opacity var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
|
|
1315
|
+
.rk-clips-card:hover .rk-clips-play{opacity:1;transform:scale(1)}
|
|
1316
|
+
@media(hover:none){.rk-clips-play{opacity:1;transform:scale(1)}}
|
|
1317
|
+
.rk-clips-play:hover{background:var(--rk-gold-500)}
|
|
1318
|
+
.rk-clips-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:16px}
|
|
1319
|
+
.rk-clips-title{font-family:var(--rk-font-display);font-size:14px;font-weight:700;line-height:1.34;color:var(--rk-ink);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
|
1320
|
+
.rk-clips-pathchip{display:inline-flex;align-items:center;gap:5px;max-width:100%;align-self:flex-start;padding:3px 9px;border-radius:var(--rk-r-full);border:1px solid var(--rk-border);background:var(--rk-n-50,#f6f4ef);color:var(--rk-n-600);font-family:var(--rk-font-mono,ui-monospace,monospace);font-size:11px;font-weight:600;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease}
|
|
1321
|
+
.rk-clips-pathchip:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);color:var(--rk-n-800)}
|
|
1322
|
+
.rk-clips-pathchip.is-copied{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);color:var(--rk-gold-700)}
|
|
1323
|
+
.rk-clips-pathchip svg{flex:none}
|
|
1324
|
+
.rk-clips-pathchip-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
|
|
1325
|
+
.rk-clips-tags{display:flex;flex-wrap:wrap;gap:5px}
|
|
1326
|
+
.rk-clips-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--rk-r-full);background:var(--rk-gold-tint);color:var(--rk-n-700);font-size:11px;font-weight:600;white-space:nowrap}
|
|
1327
|
+
.rk-clips-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;border-top:1px solid var(--rk-border);padding-top:12px}
|
|
1328
|
+
.rk-clips-src{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--rk-text-muted);font-size:12px;font-weight:500}
|
|
1329
|
+
.rk-clips-dl{flex:none;color:var(--rk-gold-700);font-size:12px;font-weight:700;background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
|
|
1330
|
+
.rk-clips-dl:hover{color:var(--rk-gold-500)}
|
|
1331
|
+
/* source label as a muted eyebrow above the title (kept off the action row) */
|
|
1332
|
+
.rk-clips-eyebrow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--rk-text-faint);font-size:11px;font-weight:600;letter-spacing:.01em}
|
|
1333
|
+
/* "why this raw exists" — the AI clip prompt (or owner note) */
|
|
1334
|
+
.rk-clips-note{font-size:12px;line-height:1.42;color:var(--rk-n-700);background:var(--rk-gold-tint);border:1px solid var(--rk-border);border-radius:var(--rk-r-lg,12px);padding:8px 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
|
|
1335
|
+
.rk-clips-note-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rk-gold-700);margin-bottom:2px}
|
|
1336
|
+
/* Download is the primary action: a full-width gold pill fused with the ⋯ menu */
|
|
1337
|
+
.rk-clips-foot .rk-clips-splitact{width:100%;flex:1 1 auto}
|
|
1338
|
+
.rk-clips-foot .rk-clips-splitact .rk-clips-dlbtn{flex:1 1 auto;justify-content:center;min-height:34px}
|
|
1339
|
+
/* the whole thumb is a button that opens the scroll-snap viewer */
|
|
1340
|
+
button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer}
|
|
1341
|
+
/* optimistic "importing…" placeholder card */
|
|
1342
|
+
.rk-clips-importing .rk-clips-thumb{aspect-ratio:3/4}
|
|
1343
|
+
.rk-clips-importing-spin{width:36px;height:36px;border-radius:var(--rk-r-full);border:3px solid rgba(255,255,255,.26);border-top-color:#fff;animation:rk-clips-spin .8s linear infinite}
|
|
1344
|
+
@keyframes rk-clips-spin{to{transform:rotate(360deg)}}
|
|
1345
|
+
.rk-clips-importing.is-error .rk-clips-thumb{background:linear-gradient(150deg,#5b2b23,#3a1a15)}
|
|
1346
|
+
.rk-clips-importing-x{color:rgba(255,255,255,.9);display:grid;place-items:center}
|
|
1347
|
+
.rk-clips-importing.is-error .rk-clips-title{color:#8d3b2f}
|
|
1348
|
+
.rk-clips-importing-tag{color:var(--rk-text-faint)!important;cursor:default}
|
|
1349
|
+
/* submit spinner while the request is in flight, before the modal closes */
|
|
1350
|
+
.rk-clips-dialog .rk-btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
|
|
1351
|
+
.rk-clips-dialog .rk-btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:var(--rk-r-full);border:2px solid rgba(0,0,0,.32);border-top-color:var(--rk-ink);animation:rk-clips-spin .7s linear infinite}
|
|
1352
|
+
.rk-clips-empty{display:grid;place-items:center;gap:10px;text-align:center;padding:64px 20px;background:#fff;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-3xl)}
|
|
1353
|
+
.rk-clips-empty[hidden]{display:none}
|
|
1354
|
+
.rk-clips-empty h3{font-size:var(--rk-text-xl)}
|
|
1355
|
+
.rk-clips-dialog{width:min(34rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);padding:0;border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);background:var(--rk-surface);box-shadow:var(--rk-shadow-xl);overflow:hidden}
|
|
1356
|
+
.rk-clips-dialog::backdrop{background:rgba(23,23,23,.34);backdrop-filter:blur(6px)}
|
|
1357
|
+
/* scroll the form (not the page) so Cancel / Import stay reachable when the
|
|
1358
|
+
"Clip raws" advanced block expands on short / landscape-phone viewports */
|
|
1359
|
+
.rk-clips-dialog-form{display:grid;gap:16px;margin:0;padding:28px;max-height:calc(100dvh - 2rem);overflow-y:auto}
|
|
1360
|
+
.rk-clips-dialog-grid{gap:14px}
|
|
1361
|
+
.rk-clips-toggle{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.92rem;line-height:1.4;color:var(--rk-n-700);background:var(--rk-n-50);border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);padding:12px 14px}
|
|
1362
|
+
.rk-clips-toggle input{margin-top:2px;flex:0 0 auto;accent-color:var(--rk-gold-500);width:16px;height:16px;cursor:pointer}
|
|
1363
|
+
.rk-clips-toggle b{color:var(--rk-ink)}
|
|
1364
|
+
.rk-clips-advanced{display:grid;gap:16px}
|
|
1365
|
+
.rk-clips-advanced[hidden]{display:none}
|
|
1366
|
+
.rk-clips-dialog-note{background:var(--rk-gold-tint);border-radius:var(--rk-r-xl);padding:10px 13px;color:var(--rk-n-700)}
|
|
1367
|
+
.rk-clips-dialog-note[data-tone="error"]{background:#fdecea;color:#8d3b2f}
|
|
1368
|
+
.rk-clips-dialog-note[data-tone="success"]{background:#e8f7ee;color:#1f7a44}
|
|
1369
|
+
.rk-clips-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
|
|
1370
|
+
/* ── files tab: full-page mount of the shared directory-explorer component ──
|
|
1371
|
+
The component (.rk-dir + .rk-aichat-* rows) is tuned for the narrow chat
|
|
1372
|
+
drawer; on a full page we wrap it in a card and scale the search, crumbs and
|
|
1373
|
+
rows up so it reads as a first-class file explorer. Scoped to
|
|
1374
|
+
.rk-files-explorer so the drawer instance is untouched. */
|
|
1375
|
+
.rk-files-explorer{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card);overflow:hidden;min-height:60vh;display:flex;flex-direction:column}
|
|
1376
|
+
.rk-files-explorer .rk-dir{flex:1;min-height:60vh}
|
|
1377
|
+
.rk-files-explorer .rk-dir-search{padding:18px 20px 12px}
|
|
1378
|
+
.rk-files-explorer .rk-dir-search-input{font-size:15px;padding:12px 16px;border-radius:var(--rk-r-full)}
|
|
1379
|
+
.rk-files-explorer .rk-aichat-crumbs,.rk-files-explorer .rk-dir-crumbs{padding:4px 22px 12px;gap:2px;border-bottom:1px solid var(--rk-border)}
|
|
1380
|
+
.rk-files-explorer .rk-aichat-crumb{font-size:14px;padding:4px 9px}
|
|
1381
|
+
.rk-files-explorer .rk-aichat-crumb-sep{font-size:14px}
|
|
1382
|
+
.rk-files-explorer .rk-dir-newfolder,.rk-files-explorer .rk-dir-uploadbtn{font-size:12.5px;padding:5px 11px}
|
|
1383
|
+
.rk-files-explorer .rk-dir-selbar{margin:12px 18px 0;padding:9px 14px}
|
|
1384
|
+
.rk-files-explorer .rk-aichat-files-body,.rk-files-explorer .rk-dir-body{padding:12px 14px 20px;gap:3px}
|
|
1385
|
+
.rk-files-explorer .rk-aichat-frow{padding:11px 12px;border-radius:var(--rk-r-xl)}
|
|
1386
|
+
.rk-files-explorer .rk-aichat-fic{width:44px;height:44px;border-radius:var(--rk-r-lg)}
|
|
1387
|
+
.rk-files-explorer .rk-aichat-fname{font-size:14.5px}
|
|
1388
|
+
.rk-files-explorer .rk-aichat-fmeta{font-size:12.5px}
|
|
1389
|
+
.rk-files-explorer .rk-dir-open{font-size:12.5px}
|
|
1390
|
+
.rk-files-explorer .rk-dir-kebab{width:30px;height:30px}
|
|
1391
|
+
.rk-files-explorer .rk-aichat-fstate{padding:48px 24px;text-align:center}
|
|
1392
|
+
@media(max-width:620px){
|
|
1393
|
+
.rk-clips-search{flex:1 1 100%}
|
|
1394
|
+
.rk-clips-scan{flex:1 1 100%}
|
|
1395
|
+
.rk-clips-search-input{font-size:16px}
|
|
1396
|
+
.rk-clips-grid,.rk-raws-explorer{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
|
|
1397
|
+
.rk-raws-explorer.is-folders{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
1398
|
+
.rk-files-explorer .rk-dir-search-input{font-size:16px}
|
|
1399
|
+
}
|
|
1400
|
+
|
|
1401
|
+
</style>
|
|
1402
|
+
</head>
|
|
1403
|
+
<body class="rk-root rk-has-sidebar rk-signed-in">
|
|
1404
|
+
<div class="rk-app">
|
|
1405
|
+
<aside class="rk-sidebar">
|
|
1406
|
+
<a class="rk-sidebar-brand" href="/discover"><span class="rk-brand-mark">V</span>VidFarm</a>
|
|
1407
|
+
<a class="rk-sidebar-market" href="/marketplace" hidden>
|
|
1408
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9l1-5h16l1 5"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></svg>
|
|
1409
|
+
Marketplace
|
|
1410
|
+
<span class="rk-sidebar-market-dot" aria-hidden="true"></span>
|
|
1411
|
+
</a>
|
|
1412
|
+
<script>(function(){try{var p=new URLSearchParams(location.search);if(p.get('show_marketplace')==='true')localStorage.setItem('vf_show_marketplace','1');if(p.get('show_marketplace')==='true'||localStorage.getItem('vf_show_marketplace')==='1'){var el=document.querySelector('.rk-sidebar-market');if(el)el.hidden=false;}}catch(e){}})();</script>
|
|
1413
|
+
<div class="rk-sidebar-skill"><div class="vf-skill-install vf-skill-install-nav" data-skill-install>
|
|
1414
|
+
<button
|
|
1415
|
+
class="vf-skill-install-main"
|
|
1416
|
+
type="button"
|
|
1417
|
+
data-skill-copy
|
|
1418
|
+
data-default-label="SKILL.md"
|
|
1419
|
+
data-skill-content="Read https://vidfarm.cc/skill.md to get started with Vidfarm (agentic video editing). Start by installing the vidfarm devcli (npm i -g @officexapp/vidfarm-devcli) and logging in (vidfarm login)."
|
|
1420
|
+
aria-label="Copy SKILL.md"
|
|
1421
|
+
title="Copy SKILL.md"
|
|
1422
|
+
>
|
|
1423
|
+
<span class="vf-skill-install-main-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span>
|
|
1424
|
+
<span class="vf-skill-install-main-label">SKILL.md</span>
|
|
1425
|
+
</button>
|
|
1426
|
+
<button
|
|
1427
|
+
class="vf-skill-install-menu"
|
|
1428
|
+
type="button"
|
|
1429
|
+
data-skill-menu-toggle
|
|
1430
|
+
aria-haspopup="dialog"
|
|
1431
|
+
aria-expanded="false"
|
|
1432
|
+
aria-label="Open skill install options"
|
|
1433
|
+
title="Open skill install options"
|
|
1434
|
+
>
|
|
1435
|
+
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5.5" r="1.75"></circle><circle cx="12" cy="12" r="1.75"></circle><circle cx="12" cy="18.5" r="1.75"></circle></svg>
|
|
1436
|
+
</button>
|
|
1437
|
+
<div class="vf-skill-install-popover" data-skill-menu hidden>
|
|
1438
|
+
<div class="vf-skill-install-popover-kicker">Install Command</div>
|
|
1439
|
+
<div class="vf-skill-install-command">
|
|
1440
|
+
<input class="vf-skill-install-input" type="text" readonly value="npx skills add https://github.com/officexapp/vidfarm-director" data-skill-command-input aria-label="Skill install command">
|
|
1441
|
+
<button class="vf-skill-install-copy" type="button" data-skill-command-copy aria-label="Copy install command" title="Copy install command">
|
|
1442
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
|
1443
|
+
</button>
|
|
1444
|
+
</div>
|
|
1445
|
+
<a class="vf-skill-install-link" href="https://github.com/officexapp/vidfarm-director" target="_blank" rel="noopener noreferrer">
|
|
1446
|
+
<span class="vf-skill-install-link-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6"></path><path d="M10 14 20 4"></path><path d="M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5"></path></svg></span>
|
|
1447
|
+
<span>View GitHub</span>
|
|
1448
|
+
</a>
|
|
1449
|
+
</div>
|
|
1450
|
+
</div></div>
|
|
1451
|
+
<input type="checkbox" id="rk-navtoggle" class="rk-nav-toggle-cb" hidden>
|
|
1452
|
+
<label for="rk-navtoggle" class="rk-nav-burger" aria-label="Toggle navigation" aria-controls="rk-navtoggle">
|
|
1453
|
+
<svg viewBox="0 0 20 20" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M3 6h14M3 10h14M3 14h14"/></svg>
|
|
1454
|
+
</label>
|
|
1455
|
+
<nav class="rk-sidebar-nav" aria-label="Reskin pages">
|
|
1456
|
+
<a class="rk-sidebar-item" href="/discover">Discover</a><a class="rk-sidebar-item" href="/chat">Create</a><a class="rk-sidebar-item is-active" href="/library" aria-current="page">Library</a><a class="rk-sidebar-item" href="/calendar">Calendar</a><a class="rk-sidebar-item" href="/guides">Guides</a><a class="rk-sidebar-item" href="/settings">Settings</a>
|
|
1457
|
+
</nav>
|
|
1458
|
+
<button class="rk-sidebar-cloud" id="rkSidebarCloud" type="button" title="Open cloud status" hidden>
|
|
1459
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.5 19a4.5 4.5 0 0 0 .5-8.98A6 6 0 0 0 6.34 9.5 4 4 0 0 0 7 19h10.5z"/></svg>
|
|
1460
|
+
<span class="rk-sidebar-cloud-label">Cloud status</span>
|
|
1461
|
+
</button>
|
|
1462
|
+
<div class="rk-sidebar-account" title="Signed in as staging@vidfarm.local">
|
|
1463
|
+
<div class="rk-sidebar-account-name">Staging</div>
|
|
1464
|
+
<div class="rk-sidebar-account-email">staging@vidfarm.local</div>
|
|
1465
|
+
</div>
|
|
1466
|
+
</aside>
|
|
1467
|
+
<div class="rk-content">
|
|
1468
|
+
|
|
1469
|
+
<main class="rk-container-wide rk-page rk-library-page">
|
|
1470
|
+
<div class="rk-spread rk-page-head rk-library-head">
|
|
1471
|
+
<div class="rk-stack rk-library-head-copy">
|
|
1472
|
+
<h1 class="rk-h1">Library</h1>
|
|
1473
|
+
<p class="rk-sub">Your whole workspace as one navigable directory — Files, temp scratch, and mined raws. Search by meaning, name, or path.</p>
|
|
1474
|
+
</div>
|
|
1475
|
+
|
|
1476
|
+
</div>
|
|
1477
|
+
|
|
1478
|
+
|
|
1479
|
+
|
|
1480
|
+
<div class="rk-library-topbar">
|
|
1481
|
+
<div class="rk-library-tabs" role="tablist" aria-label="Library view">
|
|
1482
|
+
<a class="rk-library-tab is-active" role="tab" aria-current="page" href="/library/files">Files</a>
|
|
1483
|
+
<a class="rk-library-tab" role="tab" href="/library/approved">Approved</a>
|
|
1484
|
+
<a class="rk-library-tab" role="tab" href="/library/raws">Raws</a>
|
|
1485
|
+
</div>
|
|
1486
|
+
<button class="rk-btn rk-btn-ghost rk-btn-sm rk-library-logs-btn" type="button" onclick="window.__vidfarmDirectory && window.__vidfarmDirectory.manageShares()"><span>⤴ Manage Shares</span></button>
|
|
1487
|
+
<a class="rk-btn rk-btn-ghost rk-btn-sm rk-library-logs-btn" href="/library/logs"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01M3 12h.01M3 18h.01"/></svg><span>Logs</span></a>
|
|
1488
|
+
</div>
|
|
1489
|
+
|
|
1490
|
+
<div class="rk-files-explorer">
|
|
1491
|
+
<div data-rk-directory data-mode="standalone" data-show-upload="true" data-upload-placement="toolbar" data-show-multiselect="true" data-primary-click="preview" data-enable-shares="true"></div>
|
|
1492
|
+
</div>
|
|
1493
|
+
</main>
|
|
1494
|
+
|
|
1495
|
+
</div>
|
|
1496
|
+
<button class="rk-fab" id="rkFab" type="button" aria-label="Open AI chat" aria-expanded="false" aria-controls="rkAichat" title="Chat with vidfarm AI — drag to move">
|
|
1497
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
|
|
1498
|
+
</button>
|
|
1499
|
+
<aside class="rk-aichat has-files" id="rkAichat" hidden aria-label="AI chat panel">
|
|
1500
|
+
<div class="rk-aichat-files" id="rkAichatFiles" aria-label="Files">
|
|
1501
|
+
<div class="rk-aichat-files-head">
|
|
1502
|
+
<span class="rk-aichat-files-title">Your files</span>
|
|
1503
|
+
<button class="rk-aichat-tool" id="rkFilesClose" type="button" title="Minimize files" aria-label="Minimize files">
|
|
1504
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>
|
|
1505
|
+
</button>
|
|
1506
|
+
</div>
|
|
1507
|
+
<div class="rk-aichat-files-mount" id="rkAichatFilesMount" data-rk-directory data-mode="attach" data-primary-click="preview"></div>
|
|
1508
|
+
</div>
|
|
1509
|
+
<div class="rk-aichat-history" id="rkAichatHistory" aria-label="Chat history">
|
|
1510
|
+
<div class="rk-aichat-hist-head">
|
|
1511
|
+
<span class="rk-aichat-hist-title">Chat history</span>
|
|
1512
|
+
<button class="rk-aichat-tool" id="rkHistoryClose" type="button" title="Back to chat" aria-label="Back to chat">
|
|
1513
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>
|
|
1514
|
+
</button>
|
|
1515
|
+
</div>
|
|
1516
|
+
<div class="rk-aichat-hist-body" id="rkAichatHistBody"></div>
|
|
1517
|
+
</div>
|
|
1518
|
+
<div class="rk-aichat-cloud" id="rkAichatCloud" aria-label="Cloud status">
|
|
1519
|
+
<div class="rk-aichat-cloud-head">
|
|
1520
|
+
<span class="rk-aichat-cloud-title">Cloud status</span>
|
|
1521
|
+
<button class="rk-aichat-tool rk-aichat-cloud-refresh" id="rkCloudRefresh" type="button" title="Refresh" aria-label="Refresh cloud tasks">
|
|
1522
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/></svg>
|
|
1523
|
+
</button>
|
|
1524
|
+
<button class="rk-aichat-tool" id="rkCloudClose" type="button" title="Back to chat" aria-label="Back to chat">
|
|
1525
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>
|
|
1526
|
+
</button>
|
|
1527
|
+
</div>
|
|
1528
|
+
<div class="rk-aichat-cloud-filters" id="rkCloudFilters">
|
|
1529
|
+
<button type="button" class="rk-cloud-fbtn is-on" data-f="all">All</button>
|
|
1530
|
+
<button type="button" class="rk-cloud-fbtn" data-f="running">Running</button>
|
|
1531
|
+
<button type="button" class="rk-cloud-fbtn" data-f="done">Done</button>
|
|
1532
|
+
<button type="button" class="rk-cloud-fbtn" data-f="error">Error</button>
|
|
1533
|
+
</div>
|
|
1534
|
+
<div class="rk-aichat-cloud-body" id="rkCloudBody"></div>
|
|
1535
|
+
</div>
|
|
1536
|
+
<div class="rk-aichat-main">
|
|
1537
|
+
<header class="rk-aichat-head">
|
|
1538
|
+
<span class="rk-brand-mark">V</span>
|
|
1539
|
+
<div class="rk-aichat-head-main">
|
|
1540
|
+
<div class="rk-aichat-title">VidFarm AI</div>
|
|
1541
|
+
<div class="rk-aichat-sub">on your own AI keys</div>
|
|
1542
|
+
</div>
|
|
1543
|
+
<button class="rk-aichat-tool" id="rkHistoryToggle" type="button" title="Chat history" aria-label="Toggle chat history" aria-pressed="false">
|
|
1544
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg>
|
|
1545
|
+
</button>
|
|
1546
|
+
<button class="rk-aichat-tool" id="rkCloudToggle" type="button" title="Cloud status" aria-label="Toggle cloud status" aria-pressed="false">
|
|
1547
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.5 19a4.5 4.5 0 0 0 .5-8.98A6 6 0 0 0 6.34 9.5 4 4 0 0 0 7 19h10.5z"/></svg>
|
|
1548
|
+
<span class="rk-cloud-dot" id="rkCloudDot" hidden></span>
|
|
1549
|
+
</button>
|
|
1550
|
+
<button class="rk-aichat-tool" id="rkCopyThread" type="button" title="Copy chat ID" aria-label="Copy chat ID">
|
|
1551
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
|
1552
|
+
</button>
|
|
1553
|
+
<button class="rk-aichat-tool" id="rkNewChat" type="button" title="New chat" aria-label="Start a new chat">
|
|
1554
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
|
|
1555
|
+
</button>
|
|
1556
|
+
<button class="rk-aichat-tool" id="rkAichatMin" type="button" title="Minimize" aria-label="Minimize chat">—</button>
|
|
1557
|
+
</header>
|
|
1558
|
+
<div class="rk-aichat-log" id="rkAichatLog">
|
|
1559
|
+
<div class="rk-aichat-msg is-ai">Hi! I'm the vidfarm assistant. I can take real actions on your account — browse your files, hit vidfarm APIs, kick off renders. Ask me anything, or attach a file from the panel on the left.</div>
|
|
1560
|
+
</div>
|
|
1561
|
+
<div class="rk-aichat-chips" id="rkAichatChips"></div>
|
|
1562
|
+
<form class="rk-aichat-composer" id="rkAichatForm">
|
|
1563
|
+
<textarea class="rk-aichat-field" id="rkAichatInput" rows="3" placeholder="Ask the vidfarm AI…" autocomplete="off"></textarea>
|
|
1564
|
+
<div class="rk-aichat-composer-actions">
|
|
1565
|
+
<button class="rk-aichat-attach" id="rkAichatAttach" type="button" title="Attach a file" aria-label="Attach a file">
|
|
1566
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
|
|
1567
|
+
</button>
|
|
1568
|
+
<button class="rk-btn rk-btn-gold rk-btn-sm" type="submit">Send</button>
|
|
1569
|
+
</div>
|
|
1570
|
+
</form>
|
|
1571
|
+
</div>
|
|
1572
|
+
</aside>
|
|
1573
|
+
</div>
|
|
1574
|
+
<script>(() => {
|
|
1575
|
+
// Desktop-agents nudge banner: a full-width alert pinned to the top of the
|
|
1576
|
+
// /editor and /chat surfaces pointing to the setup guide. Both surfaces embed
|
|
1577
|
+
// this chrome script, so gate strictly by pathname. Dismissible per session.
|
|
1578
|
+
(function mountDesktopAgentsBanner() {
|
|
1579
|
+
try {
|
|
1580
|
+
var path = location.pathname;
|
|
1581
|
+
var onEditor = path === '/editor' || path.indexOf('/editor/') === 0;
|
|
1582
|
+
var onChat = path === '/chat' || path.indexOf('/chat/') === 0;
|
|
1583
|
+
if (!onEditor && !onChat) return;
|
|
1584
|
+
if (document.querySelector('.vf-topbanner')) return;
|
|
1585
|
+
if (sessionStorage.getItem('vf-topbanner-dismissed') === '1') return;
|
|
1586
|
+
var GUIDE = '/blog/desktop-ai-agents';
|
|
1587
|
+
var bar = document.createElement('div');
|
|
1588
|
+
bar.className = 'vf-topbanner';
|
|
1589
|
+
bar.setAttribute('role', 'alert');
|
|
1590
|
+
bar.innerHTML =
|
|
1591
|
+
'<span class="vf-topbanner-ico" aria-hidden="true">🖥️</span>' +
|
|
1592
|
+
'<span class="vf-topbanner-msg"><strong>VidFarm.cc is best using desktop AI Agents</strong> such as OpenAI Codex & Claude Code. Follow the guide to set up.</span>' +
|
|
1593
|
+
'<a class="vf-topbanner-cta" href="' + GUIDE + '" target="_blank" rel="noopener">Follow the guide →</a>' +
|
|
1594
|
+
'<button type="button" class="vf-topbanner-close" aria-label="Dismiss">×</button>';
|
|
1595
|
+
function sizeBanner() {
|
|
1596
|
+
document.body.style.setProperty('--vf-topbanner-h', bar.offsetHeight + 'px');
|
|
1597
|
+
}
|
|
1598
|
+
bar.querySelector('.vf-topbanner-close').addEventListener('click', function () {
|
|
1599
|
+
try { sessionStorage.setItem('vf-topbanner-dismissed', '1'); } catch (e) {}
|
|
1600
|
+
bar.remove();
|
|
1601
|
+
document.body.classList.remove('vf-has-topbanner');
|
|
1602
|
+
document.body.style.removeProperty('--vf-topbanner-h');
|
|
1603
|
+
});
|
|
1604
|
+
document.body.insertBefore(bar, document.body.firstChild);
|
|
1605
|
+
document.body.classList.add('vf-has-topbanner');
|
|
1606
|
+
sizeBanner();
|
|
1607
|
+
window.addEventListener('resize', sizeBanner);
|
|
1608
|
+
} catch (e) {}
|
|
1609
|
+
})();
|
|
1610
|
+
|
|
1611
|
+
var fab = document.getElementById('rkFab');
|
|
1612
|
+
var panel = document.getElementById('rkAichat');
|
|
1613
|
+
if (!fab || !panel) return;
|
|
1614
|
+
// Editor dock mode: the /editor shell reuses this exact pop panel + draggable
|
|
1615
|
+
// FAB, dark-themed via .rk-aichat--editor and wired to the editor chat surface
|
|
1616
|
+
// (?surface=editor boot + editor_context snapshots). Same open/close/drag UX
|
|
1617
|
+
// as every other page.
|
|
1618
|
+
var isEditorDock = !!document.querySelector('[data-rk-editor-dock]');
|
|
1619
|
+
if (isEditorDock) panel.classList.add('rk-aichat--editor');
|
|
1620
|
+
var minBtn = document.getElementById('rkAichatMin');
|
|
1621
|
+
var form = document.getElementById('rkAichatForm');
|
|
1622
|
+
var input = document.getElementById('rkAichatInput');
|
|
1623
|
+
var log = document.getElementById('rkAichatLog');
|
|
1624
|
+
var MARGIN = 10;
|
|
1625
|
+
// On the dedicated /chat page the panel's chat column is redundant (the page
|
|
1626
|
+
// IS the chat), so we hide the floating FAB and instead let the composer's
|
|
1627
|
+
// attach button open the panel in FILES-ONLY mode (just the file explorer).
|
|
1628
|
+
var isChatPage = !!document.querySelector('.rk-chat-page');
|
|
1629
|
+
if (isChatPage) fab.hidden = true;
|
|
1630
|
+
|
|
1631
|
+
function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
|
|
1632
|
+
|
|
1633
|
+
// offsetWidth/offsetLeft (not getBoundingClientRect) so the hover/drag/open
|
|
1634
|
+
// transforms never skew the clamp math
|
|
1635
|
+
function placeFab(x, y) {
|
|
1636
|
+
x = clamp(x, MARGIN, window.innerWidth - fab.offsetWidth - MARGIN);
|
|
1637
|
+
y = clamp(y, MARGIN, window.innerHeight - fab.offsetHeight - MARGIN);
|
|
1638
|
+
fab.style.left = x + 'px';
|
|
1639
|
+
fab.style.top = y + 'px';
|
|
1640
|
+
fab.style.bottom = 'auto';
|
|
1641
|
+
return { x: x, y: y };
|
|
1642
|
+
}
|
|
1643
|
+
|
|
1644
|
+
try {
|
|
1645
|
+
var saved = JSON.parse(localStorage.getItem('rk-fab-pos') || 'null');
|
|
1646
|
+
if (saved && typeof saved.x === 'number') placeFab(saved.x, saved.y);
|
|
1647
|
+
} catch (e) {}
|
|
1648
|
+
|
|
1649
|
+
function anchorPanel() {
|
|
1650
|
+
var r = fab.getBoundingClientRect();
|
|
1651
|
+
var onRight = r.left + r.width / 2 > window.innerWidth / 2;
|
|
1652
|
+
panel.classList.toggle('is-right', onRight);
|
|
1653
|
+
document.body.classList.toggle('rk-chat-left', !panel.hidden && !onRight);
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
function openPanel(filesOnly) {
|
|
1657
|
+
panel.hidden = false;
|
|
1658
|
+
panel.classList.toggle('is-files-only', !!filesOnly);
|
|
1659
|
+
fab.classList.add('is-open');
|
|
1660
|
+
fab.setAttribute('aria-expanded', 'true');
|
|
1661
|
+
if (filesOnly) {
|
|
1662
|
+
// slim left-hand drawer that replaces the sidebar (like the normal dock),
|
|
1663
|
+
// so it never covers the centered chat column's composer / Send button
|
|
1664
|
+
setLeftMode('files');
|
|
1665
|
+
panel.classList.remove('is-right');
|
|
1666
|
+
document.body.classList.add('rk-chat-left');
|
|
1667
|
+
} else {
|
|
1668
|
+
anchorPanel();
|
|
1669
|
+
// On short / narrow screens the left drawer stacks ABOVE the chat and
|
|
1670
|
+
// crushes the log + composer. Start collapsed to the chat column there;
|
|
1671
|
+
// the user can still open Files/History from the header toggles.
|
|
1672
|
+
try {
|
|
1673
|
+
if (window.matchMedia && window.matchMedia('(max-width:700px)').matches) setLeftMode('');
|
|
1674
|
+
} catch (e) {}
|
|
1675
|
+
}
|
|
1676
|
+
try { sessionStorage.setItem('rk-chat-open', filesOnly ? 'files' : '1'); } catch (e) {}
|
|
1677
|
+
if (!filesOnly) loadBoot();
|
|
1678
|
+
refreshFilesOnOpen();
|
|
1679
|
+
if (!filesOnly && input) input.focus();
|
|
1680
|
+
}
|
|
1681
|
+
|
|
1682
|
+
function closePanel() {
|
|
1683
|
+
panel.hidden = true;
|
|
1684
|
+
panel.classList.remove('is-files-only');
|
|
1685
|
+
fab.classList.remove('is-open');
|
|
1686
|
+
fab.setAttribute('aria-expanded', 'false');
|
|
1687
|
+
document.body.classList.remove('rk-chat-left');
|
|
1688
|
+
try { sessionStorage.removeItem('rk-chat-open'); } catch (e) {}
|
|
1689
|
+
}
|
|
1690
|
+
|
|
1691
|
+
var drag = null;
|
|
1692
|
+
fab.addEventListener('pointerdown', function (e) {
|
|
1693
|
+
drag = { sx: e.clientX, sy: e.clientY, ox: fab.offsetLeft, oy: fab.offsetTop, moved: false, last: null };
|
|
1694
|
+
fab.setPointerCapture(e.pointerId);
|
|
1695
|
+
});
|
|
1696
|
+
fab.addEventListener('pointermove', function (e) {
|
|
1697
|
+
if (!drag) return;
|
|
1698
|
+
var dx = e.clientX - drag.sx;
|
|
1699
|
+
var dy = e.clientY - drag.sy;
|
|
1700
|
+
if (!drag.moved && Math.hypot(dx, dy) < 6) return;
|
|
1701
|
+
drag.moved = true;
|
|
1702
|
+
fab.classList.add('is-dragging');
|
|
1703
|
+
drag.last = placeFab(drag.ox + dx, drag.oy + dy);
|
|
1704
|
+
});
|
|
1705
|
+
fab.addEventListener('pointerup', function () {
|
|
1706
|
+
if (!drag) return;
|
|
1707
|
+
var moved = drag.moved;
|
|
1708
|
+
if (drag.last) {
|
|
1709
|
+
try { localStorage.setItem('rk-fab-pos', JSON.stringify(drag.last)); } catch (e) {}
|
|
1710
|
+
}
|
|
1711
|
+
fab.classList.remove('is-dragging');
|
|
1712
|
+
drag = null;
|
|
1713
|
+
if (!moved) openPanel();
|
|
1714
|
+
});
|
|
1715
|
+
fab.addEventListener('pointercancel', function () {
|
|
1716
|
+
fab.classList.remove('is-dragging');
|
|
1717
|
+
drag = null;
|
|
1718
|
+
});
|
|
1719
|
+
fab.addEventListener('click', function (e) {
|
|
1720
|
+
if (e.detail === 0 && panel.hidden) openPanel();
|
|
1721
|
+
});
|
|
1722
|
+
|
|
1723
|
+
if (minBtn) minBtn.addEventListener('click', closePanel);
|
|
1724
|
+
document.addEventListener('keydown', function (e) {
|
|
1725
|
+
if (e.key === 'Escape' && !panel.hidden) closePanel();
|
|
1726
|
+
});
|
|
1727
|
+
window.addEventListener('resize', function () {
|
|
1728
|
+
if (fab.style.top) {
|
|
1729
|
+
var pos = placeFab(fab.offsetLeft, fab.offsetTop);
|
|
1730
|
+
try { localStorage.setItem('rk-fab-pos', JSON.stringify(pos)); } catch (e) {}
|
|
1731
|
+
}
|
|
1732
|
+
if (!panel.hidden) anchorPanel();
|
|
1733
|
+
});
|
|
1734
|
+
|
|
1735
|
+
function bubble(kind, text) {
|
|
1736
|
+
var el = document.createElement('div');
|
|
1737
|
+
el.className = 'rk-aichat-msg ' + kind;
|
|
1738
|
+
el.textContent = text;
|
|
1739
|
+
log.appendChild(el);
|
|
1740
|
+
log.scrollTop = log.scrollHeight;
|
|
1741
|
+
return el;
|
|
1742
|
+
}
|
|
1743
|
+
function logBottom() { if (log) log.scrollTop = log.scrollHeight; }
|
|
1744
|
+
|
|
1745
|
+
// Remember the opening greeting so "New chat" can restore a fresh thread.
|
|
1746
|
+
var GREETING = (function () {
|
|
1747
|
+
var first = log && log.querySelector('.rk-aichat-msg.is-ai');
|
|
1748
|
+
return first ? first.textContent : "Hi! I'm the vidfarm assistant — ask me anything about your videos, clips, and posts.";
|
|
1749
|
+
})();
|
|
1750
|
+
|
|
1751
|
+
// ─── real agentic chat: wired to the live editor-chat backend ──────────────
|
|
1752
|
+
// Boot (endpoint + api key + brainstorm template) is fetched lazily on first
|
|
1753
|
+
// open from /chat-dock/boot (cookie-authed). Tool calls surface as first-class
|
|
1754
|
+
// actions: every http_request becomes a clickable card that opens a modal with
|
|
1755
|
+
// the exact request + response, exactly like the /editor chat.
|
|
1756
|
+
var BOOT = null, BOOT_STATE = 'idle'; // idle|loading|ready|anon|error
|
|
1757
|
+
var ENDPOINT = '/api/v1/editor-chat', API_KEY = null, TEMPLATE = null, CACHED = null;
|
|
1758
|
+
var THREADS_URL = '/api/v1/editor-chat/threads', TEMPLATE_ID = 'chat-brainstorm';
|
|
1759
|
+
var convo = []; // [{role,text}] running conversation
|
|
1760
|
+
// Minted up-front so the "Copy chat ID" tool always has something to copy
|
|
1761
|
+
// (even before the first message) and so the id we copy is the SAME one the
|
|
1762
|
+
// first send persists under. Reset to a fresh id on New chat, replaced by the
|
|
1763
|
+
// real id when a saved thread is opened.
|
|
1764
|
+
var threadId = genId('thread');
|
|
1765
|
+
|
|
1766
|
+
// Cross-page hand-off: /chat (or a future AI-driven page nav) can pass
|
|
1767
|
+
// ?rk_chat=<threadId> to continue that EXACT conversation in this dock. Read it
|
|
1768
|
+
// once, strip it from the URL (so reload / back-button doesn't re-trigger), and
|
|
1769
|
+
// replay the thread as soon as boot is ready (see consumeHandoff, called from
|
|
1770
|
+
// loadBoot's ready path). Also opens the panel below so the jump is seamless.
|
|
1771
|
+
var handoffThread = null;
|
|
1772
|
+
try {
|
|
1773
|
+
var _hq = new URLSearchParams(window.location.search);
|
|
1774
|
+
handoffThread = _hq.get('rk_chat') || null;
|
|
1775
|
+
if (handoffThread) {
|
|
1776
|
+
_hq.delete('rk_chat');
|
|
1777
|
+
var _hqs = _hq.toString();
|
|
1778
|
+
window.history.replaceState(window.history.state, '', window.location.pathname + (_hqs ? '?' + _hqs : '') + window.location.hash);
|
|
1779
|
+
}
|
|
1780
|
+
} catch (e) { handoffThread = null; }
|
|
1781
|
+
// Replay a handed-off thread once the dock is authed + booted. openThread needs
|
|
1782
|
+
// API_KEY (set by loadBoot), so this only fires from the boot-ready path.
|
|
1783
|
+
function consumeHandoff() {
|
|
1784
|
+
if (!handoffThread || BOOT_STATE !== 'ready') return;
|
|
1785
|
+
var id = handoffThread; handoffThread = null;
|
|
1786
|
+
setLeftMode(''); // show the conversation, not the Files/History drawer
|
|
1787
|
+
openThread(id);
|
|
1788
|
+
}
|
|
1789
|
+
var busy = false;
|
|
1790
|
+
var pendingAbort = null; // AbortController for the in-flight reply (Stop button)
|
|
1791
|
+
|
|
1792
|
+
// On the /editor dock the chat MUST be scoped to the OPEN composition, not the
|
|
1793
|
+
// generic brainstorm boot — otherwise the agent has no fork id and can't run
|
|
1794
|
+
// video_context / editor_action (it guesses "chat-brainstorm" and gives up).
|
|
1795
|
+
// The editor page already embeds the composition identity in #hf-boot; use it
|
|
1796
|
+
// as the template context (exactly like the SPA chat's body.template) so
|
|
1797
|
+
// thread_template_id is the real template_… id and create_video is dropped in
|
|
1798
|
+
// favor of the edit tools. Set eagerly so the very first send is correct even
|
|
1799
|
+
// before /chat-dock/boot resolves (that fetch still supplies the api key).
|
|
1800
|
+
var EDITOR_TEMPLATE = null;
|
|
1801
|
+
if (isEditorDock) {
|
|
1802
|
+
try {
|
|
1803
|
+
var hfBootEl = document.getElementById('hf-boot');
|
|
1804
|
+
var hfBoot = hfBootEl ? JSON.parse(hfBootEl.textContent || '{}') : null;
|
|
1805
|
+
var editorTplId = hfBoot && (hfBoot.templateId || hfBoot.compositionId);
|
|
1806
|
+
if (editorTplId) {
|
|
1807
|
+
EDITOR_TEMPLATE = {
|
|
1808
|
+
page: 'docs', tracerId: null, tracers: [], defaultRequestTracer: null,
|
|
1809
|
+
templateId: editorTplId,
|
|
1810
|
+
templateSlug: (hfBoot && (hfBoot.slugId || hfBoot.templateId)) || editorTplId,
|
|
1811
|
+
templateTitle: (hfBoot && hfBoot.title) || 'Studio',
|
|
1812
|
+
templateDescription: '', docsRoutes: []
|
|
1813
|
+
};
|
|
1814
|
+
TEMPLATE = EDITOR_TEMPLATE;
|
|
1815
|
+
TEMPLATE_ID = editorTplId;
|
|
1816
|
+
}
|
|
1817
|
+
} catch (e) {}
|
|
1818
|
+
}
|
|
1819
|
+
|
|
1820
|
+
function genId(p) { return p + '-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8); }
|
|
1821
|
+
function setBusy(v) {
|
|
1822
|
+
busy = v;
|
|
1823
|
+
// While a reply streams, the Send button becomes an interruptive Stop
|
|
1824
|
+
// (stays clickable so the user can abort); it flips back to Send when done.
|
|
1825
|
+
if (form) { var b = form.querySelector('button[type=submit]'); if (b) { b.textContent = v ? 'Stop' : 'Send'; b.classList.toggle('is-stop', v); } }
|
|
1826
|
+
if (newChatBtn) newChatBtn.disabled = v;
|
|
1827
|
+
}
|
|
1828
|
+
function clientContext() {
|
|
1829
|
+
var now = new Date(), local = null, tz = null;
|
|
1830
|
+
try { local = new Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long' }).format(now); } catch (e) { local = now.toString(); }
|
|
1831
|
+
try { tz = (Intl.DateTimeFormat().resolvedOptions().timeZone) || null; } catch (e) { tz = null; }
|
|
1832
|
+
return { currentDateTime: now.toISOString(), localDateTime: local, timeZone: tz };
|
|
1833
|
+
}
|
|
1834
|
+
// The live composition snapshot (fork id, layers, DNA) the SPA editor bundle
|
|
1835
|
+
// exposes on window.__vidfarmEditorAction.getSnapshot(). Injected into the
|
|
1836
|
+
// outgoing user turn — verbatim to what the SPA's own chat sends — so the agent
|
|
1837
|
+
// knows which fork to read (video_context) and mutate (editor_action). Only the
|
|
1838
|
+
// /editor dock has this bridge; elsewhere it returns ''.
|
|
1839
|
+
function editorContextBlock() {
|
|
1840
|
+
if (!isEditorDock) return '';
|
|
1841
|
+
var bridge = (typeof window !== 'undefined') ? window.__vidfarmEditorAction : null;
|
|
1842
|
+
if (!bridge || typeof bridge.getSnapshot !== 'function') return '';
|
|
1843
|
+
var snap; try { snap = bridge.getSnapshot(); } catch (e) { snap = null; }
|
|
1844
|
+
if (!snap) return '';
|
|
1845
|
+
try { return '\n\n<editor_context>\n' + JSON.stringify(snap, null, 2) + '\n</editor_context>'; }
|
|
1846
|
+
catch (e) { return ''; }
|
|
1847
|
+
}
|
|
1848
|
+
function loadBoot() {
|
|
1849
|
+
if (BOOT_STATE === 'ready' || BOOT_STATE === 'loading') return;
|
|
1850
|
+
BOOT_STATE = 'loading';
|
|
1851
|
+
fetch('/chat-dock/boot' + (isEditorDock ? '?surface=editor' : ''), { credentials: 'same-origin', headers: { accept: 'application/json' } })
|
|
1852
|
+
.then(function (r) { return r.ok ? r.json() : null; })
|
|
1853
|
+
.then(function (j) {
|
|
1854
|
+
var b = j && j.editorChat;
|
|
1855
|
+
if (!b) { BOOT_STATE = 'anon'; if (leftMode() === 'cloud') loadTasks(); return; }
|
|
1856
|
+
BOOT = b;
|
|
1857
|
+
ENDPOINT = b.apiUrl || ENDPOINT;
|
|
1858
|
+
API_KEY = b.vidfarmApiKey || null;
|
|
1859
|
+
// On the editor dock keep the composition-scoped template from #hf-boot —
|
|
1860
|
+
// the generic brainstorm boot would strand the agent without a fork id.
|
|
1861
|
+
if (EDITOR_TEMPLATE) { TEMPLATE = EDITOR_TEMPLATE; TEMPLATE_ID = EDITOR_TEMPLATE.templateId; }
|
|
1862
|
+
else { TEMPLATE = b.template || null; TEMPLATE_ID = (TEMPLATE && TEMPLATE.templateId) || TEMPLATE_ID; }
|
|
1863
|
+
CACHED = b.cachedContext || null;
|
|
1864
|
+
THREADS_URL = b.threadsUrl || THREADS_URL;
|
|
1865
|
+
BOOT_STATE = 'ready';
|
|
1866
|
+
loadThreads();
|
|
1867
|
+
if (leftMode() === 'cloud') loadTasks();
|
|
1868
|
+
consumeHandoff();
|
|
1869
|
+
})
|
|
1870
|
+
.catch(function () { BOOT_STATE = 'error'; });
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1873
|
+
// ── first-class HTTP action card + request/response modal ──
|
|
1874
|
+
function fmtBody(v) {
|
|
1875
|
+
if (v === null || v === undefined) return '';
|
|
1876
|
+
if (typeof v === 'string') { try { return JSON.stringify(JSON.parse(v), null, 2); } catch (e) { return v; } }
|
|
1877
|
+
try { return JSON.stringify(v, null, 2); } catch (e) { return String(v); }
|
|
1878
|
+
}
|
|
1879
|
+
function copyText(t) {
|
|
1880
|
+
try { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(t); return; } } catch (e) {}
|
|
1881
|
+
try { var ta = document.createElement('textarea'); ta.value = t; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); } catch (e) {}
|
|
1882
|
+
}
|
|
1883
|
+
var COPY_SVG = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
|
|
1884
|
+
var CARET_SVG = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 4 6 6-6 6"/></svg>';
|
|
1885
|
+
|
|
1886
|
+
// Expandable/collapsible JSON tree — a recursive walk of the value with a
|
|
1887
|
+
// per-path collapsed set (re-rendered on toggle). Mirrors the /editor chat's
|
|
1888
|
+
// JsonViewer: indent depth*16+10px, quoted-key + colon, [ … ]/{ … } collapsed
|
|
1889
|
+
// previews, per-line hover copy button.
|
|
1890
|
+
function jsonViewer(value) {
|
|
1891
|
+
var collapsed = {};
|
|
1892
|
+
var wrap = document.createElement('div'); wrap.className = 'rk-aichat-json';
|
|
1893
|
+
var bar = document.createElement('div'); bar.className = 'rk-aichat-json-bar';
|
|
1894
|
+
var expand = document.createElement('button'); expand.type = 'button'; expand.className = 'rk-aichat-json-all'; expand.textContent = 'Collapse all';
|
|
1895
|
+
var copyAll = document.createElement('button'); copyAll.type = 'button'; copyAll.className = 'rk-aichat-json-all'; copyAll.textContent = 'Copy all';
|
|
1896
|
+
bar.appendChild(expand); bar.appendChild(copyAll);
|
|
1897
|
+
var scroll = document.createElement('div'); scroll.className = 'rk-aichat-json-scroll';
|
|
1898
|
+
wrap.appendChild(bar); wrap.appendChild(scroll);
|
|
1899
|
+
function fmt(v) { if (typeof v === 'string') return JSON.stringify(v); if (typeof v === 'number' || typeof v === 'boolean') return String(v); if (v === null) return 'null'; return JSON.stringify(v); }
|
|
1900
|
+
function lineRow(text, depth) {
|
|
1901
|
+
var row = document.createElement('div'); row.className = 'rk-aichat-json-line'; row.style.paddingLeft = (depth * 16 + 10) + 'px';
|
|
1902
|
+
var cp = document.createElement('button'); cp.type = 'button'; cp.className = 'rk-aichat-json-copy'; cp.setAttribute('aria-label', 'Copy line'); cp.innerHTML = COPY_SVG;
|
|
1903
|
+
cp.addEventListener('click', function () { copyText(text); });
|
|
1904
|
+
var sp = document.createElement('span'); sp.className = 'rk-aichat-json-text'; sp.textContent = text;
|
|
1905
|
+
row.appendChild(cp); row.appendChild(sp); return row;
|
|
1906
|
+
}
|
|
1907
|
+
function toggleRow(text, depth, path, open) {
|
|
1908
|
+
var row = document.createElement('div'); row.className = 'rk-aichat-json-line is-toggle'; row.style.paddingLeft = (depth * 16 + 10) + 'px';
|
|
1909
|
+
var t = document.createElement('button'); t.type = 'button'; t.className = 'rk-aichat-json-caret'; t.setAttribute('data-open', open ? 'true' : 'false'); t.innerHTML = CARET_SVG;
|
|
1910
|
+
t.addEventListener('click', function () { if (open) collapsed[path] = true; else delete collapsed[path]; render(); });
|
|
1911
|
+
var sp = document.createElement('span'); sp.className = 'rk-aichat-json-text'; sp.textContent = text;
|
|
1912
|
+
row.appendChild(t); row.appendChild(sp); return row;
|
|
1913
|
+
}
|
|
1914
|
+
function walk(v, depth, prefix, isLast, path) {
|
|
1915
|
+
var comma = isLast ? '' : ',';
|
|
1916
|
+
if (Array.isArray(v)) {
|
|
1917
|
+
if (!v.length) { scroll.appendChild(lineRow(prefix + '[]' + comma, depth)); return; }
|
|
1918
|
+
if (collapsed[path]) { scroll.appendChild(toggleRow(prefix + '[ … ]' + comma, depth, path, false)); return; }
|
|
1919
|
+
scroll.appendChild(toggleRow(prefix + '[', depth, path, true));
|
|
1920
|
+
for (var i = 0; i < v.length; i++) walk(v[i], depth + 1, '', i === v.length - 1, path + '.' + i);
|
|
1921
|
+
scroll.appendChild(lineRow(']' + comma, depth));
|
|
1922
|
+
} else if (v && typeof v === 'object') {
|
|
1923
|
+
var keys = Object.keys(v);
|
|
1924
|
+
if (!keys.length) { scroll.appendChild(lineRow(prefix + '{}' + comma, depth)); return; }
|
|
1925
|
+
if (collapsed[path]) { scroll.appendChild(toggleRow(prefix + '{ … }' + comma, depth, path, false)); return; }
|
|
1926
|
+
scroll.appendChild(toggleRow(prefix + '{', depth, path, true));
|
|
1927
|
+
for (var k = 0; k < keys.length; k++) {
|
|
1928
|
+
var key = keys[k], cp = JSON.stringify(key) + ': ', last = k === keys.length - 1, child = v[key];
|
|
1929
|
+
if (child && typeof child === 'object') walk(child, depth + 1, cp, last, path + '.' + key);
|
|
1930
|
+
else scroll.appendChild(lineRow(cp + fmt(child) + (last ? '' : ','), depth + 1));
|
|
1931
|
+
}
|
|
1932
|
+
scroll.appendChild(lineRow('}' + comma, depth));
|
|
1933
|
+
} else {
|
|
1934
|
+
scroll.appendChild(lineRow(prefix + fmt(v) + comma, depth));
|
|
1935
|
+
}
|
|
1936
|
+
}
|
|
1937
|
+
function render() { scroll.innerHTML = ''; walk(value, 0, '', true, 'root'); }
|
|
1938
|
+
var allCollapsed = false;
|
|
1939
|
+
function markAll(v, path) {
|
|
1940
|
+
if (Array.isArray(v)) { if (v.length) { collapsed[path] = true; for (var i = 0; i < v.length; i++) markAll(v[i], path + '.' + i); } }
|
|
1941
|
+
else if (v && typeof v === 'object') { var ks = Object.keys(v); if (ks.length) { collapsed[path] = true; for (var k = 0; k < ks.length; k++) markAll(v[ks[k]], path + '.' + ks[k]); } }
|
|
1942
|
+
}
|
|
1943
|
+
expand.addEventListener('click', function () {
|
|
1944
|
+
allCollapsed = !allCollapsed;
|
|
1945
|
+
if (allCollapsed) { markAll(value, 'root'); delete collapsed['root']; expand.textContent = 'Expand all'; }
|
|
1946
|
+
else { collapsed = {}; expand.textContent = 'Collapse all'; }
|
|
1947
|
+
render();
|
|
1948
|
+
});
|
|
1949
|
+
copyAll.addEventListener('click', function () { copyText(fmtBody(value)); });
|
|
1950
|
+
render();
|
|
1951
|
+
return wrap;
|
|
1952
|
+
}
|
|
1953
|
+
function escapeHtml(s) { return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); }
|
|
1954
|
+
// Render inline markdown in assistant text: bold, italic, markdown links and
|
|
1955
|
+
// bare absolute URLs → HTML (mirrors the /editor chat's renderInlineMarkdown).
|
|
1956
|
+
// Order matters: **bold** before *italic*; links before bare-URL autolinking
|
|
1957
|
+
// (an href="…" is never preceded by whitespace/'(' so it won't double-link).
|
|
1958
|
+
function linkify(text) {
|
|
1959
|
+
var BT = String.fromCharCode(96);
|
|
1960
|
+
var html = escapeHtml(text);
|
|
1961
|
+
html = html.replace(new RegExp(BT + '([^' + BT + ']+)' + BT, 'g'), '<code>$1</code>');
|
|
1962
|
+
html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
|
1963
|
+
html = html.replace(/(^|[^\w*])\*([^*\n]+)\*/g, '$1<em>$2</em>');
|
|
1964
|
+
html = html.replace(/(^|[^\w_])_([^_\n]+)_/g, '$1<em>$2</em>');
|
|
1965
|
+
html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
|
|
1966
|
+
html = html.replace(/(^|[\s(])(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/g, '$1<a href="$2" target="_blank" rel="noopener noreferrer">$2</a>');
|
|
1967
|
+
return html;
|
|
1968
|
+
}
|
|
1969
|
+
// ── GitHub-style pipe tables ──────────────────────────────────────────────
|
|
1970
|
+
// A table = a header row containing '|', a separator row of dashes/pipes, then
|
|
1971
|
+
// 0+ body rows. Used both by assistant-message rendering and .md previews so
|
|
1972
|
+
// the model's markdown tables (job registers, comparisons) render as tables.
|
|
1973
|
+
function rkTableCells(line) { var s = String(line).trim().replace(/^\|/, '').replace(/\|$/, ''); return s.split('|').map(function (c) { return c.trim(); }); }
|
|
1974
|
+
function rkIsTableSep(line) { return /^\s*\|?\s*:?-{1,}:?\s*(\|\s*:?-{1,}:?\s*)+\|?\s*$/.test(String(line || '')); }
|
|
1975
|
+
function rkBuildTable(header, rows, fmt) {
|
|
1976
|
+
var thead = '<thead><tr>' + header.map(function (c) { return '<th>' + fmt(c) + '</th>'; }).join('') + '</tr></thead>';
|
|
1977
|
+
var tbody = '<tbody>' + rows.map(function (r) {
|
|
1978
|
+
var cells = ''; for (var i = 0; i < header.length; i++) { cells += '<td>' + fmt(r[i] != null ? r[i] : '') + '</td>'; }
|
|
1979
|
+
return '<tr>' + cells + '</tr>';
|
|
1980
|
+
}).join('') + '</tbody>';
|
|
1981
|
+
return '<div class="rk-md-tablewrap"><table class="rk-md-table">' + thead + tbody + '</table></div>';
|
|
1982
|
+
}
|
|
1983
|
+
// Assistant message → HTML: pipe tables become real <table>s; everything else
|
|
1984
|
+
// keeps its inline (linkify) formatting under the bubble's pre-wrap whitespace.
|
|
1985
|
+
function formatAssistantMarkdown(text) {
|
|
1986
|
+
var lines = String(text).replace(/\r\n?/g, '\n').split('\n');
|
|
1987
|
+
var out = [], buf = [], i = 0;
|
|
1988
|
+
function flush() { if (buf.length) { out.push(linkify(buf.join('\n'))); buf = []; } }
|
|
1989
|
+
while (i < lines.length) {
|
|
1990
|
+
var ln = lines[i], nxt = (i + 1 < lines.length) ? lines[i + 1] : null;
|
|
1991
|
+
if (ln.indexOf('|') >= 0 && nxt != null && rkIsTableSep(nxt) && rkTableCells(ln).length >= 2) {
|
|
1992
|
+
flush();
|
|
1993
|
+
var header = rkTableCells(ln), rows = [], j = i + 2;
|
|
1994
|
+
while (j < lines.length && lines[j].indexOf('|') >= 0 && lines[j].trim() !== '') { rows.push(rkTableCells(lines[j])); j++; }
|
|
1995
|
+
out.push(rkBuildTable(header, rows, linkify)); i = j; continue;
|
|
1996
|
+
}
|
|
1997
|
+
buf.push(ln); i++;
|
|
1998
|
+
}
|
|
1999
|
+
flush();
|
|
2000
|
+
return out.join('');
|
|
2001
|
+
}
|
|
2002
|
+
function openHttpModal(ex) {
|
|
2003
|
+
var req = ex.request || {}, res = ex.response || {};
|
|
2004
|
+
var status = typeof res.status === 'number' ? res.status : 0;
|
|
2005
|
+
var isErr = status >= 400 || res.error;
|
|
2006
|
+
var back = document.createElement('div');
|
|
2007
|
+
back.className = 'rk-aichat-modal-back';
|
|
2008
|
+
var modal = document.createElement('div');
|
|
2009
|
+
modal.className = 'rk-aichat-modal';
|
|
2010
|
+
var head = document.createElement('div');
|
|
2011
|
+
head.className = 'rk-aichat-modal-head';
|
|
2012
|
+
head.innerHTML = '<span class="rk-aichat-http-method">' + (req.method || 'GET') + '</span>'
|
|
2013
|
+
+ '<span class="rk-aichat-http-url"></span>'
|
|
2014
|
+
+ '<span class="rk-aichat-http-status" data-error="' + (isErr ? 'true' : 'false') + '">' + (status || '—') + (res.statusText ? ' ' + res.statusText : '') + '</span>'
|
|
2015
|
+
+ '<button type="button" class="rk-aichat-modal-x" aria-label="Close">×</button>';
|
|
2016
|
+
head.querySelector('.rk-aichat-http-url').textContent = req.url || req.path || '';
|
|
2017
|
+
var body = document.createElement('div');
|
|
2018
|
+
body.className = 'rk-aichat-modal-body';
|
|
2019
|
+
// A raw string block (URL, error text). Always plain <pre>.
|
|
2020
|
+
function textBlock(label, text) {
|
|
2021
|
+
if (!text) return;
|
|
2022
|
+
var wrap = document.createElement('div'); wrap.className = 'rk-aichat-http-block';
|
|
2023
|
+
var l = document.createElement('div'); l.className = 'rk-aichat-http-blabel'; l.textContent = label;
|
|
2024
|
+
var pre = document.createElement('pre'); pre.className = 'rk-aichat-http-pre'; pre.textContent = text;
|
|
2025
|
+
wrap.appendChild(l); wrap.appendChild(pre); body.appendChild(wrap);
|
|
2026
|
+
}
|
|
2027
|
+
// A body/headers block: collapsible JSON tree when structured, else <pre>.
|
|
2028
|
+
function dataBlock(label, value) {
|
|
2029
|
+
if (value === null || value === undefined || value === '') return;
|
|
2030
|
+
var data = value;
|
|
2031
|
+
if (typeof value === 'string') { try { var p = JSON.parse(value); if (p && typeof p === 'object') data = p; } catch (e) {} }
|
|
2032
|
+
var wrap = document.createElement('div'); wrap.className = 'rk-aichat-http-block';
|
|
2033
|
+
var l = document.createElement('div'); l.className = 'rk-aichat-http-blabel'; l.textContent = label;
|
|
2034
|
+
wrap.appendChild(l);
|
|
2035
|
+
if (data && typeof data === 'object') { wrap.appendChild(jsonViewer(data)); }
|
|
2036
|
+
else { var pre = document.createElement('pre'); pre.className = 'rk-aichat-http-pre'; pre.textContent = (typeof value === 'string') ? value : fmtBody(value); wrap.appendChild(pre); }
|
|
2037
|
+
body.appendChild(wrap);
|
|
2038
|
+
}
|
|
2039
|
+
function hasKeys(o) { return o && typeof o === 'object' && Object.keys(o).length > 0; }
|
|
2040
|
+
if (ex.explanation) { var note = document.createElement('div'); note.className = 'rk-aichat-http-note'; note.textContent = ex.explanation; body.appendChild(note); }
|
|
2041
|
+
textBlock('URL', req.url || req.path || '');
|
|
2042
|
+
if (req.body !== undefined && req.body !== null && req.body !== '') dataBlock('Request', req.body);
|
|
2043
|
+
if (res.error) textBlock('Response', res.error);
|
|
2044
|
+
else dataBlock('Response', (res.body === undefined || res.body === null || res.body === '') ? '(empty)' : res.body);
|
|
2045
|
+
if (hasKeys(res.headers)) dataBlock('Response headers', res.headers);
|
|
2046
|
+
modal.appendChild(head); modal.appendChild(body); back.appendChild(modal);
|
|
2047
|
+
function close() { if (back.parentNode) back.parentNode.removeChild(back); document.removeEventListener('keydown', onKey); }
|
|
2048
|
+
function onKey(e) { if (e.key === 'Escape') { e.stopPropagation(); close(); } }
|
|
2049
|
+
back.addEventListener('click', function (e) { if (e.target === back) close(); });
|
|
2050
|
+
head.querySelector('.rk-aichat-modal-x').addEventListener('click', close);
|
|
2051
|
+
document.addEventListener('keydown', onKey);
|
|
2052
|
+
document.body.appendChild(back);
|
|
2053
|
+
}
|
|
2054
|
+
function httpCard(ex) {
|
|
2055
|
+
var req = ex.request || {}, res = ex.response || {};
|
|
2056
|
+
var status = typeof res.status === 'number' ? res.status : 0;
|
|
2057
|
+
var isErr = status >= 400 || res.error;
|
|
2058
|
+
var b = document.createElement('button');
|
|
2059
|
+
b.type = 'button';
|
|
2060
|
+
b.className = 'rk-aichat-http';
|
|
2061
|
+
var m = document.createElement('span'); m.className = 'rk-aichat-http-method'; m.textContent = req.method || 'GET';
|
|
2062
|
+
var u = document.createElement('span'); u.className = 'rk-aichat-http-url';
|
|
2063
|
+
var url = req.url || req.path || '';
|
|
2064
|
+
u.textContent = url.replace(/^https?:\/\/[^/]+/, ''); u.title = url;
|
|
2065
|
+
var s = document.createElement('span'); s.className = 'rk-aichat-http-status';
|
|
2066
|
+
s.setAttribute('data-error', isErr ? 'true' : 'false'); s.textContent = status || '—';
|
|
2067
|
+
b.appendChild(m); b.appendChild(u); b.appendChild(s);
|
|
2068
|
+
b.addEventListener('click', function () { openHttpModal(ex); });
|
|
2069
|
+
return b;
|
|
2070
|
+
}
|
|
2071
|
+
|
|
2072
|
+
// ── file preview: classify a file by content-type + extension ──
|
|
2073
|
+
function fileKind(name, ct) {
|
|
2074
|
+
ct = (ct || '').toLowerCase();
|
|
2075
|
+
var ext = ((name || '').split('.').pop() || '').toLowerCase();
|
|
2076
|
+
if (ct.indexOf('image/') === 0 || /^(png|jpe?g|gif|webp|svg|avif|bmp|heic|ico)$/.test(ext)) return 'image';
|
|
2077
|
+
if (ct.indexOf('video/') === 0 || /^(mp4|mov|webm|m4v|mkv|ogv)$/.test(ext)) return 'video';
|
|
2078
|
+
if (ct.indexOf('audio/') === 0 || /^(mp3|wav|m4a|aac|ogg|oga|flac|opus)$/.test(ext)) return 'audio';
|
|
2079
|
+
if (ct.indexOf('application/pdf') === 0 || ext === 'pdf') return 'pdf';
|
|
2080
|
+
if (ct.indexOf('json') >= 0 || ext === 'json') return 'json';
|
|
2081
|
+
if (ext === 'md' || ext === 'markdown' || ct.indexOf('markdown') >= 0) return 'markdown';
|
|
2082
|
+
if (ct.indexOf('text/') === 0 || /^(txt|csv|tsv|srt|vtt|log|xml|yaml|yml|ini|conf|html?)$/.test(ext)) return 'text';
|
|
2083
|
+
return 'other';
|
|
2084
|
+
}
|
|
2085
|
+
function fileIcon(kind) { return kind === 'pdf' ? '📕' : kind === 'json' ? '{ }' : kind === 'markdown' ? '📝' : kind === 'audio' ? '🎵' : kind === 'text' ? '📄' : '📄'; }
|
|
2086
|
+
|
|
2087
|
+
// Compact markdown → HTML for .md previews (headings, lists, quotes, rules,
|
|
2088
|
+
// fenced + inline code, bold/italic/links). Escapes first, then injects tags
|
|
2089
|
+
// (same order as linkify). Backticks are built via char codes to avoid
|
|
2090
|
+
// escaping issues inside this template literal.
|
|
2091
|
+
function renderMarkdown(src) {
|
|
2092
|
+
var BT = String.fromCharCode(96), FENCE = BT + BT + BT;
|
|
2093
|
+
function inline(s) {
|
|
2094
|
+
s = escapeHtml(s);
|
|
2095
|
+
s = s.replace(new RegExp(BT + '([^' + BT + ']+)' + BT, 'g'), '<code>$1</code>');
|
|
2096
|
+
s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
|
2097
|
+
s = s.replace(/(^|[^\w*])\*([^*\n]+)\*/g, '$1<em>$2</em>');
|
|
2098
|
+
s = s.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
|
|
2099
|
+
s = s.replace(/(^|[\s(])(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/g, '$1<a href="$2" target="_blank" rel="noopener noreferrer">$2</a>');
|
|
2100
|
+
return s;
|
|
2101
|
+
}
|
|
2102
|
+
var lines = String(src).replace(/\r\n?/g, '\n').split('\n');
|
|
2103
|
+
var out = [], inCode = false, code = [], listType = null, listItems = [];
|
|
2104
|
+
function flushList() { if (!listType) return; out.push('<' + listType + '>' + listItems.join('') + '</' + listType + '>'); listType = null; listItems = []; }
|
|
2105
|
+
function flushCode() { out.push('<pre class="rk-aichat-preview-code"><code>' + escapeHtml(code.join('\n')) + '</code></pre>'); code = []; }
|
|
2106
|
+
for (var i = 0; i < lines.length; i++) {
|
|
2107
|
+
var ln = lines[i];
|
|
2108
|
+
if (ln.trim().indexOf(FENCE) === 0) { if (inCode) { flushCode(); inCode = false; } else { flushList(); inCode = true; } continue; }
|
|
2109
|
+
if (inCode) { code.push(ln); continue; }
|
|
2110
|
+
if (ln.indexOf('|') >= 0 && (i + 1) < lines.length && rkIsTableSep(lines[i + 1]) && rkTableCells(ln).length >= 2) {
|
|
2111
|
+
flushList();
|
|
2112
|
+
var thead = rkTableCells(ln), trows = [], jj = i + 2;
|
|
2113
|
+
while (jj < lines.length && lines[jj].indexOf('|') >= 0 && lines[jj].trim() !== '') { trows.push(rkTableCells(lines[jj])); jj++; }
|
|
2114
|
+
out.push(rkBuildTable(thead, trows, inline)); i = jj - 1; continue;
|
|
2115
|
+
}
|
|
2116
|
+
var h = ln.match(/^(#{1,6})\s+(.*)$/);
|
|
2117
|
+
if (h) { flushList(); var lvl = h[1].length; out.push('<h' + lvl + '>' + inline(h[2]) + '</h' + lvl + '>'); continue; }
|
|
2118
|
+
if (/^\s*([-*+])\s+/.test(ln)) { if (listType !== 'ul') { flushList(); listType = 'ul'; } listItems.push('<li>' + inline(ln.replace(/^\s*[-*+]\s+/, '')) + '</li>'); continue; }
|
|
2119
|
+
var om = ln.match(/^\s*\d+\.\s+(.*)$/);
|
|
2120
|
+
if (om) { if (listType !== 'ol') { flushList(); listType = 'ol'; } listItems.push('<li>' + inline(om[1]) + '</li>'); continue; }
|
|
2121
|
+
if (/^\s*>\s?/.test(ln)) { flushList(); out.push('<blockquote>' + inline(ln.replace(/^\s*>\s?/, '')) + '</blockquote>'); continue; }
|
|
2122
|
+
if (/^\s*(-{3,}|\*{3,}|_{3,})\s*$/.test(ln)) { flushList(); out.push('<hr>'); continue; }
|
|
2123
|
+
if (!ln.trim()) { flushList(); continue; }
|
|
2124
|
+
flushList();
|
|
2125
|
+
out.push('<p>' + inline(ln) + '</p>');
|
|
2126
|
+
}
|
|
2127
|
+
if (inCode) flushCode();
|
|
2128
|
+
flushList();
|
|
2129
|
+
return out.join('');
|
|
2130
|
+
}
|
|
2131
|
+
|
|
2132
|
+
// ── file preview modal: images (carousel), video, audio, pdf, and text
|
|
2133
|
+
// (json → collapsible tree, md → rendered, txt/csv/srt/vtt → <pre>) ──
|
|
2134
|
+
function openFilePreview(items, index) {
|
|
2135
|
+
items = (items || []).filter(function (f) { return f && f.viewUrl; });
|
|
2136
|
+
if (!items.length) return;
|
|
2137
|
+
var idx = Math.max(0, Math.min(index || 0, items.length - 1));
|
|
2138
|
+
|
|
2139
|
+
var back = document.createElement('div'); back.className = 'rk-aichat-modal-back';
|
|
2140
|
+
var modal = document.createElement('div'); modal.className = 'rk-aichat-modal rk-aichat-preview';
|
|
2141
|
+
var head = document.createElement('div'); head.className = 'rk-aichat-modal-head';
|
|
2142
|
+
var nameEl = document.createElement('span'); nameEl.className = 'rk-aichat-http-url rk-aichat-preview-name';
|
|
2143
|
+
var copyBtn = document.createElement('button'); copyBtn.type = 'button'; copyBtn.className = 'rk-aichat-preview-act'; copyBtn.textContent = 'Copy';
|
|
2144
|
+
var dlBtn = document.createElement('a'); dlBtn.className = 'rk-aichat-preview-act'; dlBtn.target = '_blank'; dlBtn.rel = 'noopener noreferrer'; dlBtn.textContent = 'Download';
|
|
2145
|
+
var linkBtn = document.createElement('button'); linkBtn.type = 'button'; linkBtn.className = 'rk-aichat-preview-act'; linkBtn.textContent = 'Copy link';
|
|
2146
|
+
var xBtn = document.createElement('button'); xBtn.type = 'button'; xBtn.className = 'rk-aichat-modal-x'; xBtn.setAttribute('aria-label', 'Close'); xBtn.innerHTML = '×';
|
|
2147
|
+
head.appendChild(nameEl); head.appendChild(copyBtn); head.appendChild(dlBtn); head.appendChild(linkBtn); head.appendChild(xBtn);
|
|
2148
|
+
function flashAct(btn, label) { var o = btn.getAttribute('data-label') || btn.textContent; btn.setAttribute('data-label', o); btn.textContent = label; setTimeout(function () { btn.textContent = o; }, 1400); }
|
|
2149
|
+
// Copy = file text (json/md/txt) or its URL for binaries. Copy link = the
|
|
2150
|
+
// durable public S3 URL. Download opens in a new tab when the browser can't
|
|
2151
|
+
// force a same-origin download (cross-origin S3).
|
|
2152
|
+
copyBtn.addEventListener('click', function () {
|
|
2153
|
+
var it = items[idx], k = fileKind(it.name, it.contentType);
|
|
2154
|
+
if (k === 'json' || k === 'markdown' || k === 'text') {
|
|
2155
|
+
fetch(it.viewUrl, { credentials: 'same-origin' }).then(function (r) { return r.text(); })
|
|
2156
|
+
.then(function (t) { copyText(t); flashAct(copyBtn, 'Copied'); })
|
|
2157
|
+
.catch(function () { copyText(it.publicUrl || it.viewUrl); flashAct(copyBtn, 'Copied'); });
|
|
2158
|
+
} else { copyText(it.publicUrl || it.viewUrl); flashAct(copyBtn, 'Copied'); }
|
|
2159
|
+
});
|
|
2160
|
+
linkBtn.addEventListener('click', function () { var it = items[idx]; copyText(it.publicUrl || it.viewUrl); flashAct(linkBtn, 'Copied'); });
|
|
2161
|
+
|
|
2162
|
+
var body = document.createElement('div'); body.className = 'rk-aichat-modal-body rk-aichat-preview-body';
|
|
2163
|
+
|
|
2164
|
+
var nav = document.createElement('div'); nav.className = 'rk-aichat-preview-nav';
|
|
2165
|
+
var prev = document.createElement('button'); prev.type = 'button'; prev.className = 'rk-aichat-preview-btn'; prev.innerHTML = '‹ Prev';
|
|
2166
|
+
var counter = document.createElement('span'); counter.className = 'rk-aichat-preview-count';
|
|
2167
|
+
var next = document.createElement('button'); next.type = 'button'; next.className = 'rk-aichat-preview-btn'; next.innerHTML = 'Next ›';
|
|
2168
|
+
nav.appendChild(prev); nav.appendChild(counter); nav.appendChild(next);
|
|
2169
|
+
|
|
2170
|
+
function renderUnknown(container, it, msg) {
|
|
2171
|
+
var wrap = document.createElement('div'); wrap.className = 'rk-aichat-preview-empty';
|
|
2172
|
+
var p = document.createElement('div'); p.textContent = msg || 'No inline preview for this file type.'; wrap.appendChild(p);
|
|
2173
|
+
var a = document.createElement('a'); a.href = it.viewUrl; a.target = '_blank'; a.rel = 'noopener noreferrer'; a.className = 'rk-aichat-preview-dl'; a.textContent = 'Open / download ↗'; wrap.appendChild(a);
|
|
2174
|
+
container.appendChild(wrap);
|
|
2175
|
+
}
|
|
2176
|
+
function renderText(container, it, kind) {
|
|
2177
|
+
var loading = document.createElement('div'); loading.className = 'rk-aichat-preview-loading'; loading.textContent = 'Loading…'; container.appendChild(loading);
|
|
2178
|
+
fetch(it.viewUrl, { credentials: 'same-origin' })
|
|
2179
|
+
.then(function (r) { if (!r.ok) throw new Error('http ' + r.status); return r.text(); })
|
|
2180
|
+
.then(function (txt) {
|
|
2181
|
+
container.innerHTML = '';
|
|
2182
|
+
if (kind === 'json') {
|
|
2183
|
+
var parsed; try { parsed = JSON.parse(txt); } catch (e) { parsed = undefined; }
|
|
2184
|
+
if (parsed && typeof parsed === 'object') { container.appendChild(jsonViewer(parsed)); return; }
|
|
2185
|
+
var pj = document.createElement('pre'); pj.className = 'rk-aichat-http-pre rk-aichat-preview-text'; pj.textContent = txt; container.appendChild(pj); return;
|
|
2186
|
+
}
|
|
2187
|
+
if (kind === 'markdown') { var md = document.createElement('div'); md.className = 'rk-aichat-preview-md'; md.innerHTML = renderMarkdown(txt); container.appendChild(md); return; }
|
|
2188
|
+
var pre = document.createElement('pre'); pre.className = 'rk-aichat-http-pre rk-aichat-preview-text'; pre.textContent = txt; container.appendChild(pre);
|
|
2189
|
+
})
|
|
2190
|
+
.catch(function () { container.innerHTML = ''; renderUnknown(container, it, 'Couldn’t load this file.'); });
|
|
2191
|
+
}
|
|
2192
|
+
function render() {
|
|
2193
|
+
var it = items[idx];
|
|
2194
|
+
nameEl.textContent = it.name || 'file'; nameEl.title = it.name || '';
|
|
2195
|
+
dlBtn.href = it.viewUrl; dlBtn.setAttribute('download', it.name || '');
|
|
2196
|
+
linkBtn.style.display = it.publicUrl ? '' : 'none';
|
|
2197
|
+
body.innerHTML = '';
|
|
2198
|
+
var kind = fileKind(it.name, it.contentType);
|
|
2199
|
+
if (kind === 'image') { var im = document.createElement('img'); im.className = 'rk-aichat-preview-img'; im.src = it.viewUrl; im.alt = it.name || ''; body.appendChild(im); }
|
|
2200
|
+
else if (kind === 'video') { var v = document.createElement('video'); v.className = 'rk-aichat-preview-media'; v.src = it.viewUrl; v.controls = true; v.playsInline = true; body.appendChild(v); }
|
|
2201
|
+
else if (kind === 'audio') { var wrap = document.createElement('div'); wrap.className = 'rk-aichat-preview-audiowrap'; var a = document.createElement('audio'); a.className = 'rk-aichat-preview-audio'; a.src = it.viewUrl; a.controls = true; wrap.appendChild(a); body.appendChild(wrap); }
|
|
2202
|
+
else if (kind === 'pdf') { var f = document.createElement('iframe'); f.className = 'rk-aichat-preview-frame'; f.src = it.viewUrl; body.appendChild(f); }
|
|
2203
|
+
else if (kind === 'json' || kind === 'markdown' || kind === 'text') { renderText(body, it, kind); }
|
|
2204
|
+
else { renderUnknown(body, it); }
|
|
2205
|
+
counter.textContent = (idx + 1) + ' / ' + items.length;
|
|
2206
|
+
prev.disabled = idx <= 0; next.disabled = idx >= items.length - 1;
|
|
2207
|
+
nav.hidden = items.length < 2;
|
|
2208
|
+
}
|
|
2209
|
+
prev.addEventListener('click', function () { if (idx > 0) { idx--; render(); } });
|
|
2210
|
+
next.addEventListener('click', function () { if (idx < items.length - 1) { idx++; render(); } });
|
|
2211
|
+
|
|
2212
|
+
modal.appendChild(head); modal.appendChild(body); modal.appendChild(nav); back.appendChild(modal);
|
|
2213
|
+
function close() { if (back.parentNode) back.parentNode.removeChild(back); document.removeEventListener('keydown', onKey); }
|
|
2214
|
+
function onKey(e) { if (e.key === 'Escape') { e.stopPropagation(); close(); } else if (e.key === 'ArrowLeft') { if (idx > 0) { idx--; render(); } } else if (e.key === 'ArrowRight') { if (idx < items.length - 1) { idx++; render(); } } }
|
|
2215
|
+
back.addEventListener('click', function (e) { if (e.target === back) close(); });
|
|
2216
|
+
xBtn.addEventListener('click', close);
|
|
2217
|
+
document.addEventListener('keydown', onKey);
|
|
2218
|
+
document.body.appendChild(back);
|
|
2219
|
+
render();
|
|
2220
|
+
}
|
|
2221
|
+
|
|
2222
|
+
// ── job auto-poll → render finished output as file previews in chat ────────
|
|
2223
|
+
// Jobs the agent starts (brainstorm, generation, render) are async. We watch
|
|
2224
|
+
// every job id we see in assistant text or tool results, and when it finishes
|
|
2225
|
+
// we drop its output (media + JSON artifact) into the chat as file-preview
|
|
2226
|
+
// thumbnails — WITHOUT persisting them to the transcript (keeps context lean).
|
|
2227
|
+
var rkPolledJobs = {};
|
|
2228
|
+
function rkJobHeaders() { var h = { accept: 'application/json' }; if (API_KEY) h['vidfarm-api-key'] = API_KEY; return h; }
|
|
2229
|
+
function rkExtractJobIds(text) { var ids = {}, re = /job_[0-9a-f]{16,}/g, m; while ((m = re.exec(String(text || '')))) { ids[m[0]] = true; } return Object.keys(ids); }
|
|
2230
|
+
function rkJobIdsFromExchange(ex) { try { var body = ex && ex.response && ex.response.body; if (body == null) return []; var txt = (typeof body === 'string') ? body : JSON.stringify(body); return rkExtractJobIds(txt); } catch (e) { return []; } }
|
|
2231
|
+
function rkResultMediaUrl(job) {
|
|
2232
|
+
function s(v) { return (typeof v === 'string' && v.trim()) ? v.trim() : null; }
|
|
2233
|
+
var result = (job && job.result && typeof job.result === 'object') ? job.result : {};
|
|
2234
|
+
var out = (result.output && typeof result.output === 'object') ? result.output : result;
|
|
2235
|
+
var direct = s(out.primary_file_url) || s(out.video && out.video.file_url) || s(out.image && out.image.file_url) || s(out.render && out.render.output_url);
|
|
2236
|
+
if (direct) return direct;
|
|
2237
|
+
if (out.files && out.files.length) { for (var i = 0; i < out.files.length; i++) { var f = out.files[i]; var u = s(typeof f === 'string' ? f : (f && (f.file_url || f.url))); if (u) return u; } }
|
|
2238
|
+
return null;
|
|
2239
|
+
}
|
|
2240
|
+
function rkFileFromArtifact(a) {
|
|
2241
|
+
var url = a && (a.public_url || a.publicUrl); if (!url) return null;
|
|
2242
|
+
var meta = (a && a.metadata) || {}; var name = meta.file_name || meta.filename || '';
|
|
2243
|
+
if (!name) { var seg = String(url).split('?')[0].split('/').pop(); name = seg || (a.kind ? String(a.kind) : 'artifact'); }
|
|
2244
|
+
return { name: name, contentType: meta.content_type || meta.contentType || '', viewUrl: url, publicUrl: url };
|
|
2245
|
+
}
|
|
2246
|
+
function rkJobOutputFiles(job) {
|
|
2247
|
+
var files = [], seen = {};
|
|
2248
|
+
var arts = (job && job.artifacts) || [];
|
|
2249
|
+
for (var i = 0; i < arts.length; i++) { var f = rkFileFromArtifact(arts[i]); if (f && !seen[f.viewUrl]) { seen[f.viewUrl] = true; files.push(f); } }
|
|
2250
|
+
var mu = rkResultMediaUrl(job); if (mu && !seen[mu]) { seen[mu] = true; files.push({ name: (job.tracer || 'output'), contentType: '', viewUrl: mu, publicUrl: mu }); }
|
|
2251
|
+
var res = job && job.result;
|
|
2252
|
+
if (res && typeof res === 'object' && !Array.isArray(res) && Object.keys(res).length) {
|
|
2253
|
+
try { var blob = new Blob([JSON.stringify(res, null, 2)], { type: 'application/json' }); files.push({ name: (job.tracer || 'result') + '.json', contentType: 'application/json', viewUrl: URL.createObjectURL(blob), publicUrl: null }); } catch (e) {}
|
|
2254
|
+
}
|
|
2255
|
+
return files;
|
|
2256
|
+
}
|
|
2257
|
+
function rkPollJob(view, jobId) {
|
|
2258
|
+
if (!jobId || rkPolledJobs[jobId]) return; rkPolledJobs[jobId] = true;
|
|
2259
|
+
var origin = window.location.origin, deadline = Date.now() + 12 * 60 * 1000;
|
|
2260
|
+
function step() {
|
|
2261
|
+
fetch(origin + '/api/v1/user/me/jobs/' + encodeURIComponent(jobId), { headers: rkJobHeaders(), credentials: 'same-origin' })
|
|
2262
|
+
.then(function (r) { return r.ok ? r.json() : null; })
|
|
2263
|
+
.then(function (job) {
|
|
2264
|
+
if (!job) return;
|
|
2265
|
+
var st = String(job.status || '');
|
|
2266
|
+
if (st === 'succeeded') { var files = rkJobOutputFiles(job); if (files.length) view.addFiles(files, 'Output · ' + (job.tracer || jobId)); return; }
|
|
2267
|
+
if (st === 'failed' || st === 'cancelled') return;
|
|
2268
|
+
if (Date.now() > deadline) return;
|
|
2269
|
+
setTimeout(step, 5000);
|
|
2270
|
+
})
|
|
2271
|
+
.catch(function () {});
|
|
2272
|
+
}
|
|
2273
|
+
step();
|
|
2274
|
+
}
|
|
2275
|
+
|
|
2276
|
+
// ── assistant turn controller (status → actions → streamed text) ──
|
|
2277
|
+
function appendAssistant() {
|
|
2278
|
+
var turn = document.createElement('div'); turn.className = 'rk-aichat-turn';
|
|
2279
|
+
var actions = document.createElement('div'); actions.className = 'rk-aichat-actions';
|
|
2280
|
+
var status = document.createElement('div'); status.className = 'rk-aichat-status';
|
|
2281
|
+
status.innerHTML = '<span class="rk-aichat-typing"><span></span><span></span><span></span></span>';
|
|
2282
|
+
var textEl = document.createElement('div'); textEl.className = 'rk-aichat-msg is-ai rk-aichat-stream'; textEl.hidden = true;
|
|
2283
|
+
turn.appendChild(actions); turn.appendChild(status); turn.appendChild(textEl);
|
|
2284
|
+
log.appendChild(turn); logBottom();
|
|
2285
|
+
var lastText = '', flowEl = null;
|
|
2286
|
+
return {
|
|
2287
|
+
hideStatus: function () { status.hidden = true; },
|
|
2288
|
+
showText: function () { status.hidden = true; textEl.hidden = false; },
|
|
2289
|
+
setText: function (t) { lastText = t; textEl.textContent = t; },
|
|
2290
|
+
// After streaming completes, re-render the text as markdown (tables,
|
|
2291
|
+
// bold/italic/links/code) — pipe tables become real <table>s.
|
|
2292
|
+
renderMd: function () { if (lastText) textEl.innerHTML = formatAssistantMarkdown(lastText); },
|
|
2293
|
+
// Attach finished job/tool output as clickable file-preview thumbnails.
|
|
2294
|
+
// Kept OUT of the persisted transcript (convo) so context stays lean.
|
|
2295
|
+
addFiles: function (files, label) {
|
|
2296
|
+
var list = (files || []).filter(function (f) { return f && f.viewUrl; });
|
|
2297
|
+
if (!list.length) return;
|
|
2298
|
+
var wrap = document.createElement('div'); wrap.className = 'rk-aichat-filepreview';
|
|
2299
|
+
if (label) { var lb = document.createElement('div'); lb.className = 'rk-aichat-files-label'; lb.textContent = label; wrap.appendChild(lb); }
|
|
2300
|
+
var grid = document.createElement('div'); grid.className = 'rk-aichat-files-grid';
|
|
2301
|
+
list.forEach(function (f, ix) {
|
|
2302
|
+
var k = fileKind(f.name, f.contentType);
|
|
2303
|
+
var card = document.createElement('button'); card.type = 'button'; card.className = 'rk-aichat-file';
|
|
2304
|
+
var thumb = document.createElement('div'); thumb.className = 'rk-aichat-file-thumb rk-aichat-file-thumb--' + k;
|
|
2305
|
+
if (k === 'image') { var im = document.createElement('img'); im.src = f.viewUrl; im.alt = ''; im.loading = 'lazy'; thumb.appendChild(im); }
|
|
2306
|
+
else if (k === 'video') { var v = document.createElement('video'); v.src = f.viewUrl; v.muted = true; v.preload = 'metadata'; v.playsInline = true; thumb.appendChild(v); var pl = document.createElement('span'); pl.className = 'rk-aichat-file-play'; pl.textContent = '▶'; thumb.appendChild(pl); }
|
|
2307
|
+
else { var ic = document.createElement('span'); ic.className = 'rk-aichat-file-ic'; ic.textContent = fileIcon(k); thumb.appendChild(ic); }
|
|
2308
|
+
var nm = document.createElement('div'); nm.className = 'rk-aichat-file-name'; nm.textContent = f.name || 'file'; nm.title = f.name || '';
|
|
2309
|
+
card.appendChild(thumb); card.appendChild(nm);
|
|
2310
|
+
card.addEventListener('click', function () { openFilePreview(list, ix); });
|
|
2311
|
+
grid.appendChild(card);
|
|
2312
|
+
});
|
|
2313
|
+
wrap.appendChild(grid); turn.appendChild(wrap); logBottom();
|
|
2314
|
+
},
|
|
2315
|
+
addNote: function (name) {
|
|
2316
|
+
var n = document.createElement('div'); n.className = 'rk-aichat-toolnote';
|
|
2317
|
+
n.textContent = 'Running ' + name + '…'; actions.appendChild(n); logBottom();
|
|
2318
|
+
return n;
|
|
2319
|
+
},
|
|
2320
|
+
// Terminal one-line note (kind 'ok' | 'err' | undefined) — e.g. the real
|
|
2321
|
+
// browser-side outcome of an editor_action apply.
|
|
2322
|
+
note: function (text, kind) {
|
|
2323
|
+
var n = document.createElement('div');
|
|
2324
|
+
n.className = 'rk-aichat-toolnote' + (kind === 'err' ? ' is-err' : (kind === 'ok' ? ' is-ok' : ''));
|
|
2325
|
+
n.textContent = text; actions.appendChild(n); logBottom();
|
|
2326
|
+
return n;
|
|
2327
|
+
},
|
|
2328
|
+
addHttp: function (ex) { actions.appendChild(httpCard(ex)); logBottom(); },
|
|
2329
|
+
// create_video pipeline progress (persistent status row, distinct from the
|
|
2330
|
+
// thinking dots which hide once agent text streams).
|
|
2331
|
+
flowStatus: function (s) {
|
|
2332
|
+
if (!flowEl) { flowEl = document.createElement('div'); flowEl.className = 'rk-aichat-flow'; flowEl.innerHTML = '<span class="rk-aichat-typing"><span></span><span></span><span></span></span><span class="rk-aichat-flow-label"></span>'; turn.appendChild(flowEl); }
|
|
2333
|
+
flowEl.hidden = false; flowEl.querySelector('.rk-aichat-flow-label').textContent = s || ''; logBottom();
|
|
2334
|
+
},
|
|
2335
|
+
// Final pipeline message (markdown-linkified, e.g. "Open it in the editor").
|
|
2336
|
+
flowResult: function (md) {
|
|
2337
|
+
if (flowEl) flowEl.hidden = true;
|
|
2338
|
+
var b = document.createElement('div'); b.className = 'rk-aichat-msg is-ai'; b.innerHTML = linkify(md); turn.appendChild(b); logBottom();
|
|
2339
|
+
},
|
|
2340
|
+
fail: function (msg) {
|
|
2341
|
+
status.hidden = true;
|
|
2342
|
+
var er = document.createElement('div'); er.className = 'rk-aichat-err';
|
|
2343
|
+
er.textContent = msg || 'Something went wrong.'; turn.appendChild(er); logBottom();
|
|
2344
|
+
}
|
|
2345
|
+
};
|
|
2346
|
+
}
|
|
2347
|
+
|
|
2348
|
+
// ── SSE reader (mirrors the live editor-chat client) ──
|
|
2349
|
+
function handleEvent(raw, h) {
|
|
2350
|
+
var lines = raw.split('\n'), dataLine = null;
|
|
2351
|
+
for (var j = 0; j < lines.length; j++) { var t = lines[j].trim(); if (t.indexOf('data:') === 0) { dataLine = t; break; } }
|
|
2352
|
+
if (!dataLine) return;
|
|
2353
|
+
var payload = dataLine.slice(5).trim();
|
|
2354
|
+
if (payload === '[DONE]' || !payload) return;
|
|
2355
|
+
var chunk; try { chunk = JSON.parse(payload); } catch (e) { return; }
|
|
2356
|
+
if (!chunk || typeof chunk !== 'object') return;
|
|
2357
|
+
if (chunk.type === 'text-delta' && typeof chunk.delta === 'string') h.onDelta(chunk.delta);
|
|
2358
|
+
else if (chunk.type === 'tool-call' && typeof chunk.toolName === 'string') h.onToolCall(chunk.toolName, chunk.toolCallId);
|
|
2359
|
+
else if (chunk.type === 'tool-result') h.onToolResult(chunk.toolName, chunk.result, chunk.toolCallId);
|
|
2360
|
+
else if (chunk.type === 'error') h.onError((typeof chunk.errorText === 'string') ? chunk.errorText : ((chunk.error && chunk.error.message) || 'Unable to read assistant response.'));
|
|
2361
|
+
}
|
|
2362
|
+
function readStream(response, h) {
|
|
2363
|
+
if (!response.body || !response.body.getReader) return response.text().then(function (t) { t.split('\n\n').forEach(function (ev) { handleEvent(ev, h); }); });
|
|
2364
|
+
var reader = response.body.getReader(), decoder = new TextDecoder(), buffer = '';
|
|
2365
|
+
function pump() {
|
|
2366
|
+
return reader.read().then(function (res) {
|
|
2367
|
+
if (res.done) { if (buffer) handleEvent(buffer, h); return; }
|
|
2368
|
+
buffer += decoder.decode(res.value, { stream: true });
|
|
2369
|
+
var events = buffer.split('\n\n');
|
|
2370
|
+
buffer = events.pop() || '';
|
|
2371
|
+
for (var i = 0; i < events.length; i++) handleEvent(events[i], h);
|
|
2372
|
+
return pump();
|
|
2373
|
+
});
|
|
2374
|
+
}
|
|
2375
|
+
return pump();
|
|
2376
|
+
}
|
|
2377
|
+
|
|
2378
|
+
// Turn this turn's attachments into a text line the model can quote back as
|
|
2379
|
+
// REST payload URLs (prompt_attachments / source_image_url / media_url), in
|
|
2380
|
+
// addition to the binary file content parts. Mirrors the /editor React dock
|
|
2381
|
+
// (buildAttachmentTransportText). Double-backslash-n = a browser-side newline
|
|
2382
|
+
// (we live inside a script template literal, so a bare newline escape breaks it).
|
|
2383
|
+
function buildAttachmentUrlText(atts) {
|
|
2384
|
+
if (!atts || !atts.length) return '';
|
|
2385
|
+
var lines = atts.map(function (a) { return '- ' + (a.fileName || 'file') + ' (' + (a.contentType || '') + '): ' + a.viewUrl; });
|
|
2386
|
+
return '\n\nAttached file URLs for REST payloads:\n' + lines.join('\n') + '\nUse these exact URLs as prompt_attachments for image generation, source_image_url for image edits, media_url for video slides, or reference attachment URLs when calling template routes.';
|
|
2387
|
+
}
|
|
2388
|
+
|
|
2389
|
+
function sendMessage(text) {
|
|
2390
|
+
if (busy) return;
|
|
2391
|
+
text = (text || '').trim();
|
|
2392
|
+
var picked = (typeof selected !== 'undefined' ? selected : []).slice();
|
|
2393
|
+
// A pasted file may still be uploading to /temp — wait for it rather than
|
|
2394
|
+
// silently dropping the attachment. Flash the in-flight chips as a hint.
|
|
2395
|
+
if (picked.some(function (f) { return f && f.pending; })) {
|
|
2396
|
+
picked.forEach(function (f) { if (f.pending) flashChip(f.id); });
|
|
2397
|
+
return;
|
|
2398
|
+
}
|
|
2399
|
+
var atts = picked.filter(function (f) { return f && f.viewUrl; }).map(function (f) {
|
|
2400
|
+
return { id: String(f.id), fileName: f.name || 'file', contentType: f.contentType || 'application/octet-stream', viewUrl: f.viewUrl };
|
|
2401
|
+
});
|
|
2402
|
+
if (!text && !atts.length) return;
|
|
2403
|
+
if (BOOT_STATE === 'idle' || BOOT_STATE === 'error') loadBoot();
|
|
2404
|
+
|
|
2405
|
+
var line = text;
|
|
2406
|
+
if (picked.length) { line = (text ? text + ' ' : '') + '(attached: ' + picked.map(function (f) { return f.name; }).join(', ') + ')'; }
|
|
2407
|
+
bubble('is-user', line);
|
|
2408
|
+
convo.push({ role: 'user', text: text || line });
|
|
2409
|
+
if (input) { input.value = ''; if (typeof autosizeInput === 'function') autosizeInput(); }
|
|
2410
|
+
if (typeof clearChips === 'function') clearChips();
|
|
2411
|
+
|
|
2412
|
+
if (BOOT_STATE === 'anon') {
|
|
2413
|
+
var v = appendAssistant(); v.showText();
|
|
2414
|
+
v.setText('Sign in to chat with the vidfarm AI on your own provider keys.');
|
|
2415
|
+
return;
|
|
2416
|
+
}
|
|
2417
|
+
|
|
2418
|
+
var view = appendAssistant();
|
|
2419
|
+
setBusy(true);
|
|
2420
|
+
if (!threadId) threadId = genId('thread');
|
|
2421
|
+
// Attach a fresh <editor_context> to the current (last) user turn only, so the
|
|
2422
|
+
// model sees the composition state without bloating persisted history.
|
|
2423
|
+
var ctxBlock = editorContextBlock();
|
|
2424
|
+
// Attachments (pasted files OR files picked from the directory explorer) must
|
|
2425
|
+
// ride in the model messages as file content parts + a URL text line — the
|
|
2426
|
+
// backend only feeds the model messages[].content, NOT user_message.attachments
|
|
2427
|
+
// (which is persistence-only). Without this the AI never saw attached files.
|
|
2428
|
+
var attUrlText = atts.length ? buildAttachmentUrlText(atts) : '';
|
|
2429
|
+
var outMessages = convo.map(function (m, i) {
|
|
2430
|
+
var isLast = i === convo.length - 1;
|
|
2431
|
+
var isLastUser = isLast && m.role === 'user';
|
|
2432
|
+
var t = m.text;
|
|
2433
|
+
if (isLastUser && attUrlText) t = t + attUrlText;
|
|
2434
|
+
if (ctxBlock && isLastUser) t = t + ctxBlock;
|
|
2435
|
+
var content = [{ type: 'text', text: t }];
|
|
2436
|
+
if (isLastUser && atts.length) {
|
|
2437
|
+
atts.forEach(function (a) { content.push({ type: 'file', data: a.viewUrl, mediaType: a.contentType || 'application/octet-stream' }); });
|
|
2438
|
+
}
|
|
2439
|
+
return { role: m.role, content: content };
|
|
2440
|
+
});
|
|
2441
|
+
var body = {
|
|
2442
|
+
messages: outMessages,
|
|
2443
|
+
thread_id: threadId,
|
|
2444
|
+
thread_template_id: TEMPLATE_ID,
|
|
2445
|
+
thread_title: (text || line).slice(0, 42),
|
|
2446
|
+
thread_tracers: (TEMPLATE && TEMPLATE.tracers) || [],
|
|
2447
|
+
client_context: clientContext(),
|
|
2448
|
+
user_message: { id: genId('user'), role: 'user', text: text || line, attachments: atts },
|
|
2449
|
+
assistant_message: { id: genId('assistant') }
|
|
2450
|
+
};
|
|
2451
|
+
if (TEMPLATE) body.template = TEMPLATE;
|
|
2452
|
+
if (CACHED) body.cached_context = CACHED;
|
|
2453
|
+
var headers = { 'content-type': 'application/json' };
|
|
2454
|
+
if (API_KEY) headers['vidfarm-api-key'] = API_KEY;
|
|
2455
|
+
|
|
2456
|
+
var acc = '', sawText = false, errored = false;
|
|
2457
|
+
var handlers = {
|
|
2458
|
+
onDelta: function (d) { if (!sawText) { sawText = true; view.showText(); } acc += d; view.setText(acc); logBottom(); },
|
|
2459
|
+
onToolCall: function (name) { if (name !== 'http_request' && name !== 'create_video') view.addNote(name); },
|
|
2460
|
+
onToolResult: function (name, result) {
|
|
2461
|
+
if (name === 'create_video') { runCreateVideoFlow(view, result); return; }
|
|
2462
|
+
// editor_action only mutates the composition browser-side. On /editor the
|
|
2463
|
+
// SPA bundle exposes window.__vidfarmEditorAction; apply the tool result
|
|
2464
|
+
// through it and surface the REAL outcome. Without this the dock ignored
|
|
2465
|
+
// editor_action entirely, so the model's edits were pure no-ops even
|
|
2466
|
+
// though its reply claimed success. (Only wired on the editor dock — the
|
|
2467
|
+
// bridge is absent on /discover, /library, etc.)
|
|
2468
|
+
if (name === 'editor_action') { applyEditorActionFromChat(view, result); return; }
|
|
2469
|
+
if (result && result.request && result.response) { view.addHttp(result); rkJobIdsFromExchange(result).forEach(function (id) { rkPollJob(view, id); }); }
|
|
2470
|
+
},
|
|
2471
|
+
onError: function (m) { errored = true; view.fail(m); }
|
|
2472
|
+
};
|
|
2473
|
+
|
|
2474
|
+
var controller = (typeof AbortController !== 'undefined') ? new AbortController() : null;
|
|
2475
|
+
pendingAbort = controller;
|
|
2476
|
+
var req;
|
|
2477
|
+
try { req = fetch(ENDPOINT, { method: 'POST', headers: headers, credentials: 'same-origin', body: JSON.stringify(body), signal: controller ? controller.signal : undefined }); }
|
|
2478
|
+
catch (err) { req = Promise.reject(err); }
|
|
2479
|
+
req.then(function (resp) {
|
|
2480
|
+
if (!resp.ok) return resp.json().catch(function () { return {}; }).then(function (j) { throw new Error((j && j.error) || ('Chat request failed (' + resp.status + ').')); });
|
|
2481
|
+
return readStream(resp, handlers);
|
|
2482
|
+
}).then(function () {
|
|
2483
|
+
pendingAbort = null;
|
|
2484
|
+
view.hideStatus();
|
|
2485
|
+
if (sawText) { convo.push({ role: 'assistant', text: acc }); view.renderMd(); rkExtractJobIds(acc).forEach(function (id) { rkPollJob(view, id); }); }
|
|
2486
|
+
else if (!errored) { view.showText(); view.setText('Done.'); }
|
|
2487
|
+
setBusy(false);
|
|
2488
|
+
if (input) input.focus();
|
|
2489
|
+
loadThreads();
|
|
2490
|
+
}).catch(function (err) {
|
|
2491
|
+
pendingAbort = null;
|
|
2492
|
+
// User hit Stop mid-reply — keep whatever streamed so far, no error.
|
|
2493
|
+
if (err && (err.name === 'AbortError' || (controller && controller.signal && controller.signal.aborted))) {
|
|
2494
|
+
view.hideStatus();
|
|
2495
|
+
if (sawText) { convo.push({ role: 'assistant', text: acc }); view.renderMd(); }
|
|
2496
|
+
else { view.showText(); view.setText('Stopped.'); }
|
|
2497
|
+
setBusy(false); if (input) input.focus();
|
|
2498
|
+
return;
|
|
2499
|
+
}
|
|
2500
|
+
var msg = (err && err.message) ? err.message : String(err);
|
|
2501
|
+
if (!API_KEY) msg = msg + '\n\nAdd an AI provider key in Settings to chat on your own keys.';
|
|
2502
|
+
view.fail(msg); setBusy(false); if (input) input.focus();
|
|
2503
|
+
});
|
|
2504
|
+
}
|
|
2505
|
+
|
|
2506
|
+
function resetConversation() {
|
|
2507
|
+
convo = []; threadId = genId('thread'); rkPolledJobs = {};
|
|
2508
|
+
if (log) { log.innerHTML = ''; bubble('is-ai', GREETING); }
|
|
2509
|
+
if (typeof clearChips === 'function') clearChips();
|
|
2510
|
+
}
|
|
2511
|
+
function newChat() {
|
|
2512
|
+
resetConversation();
|
|
2513
|
+
setActiveThread(null);
|
|
2514
|
+
if (input) { input.value = ''; if (typeof autosizeInput === 'function') autosizeInput(); input.focus(); }
|
|
2515
|
+
}
|
|
2516
|
+
// NOTE: the New-chat button element (rkNewChat) is resolved later (see the
|
|
2517
|
+
// var block below), so bind its click handler there — binding here would run
|
|
2518
|
+
// against an undefined newChatBtn (var hoisting) and silently never attach.
|
|
2519
|
+
if (form) form.addEventListener('submit', function (e) {
|
|
2520
|
+
e.preventDefault();
|
|
2521
|
+
if (busy) { if (pendingAbort) pendingAbort.abort(); return; }
|
|
2522
|
+
sendMessage(input ? input.value : '');
|
|
2523
|
+
});
|
|
2524
|
+
|
|
2525
|
+
// The composer is now a multi-row textarea: grow with content (capped) and let
|
|
2526
|
+
// Enter send (Shift+Enter inserts a newline, like every modern chat box).
|
|
2527
|
+
function autosizeInput() {
|
|
2528
|
+
if (!input || input.tagName !== 'TEXTAREA') return;
|
|
2529
|
+
input.style.height = 'auto';
|
|
2530
|
+
input.style.height = Math.min(input.scrollHeight, 210) + 'px';
|
|
2531
|
+
}
|
|
2532
|
+
if (input) {
|
|
2533
|
+
input.addEventListener('input', autosizeInput);
|
|
2534
|
+
input.addEventListener('keydown', function (e) {
|
|
2535
|
+
if (e.key === 'Enter' && !e.shiftKey) {
|
|
2536
|
+
e.preventDefault();
|
|
2537
|
+
if (form && form.requestSubmit) form.requestSubmit();
|
|
2538
|
+
else { if (busy) { if (pendingAbort) pendingAbort.abort(); } else sendMessage(input.value); }
|
|
2539
|
+
}
|
|
2540
|
+
});
|
|
2541
|
+
}
|
|
2542
|
+
|
|
2543
|
+
// ─── editor_action: apply a composition mutation through the SPA bridge that
|
|
2544
|
+
// the editor bundle exposes on window (__vidfarmEditorAction). Only present on
|
|
2545
|
+
// the /editor dock; elsewhere there is no composition to mutate. ───
|
|
2546
|
+
function applyEditorActionFromChat(view, result) {
|
|
2547
|
+
var label = (result && result.action_type) ? String(result.action_type) : 'editor_action';
|
|
2548
|
+
var bridge = (typeof window !== 'undefined') ? window.__vidfarmEditorAction : null;
|
|
2549
|
+
if (!bridge || typeof bridge.apply !== 'function') {
|
|
2550
|
+
view.note('⚠ Editor not ready — reload the page, then ask again (' + label + ' was not applied).', 'err');
|
|
2551
|
+
return;
|
|
2552
|
+
}
|
|
2553
|
+
// bridge.apply may be async (Option-B editor writes through the files API);
|
|
2554
|
+
// normalize sync + promise return shapes.
|
|
2555
|
+
var settle = function (outcome) {
|
|
2556
|
+
if (outcome && outcome.ok) {
|
|
2557
|
+
view.note('✓ ' + (outcome.summary || ('Applied ' + label + '.')), 'ok');
|
|
2558
|
+
} else {
|
|
2559
|
+
view.note('⚠ Couldn’t apply ' + label + ((outcome && outcome.error) ? ': ' + outcome.error : '.'), 'err');
|
|
2560
|
+
}
|
|
2561
|
+
};
|
|
2562
|
+
try {
|
|
2563
|
+
var outcome = bridge.apply(result);
|
|
2564
|
+
if (outcome && typeof outcome.then === 'function') {
|
|
2565
|
+
outcome.then(settle, function (e) { settle({ ok: false, error: (e && e.message) ? e.message : String(e) }); });
|
|
2566
|
+
} else {
|
|
2567
|
+
settle(outcome);
|
|
2568
|
+
}
|
|
2569
|
+
} catch (e) {
|
|
2570
|
+
settle({ ok: false, error: (e && e.message) ? e.message : String(e) });
|
|
2571
|
+
}
|
|
2572
|
+
}
|
|
2573
|
+
|
|
2574
|
+
// ─── create_video: the browser-side pipeline behind the agent's create_video
|
|
2575
|
+
// tool. The backend tool is a passthrough (returns the intent only); the
|
|
2576
|
+
// frontend runs ingest → decompose → fork and posts a clickable "Open in the
|
|
2577
|
+
// editor" link. Ported 1:1 from the /editor chat's runCreateVideoFlow. ───
|
|
2578
|
+
function ivHeaders(json) { var h = { accept: 'application/json' }; if (json) h['content-type'] = 'application/json'; if (API_KEY) h['vidfarm-api-key'] = API_KEY; return h; }
|
|
2579
|
+
function ivSleep(ms) { return new Promise(function (r) { setTimeout(r, ms); }); }
|
|
2580
|
+
function ivJson(res) { return res.text().then(function (t) { try { return t ? JSON.parse(t) : null; } catch (e) { return null; } }); }
|
|
2581
|
+
async function runCreateVideoFlow(view, intentRaw) {
|
|
2582
|
+
var intent = intentRaw || {};
|
|
2583
|
+
if (!API_KEY) { view.flowResult('⚠️ You need to be logged in to create a video.'); return; }
|
|
2584
|
+
var origin = window.location.origin;
|
|
2585
|
+
|
|
2586
|
+
function pollInspirationReady(id) {
|
|
2587
|
+
var deadline = Date.now() + 5 * 60 * 1000;
|
|
2588
|
+
function step() {
|
|
2589
|
+
return fetch(origin + '/api/v1/videos/' + encodeURIComponent(id), { headers: ivHeaders(false) }).then(ivJson).then(function (j) {
|
|
2590
|
+
var st = String((j && j.status) || '');
|
|
2591
|
+
if (st === 'ready') return j;
|
|
2592
|
+
if (st === 'failed') throw new Error('source video download failed' + ((j && j.error) ? ': ' + j.error : '') + '.');
|
|
2593
|
+
if (Date.now() > deadline) throw new Error('source video download timed out.');
|
|
2594
|
+
return ivSleep(5000).then(step);
|
|
2595
|
+
});
|
|
2596
|
+
}
|
|
2597
|
+
return step();
|
|
2598
|
+
}
|
|
2599
|
+
function jobMediaUrl(job) {
|
|
2600
|
+
function s(v) { return (typeof v === 'string' && v.trim()) ? v.trim() : null; }
|
|
2601
|
+
var result = (job && job.result && typeof job.result === 'object') ? job.result : {};
|
|
2602
|
+
var out = (result.output && typeof result.output === 'object') ? result.output : result;
|
|
2603
|
+
var direct = s(out.primary_file_url) || s(out.video && out.video.file_url) || s(out.image && out.image.file_url) || s(out.render && out.render.output_url);
|
|
2604
|
+
if (direct) return direct;
|
|
2605
|
+
if (out.files && out.files.length) { for (var i = 0; i < out.files.length; i++) { var f = out.files[i]; var u = s(typeof f === 'string' ? f : (f && (f.file_url || f.url))); if (u) return u; } }
|
|
2606
|
+
if (job && job.artifacts && job.artifacts.length) { for (var k = 0; k < job.artifacts.length; k++) { var u2 = s(job.artifacts[k] && job.artifacts[k].public_url); if (u2) return u2; } }
|
|
2607
|
+
return null;
|
|
2608
|
+
}
|
|
2609
|
+
function pollJobMedia(jobId) {
|
|
2610
|
+
var deadline = Date.now() + 8 * 60 * 1000;
|
|
2611
|
+
function step() {
|
|
2612
|
+
return ivSleep(5000).then(function () {
|
|
2613
|
+
return fetch(origin + '/api/v1/user/me/jobs/' + encodeURIComponent(jobId), { headers: ivHeaders(false) }).then(ivJson).then(function (j) {
|
|
2614
|
+
var st = String((j && j.status) || '');
|
|
2615
|
+
var url = jobMediaUrl(j);
|
|
2616
|
+
if (url) return url;
|
|
2617
|
+
if (st === 'failed' || st === 'cancelled') throw new Error('generation ' + st + '.');
|
|
2618
|
+
if (Date.now() > deadline) throw new Error('generation timed out.');
|
|
2619
|
+
return step();
|
|
2620
|
+
});
|
|
2621
|
+
});
|
|
2622
|
+
}
|
|
2623
|
+
return step();
|
|
2624
|
+
}
|
|
2625
|
+
async function ingestGeneratedVideo(mediaUrl, title) {
|
|
2626
|
+
var blob = await (await fetch(mediaUrl)).blob();
|
|
2627
|
+
var presignRes = await fetch(origin + '/discover/templates/upload/presign', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ file_name: 'generated.mp4', content_type: 'video/mp4', size_bytes: blob.size }) });
|
|
2628
|
+
var presign = await ivJson(presignRes);
|
|
2629
|
+
if (!presignRes.ok) throw new Error((presign && presign.error) || ('upload presign failed (' + presignRes.status + ')'));
|
|
2630
|
+
var storageKey = presign && presign.storage_key;
|
|
2631
|
+
var uploadedName = (presign && presign.file_name) || 'generated.mp4';
|
|
2632
|
+
if (presign && presign.transport === 'presigned' && presign.upload && presign.upload.url) {
|
|
2633
|
+
var put = await fetch(presign.upload.url, { method: (presign.upload.method || 'PUT'), headers: presign.upload.headers || {}, body: blob });
|
|
2634
|
+
if (!put.ok) throw new Error('upload failed (' + put.status + ')');
|
|
2635
|
+
} else {
|
|
2636
|
+
var form = new FormData(); form.append('file', blob, 'generated.mp4');
|
|
2637
|
+
var up = await fetch(origin + ((presign && presign.upload && presign.upload.url) || '/discover/templates/upload'), { method: 'POST', headers: ivHeaders(false), body: form });
|
|
2638
|
+
var upJson = await ivJson(up);
|
|
2639
|
+
if (!up.ok || !upJson || !upJson.storage_key) throw new Error((upJson && upJson.error) || ('upload failed (' + up.status + ')'));
|
|
2640
|
+
storageKey = upJson.storage_key; uploadedName = upJson.file_name || 'generated.mp4';
|
|
2641
|
+
}
|
|
2642
|
+
if (!storageKey) throw new Error('upload did not return a storage key.');
|
|
2643
|
+
var addRes = await fetch(origin + '/discover/templates', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ upload: { storage_key: storageKey, file_name: uploadedName }, title: title, origin: 'raw' }) });
|
|
2644
|
+
var add = await ivJson(addRes);
|
|
2645
|
+
if (!addRes.ok) throw new Error((add && add.error) || ('ingest failed (' + addRes.status + ')'));
|
|
2646
|
+
return add;
|
|
2647
|
+
}
|
|
2648
|
+
|
|
2649
|
+
try {
|
|
2650
|
+
var mode = intent.mode === 'replicate' ? 'replicate' : (intent.mode === 'generate' ? 'generate' : null);
|
|
2651
|
+
var inspiration, userPrompt;
|
|
2652
|
+
if (mode === 'replicate') {
|
|
2653
|
+
var sourceUrl = String(intent.source_url || '').trim();
|
|
2654
|
+
if (!/^https?:\/\//i.test(sourceUrl)) { view.flowResult('⚠️ I need a video URL (TikTok/YouTube/Instagram/X) to replicate.'); return; }
|
|
2655
|
+
userPrompt = String(intent.instructions || '').trim() || null;
|
|
2656
|
+
view.flowStatus('Fetching the source video…');
|
|
2657
|
+
var addRes = await fetch(origin + '/discover/templates', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ source_url: sourceUrl }) });
|
|
2658
|
+
var add = await ivJson(addRes);
|
|
2659
|
+
if (!addRes.ok) throw new Error((add && add.error) || ("couldn't fetch that URL (" + addRes.status + ')'));
|
|
2660
|
+
inspiration = (add && add.status === 'ready') ? add : await pollInspirationReady(add && add.inspiration_id);
|
|
2661
|
+
} else if (mode === 'generate') {
|
|
2662
|
+
var prompt = String(intent.prompt || '').trim();
|
|
2663
|
+
if (!prompt) { view.flowResult("⚠️ Tell me what the video should be about and I'll create it."); return; }
|
|
2664
|
+
userPrompt = prompt;
|
|
2665
|
+
view.flowStatus('Generating your video… (this can take a couple of minutes)');
|
|
2666
|
+
var genRes = await fetch(origin + '/api/v1/primitives/videos/generate', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ tracer: 'chat-create-' + Date.now().toString(36), payload: { prompt: prompt } }) });
|
|
2667
|
+
var gen = await ivJson(genRes);
|
|
2668
|
+
if (!genRes.ok) throw new Error((gen && gen.error) || ("couldn't start generation (" + genRes.status + ')'));
|
|
2669
|
+
var mediaUrl = await pollJobMedia(gen && gen.job_id);
|
|
2670
|
+
view.flowStatus('Building an editable template from the generated video…');
|
|
2671
|
+
var add2 = await ingestGeneratedVideo(mediaUrl, prompt.slice(0, 80));
|
|
2672
|
+
inspiration = (add2 && add2.status === 'ready') ? add2 : await pollInspirationReady(add2 && add2.inspiration_id);
|
|
2673
|
+
} else {
|
|
2674
|
+
view.flowResult("⚠️ I couldn't tell whether to generate a new video or replicate a URL — try rephrasing.");
|
|
2675
|
+
return;
|
|
2676
|
+
}
|
|
2677
|
+
var templateId = inspiration && inspiration.template_id;
|
|
2678
|
+
var inspirationId = inspiration && inspiration.inspiration_id;
|
|
2679
|
+
if (!templateId || !inspirationId) throw new Error("the template wasn't created from the video.");
|
|
2680
|
+
view.flowStatus(mode === 'replicate' ? 'Recreating the scenes… (about a minute)' : 'Analyzing into an editable timeline…');
|
|
2681
|
+
var decRes = await fetch(origin + '/api/v1/inspirations/' + encodeURIComponent(inspirationId) + '/decompose', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ user_prompt: userPrompt }) });
|
|
2682
|
+
if (!decRes.ok) { var dec = await ivJson(decRes); throw new Error((dec && dec.error) || ('scene analysis failed (' + decRes.status + ')')); }
|
|
2683
|
+
view.flowStatus('Finalizing your editable copy…');
|
|
2684
|
+
var forkRes = await fetch(origin + '/api/v1/compositions', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ template_id: templateId }) });
|
|
2685
|
+
var fork = await ivJson(forkRes);
|
|
2686
|
+
if (!forkRes.ok) throw new Error((fork && fork.error) || ("couldn't create an editable copy (" + forkRes.status + ')'));
|
|
2687
|
+
var forkId = fork && fork.fork_id;
|
|
2688
|
+
var editorUrl = origin + '/editor/' + encodeURIComponent(templateId) + (forkId ? '/fork/' + encodeURIComponent(forkId) : '');
|
|
2689
|
+
view.flowResult('✅ Your video is ready — [Open it in the editor](' + editorUrl + ').');
|
|
2690
|
+
} catch (error) {
|
|
2691
|
+
view.flowResult('⚠️ I couldn’t finish creating the video: ' + ((error && error.message) ? error.message : String(error)));
|
|
2692
|
+
}
|
|
2693
|
+
}
|
|
2694
|
+
|
|
2695
|
+
// ─── Files drawer ───
|
|
2696
|
+
// Directory browsing lives in the reusable component (src/frontend/file-directory.ts),
|
|
2697
|
+
// auto-mounted into #rkAichatFilesMount by /assets/file-directory-app.js. This
|
|
2698
|
+
// inline script only owns the chat-side glue: the attach chips + preview modal.
|
|
2699
|
+
// We expose those to the component as host hooks BEFORE the deferred module runs
|
|
2700
|
+
// (this classic <script> executes during parse, ahead of the module).
|
|
2701
|
+
var chipsEl = document.getElementById('rkAichatChips');
|
|
2702
|
+
var filesToggle = document.getElementById('rkFilesToggle');
|
|
2703
|
+
var historyToggle = document.getElementById('rkHistoryToggle');
|
|
2704
|
+
var newChatBtn = document.getElementById('rkNewChat');
|
|
2705
|
+
if (newChatBtn) newChatBtn.addEventListener('click', function () { if (!busy) newChat(); });
|
|
2706
|
+
// Copy the current chat thread id (handy for support / linking a conversation).
|
|
2707
|
+
// threadId is minted up-front, so this always has a real id to copy.
|
|
2708
|
+
var copyThreadBtn = document.getElementById('rkCopyThread');
|
|
2709
|
+
if (copyThreadBtn) copyThreadBtn.addEventListener('click', function () {
|
|
2710
|
+
var prevTitle = copyThreadBtn.title;
|
|
2711
|
+
copyText(String(threadId));
|
|
2712
|
+
copyThreadBtn.title = 'Copied chat ID';
|
|
2713
|
+
copyThreadBtn.classList.add('is-on');
|
|
2714
|
+
setTimeout(function () { copyThreadBtn.title = prevTitle; copyThreadBtn.classList.remove('is-on'); }, 1400);
|
|
2715
|
+
});
|
|
2716
|
+
var histBody = document.getElementById('rkAichatHistBody');
|
|
2717
|
+
var selected = [];
|
|
2718
|
+
window.__rkDirectoryHost = {
|
|
2719
|
+
onAttach: function (items) { (items || []).forEach(function (it) { attachFile(it); }); },
|
|
2720
|
+
onPreview: function (items, i) { openFilePreview(items || [], i || 0); }
|
|
2721
|
+
};
|
|
2722
|
+
function refreshFiles() { if (window.__rkDirectoryInstance) window.__rkDirectoryInstance.refresh(); }
|
|
2723
|
+
|
|
2724
|
+
// Editor dock "Back to Library": leave the editor cleanly — clear the persisted
|
|
2725
|
+
// open-state so the destination page loads with the chat panel closed and on a
|
|
2726
|
+
// fresh chat, then navigate. (Real anchor href="/library" is the fallback.)
|
|
2727
|
+
var backBtn = document.getElementById('rkAichatBack');
|
|
2728
|
+
if (backBtn) backBtn.addEventListener('click', function (e) {
|
|
2729
|
+
try { sessionStorage.removeItem('rk-chat-open'); } catch (err) {}
|
|
2730
|
+
e.preventDefault();
|
|
2731
|
+
window.location.assign('/library');
|
|
2732
|
+
});
|
|
2733
|
+
|
|
2734
|
+
// Lightweight transient toast for editor-dock timeline placement feedback.
|
|
2735
|
+
function editorPlaceToast(msg, isErr) {
|
|
2736
|
+
try {
|
|
2737
|
+
var t = document.createElement('div');
|
|
2738
|
+
t.textContent = msg;
|
|
2739
|
+
t.style.cssText = 'position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;'
|
|
2740
|
+
+ 'padding:9px 15px;border-radius:10px;font:600 13px/1.3 var(--rk-font-body,system-ui);'
|
|
2741
|
+
+ 'color:' + (isErr ? '#fff' : '#1a1500') + ';background:' + (isErr ? '#b23b3b' : 'var(--rk-gold-600,#e5a400)') + ';'
|
|
2742
|
+
+ 'box-shadow:0 6px 24px rgba(0,0,0,.28);max-width:min(420px,90vw);text-align:center;pointer-events:none;'
|
|
2743
|
+
+ 'opacity:0;transition:opacity .18s ease,transform .18s ease';
|
|
2744
|
+
document.body.appendChild(t);
|
|
2745
|
+
requestAnimationFrame(function () { t.style.opacity = '1'; t.style.transform = 'translateX(-50%) translateY(-4px)'; });
|
|
2746
|
+
setTimeout(function () { t.style.opacity = '0'; setTimeout(function () { if (t.parentNode) t.parentNode.removeChild(t); }, 220); }, 2200);
|
|
2747
|
+
} catch (e) {}
|
|
2748
|
+
}
|
|
2749
|
+
|
|
2750
|
+
function attachFile(it) {
|
|
2751
|
+
// In the /editor dock the "+"/Attach means "drop this file onto the timeline
|
|
2752
|
+
// at the current playhead", NOT "attach to chat" (which is what it means
|
|
2753
|
+
// everywhere else). Route placeable media through the SPA editor bridge; only
|
|
2754
|
+
// fall through to chat-attach for folders / non-placeable files.
|
|
2755
|
+
if (isEditorDock && it && it.viewUrl) {
|
|
2756
|
+
var bridge = (typeof window !== 'undefined') ? window.__vidfarmEditorAction : null;
|
|
2757
|
+
if (bridge && typeof bridge.placeMediaAtPlayhead === 'function') {
|
|
2758
|
+
var res = bridge.placeMediaAtPlayhead({ url: it.viewUrl, name: it.name, contentType: it.contentType });
|
|
2759
|
+
if (res && res.ok) { editorPlaceToast('Added \u201c' + (it.name || 'media') + '\u201d to the timeline'); return; }
|
|
2760
|
+
// Non-placeable (folder / doc / not-ready): fall through to chat-attach.
|
|
2761
|
+
}
|
|
2762
|
+
}
|
|
2763
|
+
// Files-only drawer (opened from the /chat page) has no chat composer of its
|
|
2764
|
+
// own — hand the picked file to the /chat page's composer via a DOM event.
|
|
2765
|
+
if (panel.classList.contains('is-files-only')) {
|
|
2766
|
+
try {
|
|
2767
|
+
document.dispatchEvent(new CustomEvent('rk-chat-attach-file', { detail: {
|
|
2768
|
+
id: String(it.id), name: it.name || 'file',
|
|
2769
|
+
contentType: it.contentType || 'application/octet-stream', viewUrl: it.viewUrl || ''
|
|
2770
|
+
} }));
|
|
2771
|
+
} catch (e) {}
|
|
2772
|
+
return;
|
|
2773
|
+
}
|
|
2774
|
+
if (selected.some(function (f) { return f.id === it.id; })) { flashChip(it.id); return; }
|
|
2775
|
+
selected.push(it);
|
|
2776
|
+
renderChips();
|
|
2777
|
+
if (input) input.focus();
|
|
2778
|
+
}
|
|
2779
|
+
function renderChips() {
|
|
2780
|
+
if (!chipsEl) return;
|
|
2781
|
+
chipsEl.innerHTML = '';
|
|
2782
|
+
selected.forEach(function (f, i) {
|
|
2783
|
+
var chip = document.createElement('span');
|
|
2784
|
+
chip.className = 'rk-aichat-chip' + (f.pending ? ' is-pending' : '');
|
|
2785
|
+
chip.setAttribute('data-id', f.id);
|
|
2786
|
+
if (f.pending) { var sp = document.createElement('span'); sp.className = 'rk-aichat-chip-spin'; sp.setAttribute('aria-hidden', 'true'); chip.appendChild(sp); }
|
|
2787
|
+
var label = document.createElement('button');
|
|
2788
|
+
label.type = 'button';
|
|
2789
|
+
label.className = 'rk-aichat-chip-label';
|
|
2790
|
+
label.title = f.pending ? 'Uploading ' + f.name + '…' : 'Preview ' + f.name;
|
|
2791
|
+
label.textContent = f.name;
|
|
2792
|
+
if (f.viewUrl && !f.pending) label.addEventListener('click', function () { openFilePreview(selected.filter(function (s) { return !s.pending; }), selected.filter(function (s) { return !s.pending; }).indexOf(f)); });
|
|
2793
|
+
var x = document.createElement('button');
|
|
2794
|
+
x.type = 'button';
|
|
2795
|
+
x.setAttribute('aria-label', 'Remove ' + f.name);
|
|
2796
|
+
x.textContent = '×';
|
|
2797
|
+
x.addEventListener('click', function () {
|
|
2798
|
+
selected = selected.filter(function (s) { return s.id !== f.id; });
|
|
2799
|
+
renderChips();
|
|
2800
|
+
});
|
|
2801
|
+
chip.appendChild(label); chip.appendChild(x);
|
|
2802
|
+
chipsEl.appendChild(chip);
|
|
2803
|
+
});
|
|
2804
|
+
}
|
|
2805
|
+
function flashChip(id) {
|
|
2806
|
+
var chip = chipsEl && chipsEl.querySelector('[data-id="' + id + '"]');
|
|
2807
|
+
if (!chip) return;
|
|
2808
|
+
chip.style.transition = 'none';
|
|
2809
|
+
chip.style.transform = 'scale(1.08)';
|
|
2810
|
+
setTimeout(function () { chip.style.transition = 'transform .18s'; chip.style.transform = 'none'; }, 20);
|
|
2811
|
+
}
|
|
2812
|
+
function clearChips() { selected = []; renderChips(); }
|
|
2813
|
+
|
|
2814
|
+
// ─── left drawer mode: 'files' | 'history' | 'cloud' | '' (closed) ─────────
|
|
2815
|
+
// Files, Chat history, and Cloud status share the one left slot, so only one
|
|
2816
|
+
// shows at a time.
|
|
2817
|
+
function leftMode() {
|
|
2818
|
+
if (panel.classList.contains('has-history')) return 'history';
|
|
2819
|
+
if (panel.classList.contains('has-cloud')) return 'cloud';
|
|
2820
|
+
if (panel.classList.contains('has-files')) return 'files';
|
|
2821
|
+
return '';
|
|
2822
|
+
}
|
|
2823
|
+
function filesOpen() { return leftMode() === 'files'; }
|
|
2824
|
+
function setLeftMode(mode) {
|
|
2825
|
+
panel.classList.toggle('has-files', mode === 'files');
|
|
2826
|
+
panel.classList.toggle('has-history', mode === 'history');
|
|
2827
|
+
panel.classList.toggle('has-cloud', mode === 'cloud');
|
|
2828
|
+
if (filesToggle) {
|
|
2829
|
+
filesToggle.classList.toggle('is-on', mode === 'files');
|
|
2830
|
+
filesToggle.setAttribute('aria-pressed', mode === 'files' ? 'true' : 'false');
|
|
2831
|
+
}
|
|
2832
|
+
if (historyToggle) {
|
|
2833
|
+
historyToggle.classList.toggle('is-on', mode === 'history');
|
|
2834
|
+
historyToggle.setAttribute('aria-pressed', mode === 'history' ? 'true' : 'false');
|
|
2835
|
+
}
|
|
2836
|
+
if (cloudToggle) {
|
|
2837
|
+
cloudToggle.classList.toggle('is-on', mode === 'cloud');
|
|
2838
|
+
cloudToggle.setAttribute('aria-pressed', mode === 'cloud' ? 'true' : 'false');
|
|
2839
|
+
}
|
|
2840
|
+
var caBtn = document.getElementById('rkAichatAttach');
|
|
2841
|
+
if (caBtn) {
|
|
2842
|
+
caBtn.classList.toggle('is-on', mode === 'files');
|
|
2843
|
+
caBtn.setAttribute('aria-pressed', mode === 'files' ? 'true' : 'false');
|
|
2844
|
+
}
|
|
2845
|
+
try { localStorage.setItem('rk-left-mode', mode); } catch (e) {}
|
|
2846
|
+
if (mode === 'files') refreshFiles();
|
|
2847
|
+
if (mode === 'history') loadThreads();
|
|
2848
|
+
if (mode === 'cloud') loadTasks();
|
|
2849
|
+
if (!panel.hidden) anchorPanel();
|
|
2850
|
+
}
|
|
2851
|
+
function refreshFilesOnOpen() {
|
|
2852
|
+
// Re-fetch the current folder so listings are fresh when the drawer opens.
|
|
2853
|
+
if (filesOpen()) refreshFiles();
|
|
2854
|
+
}
|
|
2855
|
+
|
|
2856
|
+
// ─── Chat history — REAL editor-chat threads (past conversations) ──────────
|
|
2857
|
+
var threads = [], threadsState = 'idle', loadingThread = false;
|
|
2858
|
+
function authHeaders() { var h = { accept: 'application/json' }; if (API_KEY) h['vidfarm-api-key'] = API_KEY; return h; }
|
|
2859
|
+
function relTime(iso) {
|
|
2860
|
+
if (!iso) return '';
|
|
2861
|
+
var t = Date.parse(iso); if (isNaN(t)) return '';
|
|
2862
|
+
var s = Math.max(0, (Date.now() - t) / 1000);
|
|
2863
|
+
if (s < 60) return 'just now';
|
|
2864
|
+
if (s < 3600) return Math.floor(s / 60) + 'm ago';
|
|
2865
|
+
if (s < 86400) return Math.floor(s / 3600) + 'h ago';
|
|
2866
|
+
if (s < 604800) return Math.floor(s / 86400) + 'd ago';
|
|
2867
|
+
try { return new Date(t).toLocaleDateString([], { month: 'short', day: 'numeric' }); } catch (e) { return ''; }
|
|
2868
|
+
}
|
|
2869
|
+
function histNote(text, opts) {
|
|
2870
|
+
var wrap = document.createElement('div'); wrap.className = 'rk-aichat-fstate';
|
|
2871
|
+
var p = document.createElement('div'); p.textContent = text; wrap.appendChild(p);
|
|
2872
|
+
if (opts && opts.href) { var a = document.createElement('a'); a.href = opts.href; a.textContent = opts.linkText || 'Open'; wrap.appendChild(a); }
|
|
2873
|
+
if (opts && opts.retry) { var b = document.createElement('button'); b.type = 'button'; b.textContent = 'Try again'; b.addEventListener('click', function () { loadThreads(); }); wrap.appendChild(b); }
|
|
2874
|
+
return wrap;
|
|
2875
|
+
}
|
|
2876
|
+
function setActiveThread(id) {
|
|
2877
|
+
threadId = id;
|
|
2878
|
+
if (!histBody) return;
|
|
2879
|
+
var rows = histBody.querySelectorAll('.rk-aichat-frow');
|
|
2880
|
+
for (var i = 0; i < rows.length; i++) rows[i].classList.toggle('is-active', rows[i].getAttribute('data-id') === id);
|
|
2881
|
+
}
|
|
2882
|
+
function threadRow(t) {
|
|
2883
|
+
var b = document.createElement('button');
|
|
2884
|
+
b.type = 'button';
|
|
2885
|
+
b.className = 'rk-aichat-frow' + (t.id === threadId ? ' is-active' : '');
|
|
2886
|
+
b.setAttribute('data-id', t.id);
|
|
2887
|
+
var ic = document.createElement('span');
|
|
2888
|
+
ic.className = 'rk-aichat-fic rk-aichat-fic-file';
|
|
2889
|
+
ic.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>';
|
|
2890
|
+
var main = document.createElement('span'); main.className = 'rk-aichat-fmain';
|
|
2891
|
+
var name = document.createElement('span'); name.className = 'rk-aichat-fname'; name.textContent = t.title || 'Untitled chat';
|
|
2892
|
+
var count = (typeof t.messageCount === 'number') ? t.messageCount : 0;
|
|
2893
|
+
var when = relTime(t.lastMessageAt || t.updatedAt);
|
|
2894
|
+
var meta = document.createElement('span'); meta.className = 'rk-aichat-fmeta';
|
|
2895
|
+
meta.textContent = (count ? count + ' message' + (count === 1 ? '' : 's') : '') + ((count && when) ? ' · ' : '') + (when || '');
|
|
2896
|
+
main.appendChild(name); main.appendChild(meta);
|
|
2897
|
+
var del = document.createElement('button');
|
|
2898
|
+
del.type = 'button'; del.className = 'rk-aichat-fadd'; del.setAttribute('aria-label', 'Delete chat'); del.textContent = '×';
|
|
2899
|
+
del.addEventListener('click', function (ev) { ev.stopPropagation(); deleteThread(t.id, b); });
|
|
2900
|
+
b.appendChild(ic); b.appendChild(main); b.appendChild(del);
|
|
2901
|
+
b.addEventListener('click', function () { openThread(t.id); });
|
|
2902
|
+
return b;
|
|
2903
|
+
}
|
|
2904
|
+
function renderHistory() {
|
|
2905
|
+
if (!histBody) return;
|
|
2906
|
+
histBody.innerHTML = '';
|
|
2907
|
+
if (BOOT_STATE === 'anon') { histBody.appendChild(histNote('Sign in to sync your saved chats.', { href: '/login', linkText: 'Sign in' })); return; }
|
|
2908
|
+
if (threadsState === 'loading' && !threads.length) { histBody.appendChild(histNote('Loading your chats…')); return; }
|
|
2909
|
+
if (threadsState === 'auth') { histBody.appendChild(histNote('Sign in to sync your saved chats.', { href: '/login', linkText: 'Sign in' })); return; }
|
|
2910
|
+
if (threadsState === 'error') { histBody.appendChild(histNote('Couldn’t load your chats.', { retry: true })); return; }
|
|
2911
|
+
if (!threads.length) { histBody.appendChild(histNote('No conversations yet. Start one below — it saves automatically.')); return; }
|
|
2912
|
+
for (var i = 0; i < threads.length; i++) histBody.appendChild(threadRow(threads[i]));
|
|
2913
|
+
}
|
|
2914
|
+
function loadThreads() {
|
|
2915
|
+
if (!histBody) return;
|
|
2916
|
+
if (BOOT_STATE === 'anon') { renderHistory(); return; }
|
|
2917
|
+
if (BOOT_STATE !== 'ready') { loadBoot(); return; } // loadBoot() calls back into loadThreads() when ready
|
|
2918
|
+
threadsState = 'loading'; renderHistory();
|
|
2919
|
+
var url = THREADS_URL + '?template_id=' + encodeURIComponent(TEMPLATE_ID) + '&limit=30&include_messages=false';
|
|
2920
|
+
fetch(url, { headers: authHeaders(), credentials: 'same-origin' })
|
|
2921
|
+
.then(function (r) {
|
|
2922
|
+
if (r.status === 401 || r.status === 403) { threadsState = 'auth'; return null; }
|
|
2923
|
+
if (!r.ok) throw new Error('http ' + r.status);
|
|
2924
|
+
return r.json();
|
|
2925
|
+
})
|
|
2926
|
+
.then(function (j) {
|
|
2927
|
+
if (!j) { renderHistory(); return; }
|
|
2928
|
+
threads = (j && j.threads) || []; threadsState = 'ready'; renderHistory();
|
|
2929
|
+
})
|
|
2930
|
+
.catch(function () { threadsState = 'error'; renderHistory(); });
|
|
2931
|
+
}
|
|
2932
|
+
function openThread(id) {
|
|
2933
|
+
if (busy || loadingThread) return;
|
|
2934
|
+
loadingThread = true;
|
|
2935
|
+
fetch(THREADS_URL + '/' + encodeURIComponent(id), { headers: authHeaders(), credentials: 'same-origin' })
|
|
2936
|
+
.then(function (r) { if (!r.ok) throw new Error('http ' + r.status); return r.json(); })
|
|
2937
|
+
.then(function (j) {
|
|
2938
|
+
var t = j && j.thread; if (!t) throw new Error('missing thread');
|
|
2939
|
+
convo = []; rkPolledJobs = {}; if (log) log.innerHTML = '';
|
|
2940
|
+
var msgs = t.messages || [];
|
|
2941
|
+
for (var i = 0; i < msgs.length; i++) {
|
|
2942
|
+
var m = msgs[i], role = (m.role === 'assistant') ? 'assistant' : 'user', txt = m.text || '';
|
|
2943
|
+
convo.push({ role: role, text: txt });
|
|
2944
|
+
if (role === 'user') { bubble('is-user', txt); }
|
|
2945
|
+
else {
|
|
2946
|
+
var v = appendAssistant();
|
|
2947
|
+
var ex = m.httpExchanges || [];
|
|
2948
|
+
for (var k = 0; k < ex.length; k++) { if (ex[k] && ex[k].request && ex[k].response) v.addHttp(ex[k]); }
|
|
2949
|
+
v.showText(); v.setText(txt); v.hideStatus(); v.renderMd();
|
|
2950
|
+
// Re-hydrate finished job output (not stored in the transcript) by
|
|
2951
|
+
// scanning this turn's text + tool calls for job ids and polling them.
|
|
2952
|
+
var jids = rkExtractJobIds(txt);
|
|
2953
|
+
for (var e2 = 0; e2 < ex.length; e2++) { rkJobIdsFromExchange(ex[e2]).forEach(function (id) { if (jids.indexOf(id) < 0) jids.push(id); }); }
|
|
2954
|
+
(function (view) { jids.forEach(function (id) { rkPollJob(view, id); }); })(v);
|
|
2955
|
+
}
|
|
2956
|
+
}
|
|
2957
|
+
setActiveThread(id);
|
|
2958
|
+
loadingThread = false;
|
|
2959
|
+
logBottom();
|
|
2960
|
+
if (input) input.focus();
|
|
2961
|
+
})
|
|
2962
|
+
.catch(function () { loadingThread = false; });
|
|
2963
|
+
}
|
|
2964
|
+
function deleteThread(id, row) {
|
|
2965
|
+
if (!API_KEY) return;
|
|
2966
|
+
fetch(THREADS_URL + '/' + encodeURIComponent(id), { method: 'DELETE', headers: authHeaders(), credentials: 'same-origin' })
|
|
2967
|
+
.then(function (r) {
|
|
2968
|
+
if (!r.ok && r.status !== 404) throw new Error('http ' + r.status);
|
|
2969
|
+
threads = threads.filter(function (t) { return t.id !== id; });
|
|
2970
|
+
if (id === threadId) resetConversation();
|
|
2971
|
+
renderHistory();
|
|
2972
|
+
})
|
|
2973
|
+
.catch(function () {});
|
|
2974
|
+
}
|
|
2975
|
+
|
|
2976
|
+
// ─── Cloud status — the customer's long-lived async work (imports, forks,
|
|
2977
|
+
// renders, jobs). Read from /me/tasks; polled every 4s while the drawer is open
|
|
2978
|
+
// and anything is still running. Exposed as window.__vidfarmCloudStatus so any
|
|
2979
|
+
// page (e.g. a raws import) can pop it open and highlight the fresh task. ──────
|
|
2980
|
+
var cloudToggle = document.getElementById('rkCloudToggle');
|
|
2981
|
+
var cloudBody = document.getElementById('rkCloudBody');
|
|
2982
|
+
var cloudFilters = document.getElementById('rkCloudFilters');
|
|
2983
|
+
var cloudDot = document.getElementById('rkCloudDot');
|
|
2984
|
+
var cloudRefresh = document.getElementById('rkCloudRefresh');
|
|
2985
|
+
var TASKS_URL = '/api/v1/user/me/tasks';
|
|
2986
|
+
var tasks = [], tasksState = 'idle', taskFilter = 'all';
|
|
2987
|
+
var taskCounts = { all: 0, running: 0, done: 0, error: 0, queued: 0 };
|
|
2988
|
+
var highlightTaskId = null, tasksTimer = null, tasksLoadSeq = 0;
|
|
2989
|
+
var sidebarCloud = document.getElementById('rkSidebarCloud');
|
|
2990
|
+
var sidebarTimer = null, sidebarStarted = false;
|
|
2991
|
+
|
|
2992
|
+
function taskStatusMeta(status) {
|
|
2993
|
+
if (status === 'running') return { label: 'Running', cls: 'is-running', glyph: '●' };
|
|
2994
|
+
if (status === 'queued') return { label: 'Queued', cls: 'is-queued', glyph: '○' };
|
|
2995
|
+
if (status === 'done') return { label: 'Done', cls: 'is-done', glyph: '✓' };
|
|
2996
|
+
if (status === 'error') return { label: 'Error', cls: 'is-error', glyph: '⚠' };
|
|
2997
|
+
return { label: status || '', cls: '', glyph: '' };
|
|
2998
|
+
}
|
|
2999
|
+
function taskKindLabel(kind) {
|
|
3000
|
+
if (kind === 'render') return 'Render';
|
|
3001
|
+
if (kind === 'import') return 'Import';
|
|
3002
|
+
if (kind === 'fork') return 'Fork';
|
|
3003
|
+
return 'Job';
|
|
3004
|
+
}
|
|
3005
|
+
function renderCloudFilters() {
|
|
3006
|
+
if (!cloudFilters) return;
|
|
3007
|
+
var btns = cloudFilters.querySelectorAll('.rk-cloud-fbtn');
|
|
3008
|
+
for (var i = 0; i < btns.length; i++) {
|
|
3009
|
+
var f = btns[i].getAttribute('data-f');
|
|
3010
|
+
var base = f === 'all' ? 'All' : f === 'running' ? 'Running' : f === 'done' ? 'Done' : 'Error';
|
|
3011
|
+
var n = (f === 'all') ? (taskCounts.all || 0) : (taskCounts[f] || 0);
|
|
3012
|
+
btns[i].textContent = base + (n ? ' ' + n : '');
|
|
3013
|
+
btns[i].classList.toggle('is-on', f === taskFilter);
|
|
3014
|
+
}
|
|
3015
|
+
}
|
|
3016
|
+
function cloudNote(text, opts) {
|
|
3017
|
+
var wrap = document.createElement('div'); wrap.className = 'rk-aichat-fstate';
|
|
3018
|
+
var p = document.createElement('div'); p.textContent = text; wrap.appendChild(p);
|
|
3019
|
+
if (opts && opts.href) { var a = document.createElement('a'); a.href = opts.href; a.textContent = opts.linkText || 'Open'; wrap.appendChild(a); }
|
|
3020
|
+
if (opts && opts.retry) { var b = document.createElement('button'); b.type = 'button'; b.textContent = 'Try again'; b.addEventListener('click', function () { loadTasks(); }); wrap.appendChild(b); }
|
|
3021
|
+
return wrap;
|
|
3022
|
+
}
|
|
3023
|
+
function taskRow(t) {
|
|
3024
|
+
var row = document.createElement('div');
|
|
3025
|
+
row.className = 'rk-cloud-row rk-cloud-' + (t.status || '');
|
|
3026
|
+
row.setAttribute('data-id', t.id || '');
|
|
3027
|
+
if (t.id && t.id === highlightTaskId) row.classList.add('is-highlight');
|
|
3028
|
+
var meta = taskStatusMeta(t.status);
|
|
3029
|
+
var ic = document.createElement('span');
|
|
3030
|
+
ic.className = 'rk-cloud-ic ' + meta.cls;
|
|
3031
|
+
ic.textContent = meta.glyph;
|
|
3032
|
+
var main = document.createElement('span'); main.className = 'rk-cloud-main';
|
|
3033
|
+
var name = document.createElement('span'); name.className = 'rk-cloud-name';
|
|
3034
|
+
name.textContent = t.label || taskKindLabel(t.kind);
|
|
3035
|
+
var sub = document.createElement('span'); sub.className = 'rk-cloud-sub';
|
|
3036
|
+
var when = relTime(t.updated_at || t.created_at);
|
|
3037
|
+
var bits = [taskKindLabel(t.kind)];
|
|
3038
|
+
if (t.detail) bits.push(t.detail);
|
|
3039
|
+
if (when) bits.push(when);
|
|
3040
|
+
sub.textContent = bits.join(' · ');
|
|
3041
|
+
main.appendChild(name); main.appendChild(sub);
|
|
3042
|
+
var right = document.createElement('span'); right.className = 'rk-cloud-right';
|
|
3043
|
+
var pill = document.createElement('span'); pill.className = 'rk-cloud-pill ' + meta.cls; pill.textContent = meta.label;
|
|
3044
|
+
right.appendChild(pill);
|
|
3045
|
+
if (t.id) {
|
|
3046
|
+
// Arrow now opens the Cloud Task Status page (details / error / result link)
|
|
3047
|
+
// rather than jumping straight to the raw output.
|
|
3048
|
+
var open = document.createElement('a');
|
|
3049
|
+
open.className = 'rk-cloud-open'; open.href = '/cloud/task/' + encodeURIComponent(t.id);
|
|
3050
|
+
open.title = 'View task details'; open.setAttribute('aria-label', 'View task details');
|
|
3051
|
+
open.innerHTML = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>';
|
|
3052
|
+
open.addEventListener('click', function (e) { e.stopPropagation(); });
|
|
3053
|
+
right.appendChild(open);
|
|
3054
|
+
}
|
|
3055
|
+
if (t.error) { row.title = t.error; }
|
|
3056
|
+
row.appendChild(ic); row.appendChild(main); row.appendChild(right);
|
|
3057
|
+
return row;
|
|
3058
|
+
}
|
|
3059
|
+
function renderTasks() {
|
|
3060
|
+
if (!cloudBody) return;
|
|
3061
|
+
renderCloudFilters();
|
|
3062
|
+
cloudBody.innerHTML = '';
|
|
3063
|
+
if (BOOT_STATE === 'anon' || tasksState === 'anon') { cloudBody.appendChild(cloudNote('Sign in to see your cloud tasks.', { href: '/login', linkText: 'Sign in' })); return; }
|
|
3064
|
+
if (tasksState === 'loading' && !tasks.length) { cloudBody.appendChild(cloudNote('Loading your cloud tasks…')); return; }
|
|
3065
|
+
if (tasksState === 'auth') { cloudBody.appendChild(cloudNote('Sign in to see your cloud tasks.', { href: '/login', linkText: 'Sign in' })); return; }
|
|
3066
|
+
if (tasksState === 'error') { cloudBody.appendChild(cloudNote('Couldn’t load your cloud tasks.', { retry: true })); return; }
|
|
3067
|
+
var list = tasks.filter(function (t) { return taskFilter === 'all' || t.status === taskFilter; });
|
|
3068
|
+
if (!list.length) {
|
|
3069
|
+
cloudBody.appendChild(cloudNote(taskFilter === 'all' ? 'No cloud tasks yet. Imports, forks, and renders show up here.' : 'No ' + taskFilter + ' tasks.'));
|
|
3070
|
+
return;
|
|
3071
|
+
}
|
|
3072
|
+
var hi = null;
|
|
3073
|
+
for (var i = 0; i < list.length; i++) { var r = taskRow(list[i]); cloudBody.appendChild(r); if (r.classList.contains('is-highlight')) hi = r; }
|
|
3074
|
+
if (hi && hi.scrollIntoView) { try { hi.scrollIntoView({ block: 'nearest' }); } catch (e) {} }
|
|
3075
|
+
}
|
|
3076
|
+
function updateCloudDot() { if (cloudDot) cloudDot.hidden = (taskCounts.running || 0) <= 0; }
|
|
3077
|
+
function scheduleTaskPoll() {
|
|
3078
|
+
if (tasksTimer) { clearTimeout(tasksTimer); tasksTimer = null; }
|
|
3079
|
+
// Keep polling only while there's live work AND the drawer is showing.
|
|
3080
|
+
if ((taskCounts.running || taskCounts.queued) && leftMode() === 'cloud' && !panel.hidden) {
|
|
3081
|
+
tasksTimer = setTimeout(function () { loadTasks({ silent: true }); }, 4000);
|
|
3082
|
+
}
|
|
3083
|
+
}
|
|
3084
|
+
function loadTasks(opts) {
|
|
3085
|
+
opts = opts || {};
|
|
3086
|
+
if (!cloudBody) return;
|
|
3087
|
+
if (BOOT_STATE === 'anon') { tasksState = 'anon'; renderTasks(); return; }
|
|
3088
|
+
if (BOOT_STATE !== 'ready') { loadBoot(); return; } // loadBoot() calls back into loadTasks() when ready
|
|
3089
|
+
if (!opts.silent) { tasksState = 'loading'; renderTasks(); }
|
|
3090
|
+
var seq = ++tasksLoadSeq;
|
|
3091
|
+
fetch(TASKS_URL + '?limit=80', { headers: authHeaders(), credentials: 'same-origin' })
|
|
3092
|
+
.then(function (r) {
|
|
3093
|
+
if (r.status === 401 || r.status === 403) { tasksState = 'auth'; return null; }
|
|
3094
|
+
if (!r.ok) throw new Error('http ' + r.status);
|
|
3095
|
+
return r.json();
|
|
3096
|
+
})
|
|
3097
|
+
.then(function (j) {
|
|
3098
|
+
if (seq !== tasksLoadSeq) return; // a newer load superseded us
|
|
3099
|
+
if (!j) { renderTasks(); return; }
|
|
3100
|
+
tasks = (j && j.tasks) || [];
|
|
3101
|
+
taskCounts = (j && j.counts) || taskCounts;
|
|
3102
|
+
tasksState = 'ready';
|
|
3103
|
+
renderTasks(); updateCloudDot(); renderSidebarCloud(); scheduleTaskPoll();
|
|
3104
|
+
})
|
|
3105
|
+
.catch(function () { if (seq === tasksLoadSeq) { tasksState = 'error'; renderTasks(); } });
|
|
3106
|
+
}
|
|
3107
|
+
if (cloudToggle) cloudToggle.addEventListener('click', function () { setLeftMode(leftMode() === 'cloud' ? '' : 'cloud'); });
|
|
3108
|
+
if (cloudRefresh) cloudRefresh.addEventListener('click', function () { loadTasks(); });
|
|
3109
|
+
if (cloudFilters) cloudFilters.addEventListener('click', function (e) {
|
|
3110
|
+
var b = (e.target && e.target.closest) ? e.target.closest('.rk-cloud-fbtn') : null;
|
|
3111
|
+
if (!b) return;
|
|
3112
|
+
taskFilter = b.getAttribute('data-f') || 'all';
|
|
3113
|
+
renderTasks();
|
|
3114
|
+
});
|
|
3115
|
+
// Global control surface so any page can pop the Cloud Status drawer open and
|
|
3116
|
+
// highlight the newest task (e.g. right after kicking off a raws import).
|
|
3117
|
+
window.__vidfarmCloudStatus = {
|
|
3118
|
+
open: function (o) {
|
|
3119
|
+
o = o || {};
|
|
3120
|
+
taskFilter = o.filter || 'running';
|
|
3121
|
+
if (typeof o.highlightId !== 'undefined') highlightTaskId = o.highlightId;
|
|
3122
|
+
if (panel.hidden) openPanel();
|
|
3123
|
+
setLeftMode('cloud');
|
|
3124
|
+
loadTasks();
|
|
3125
|
+
},
|
|
3126
|
+
refresh: function () { loadTasks(); },
|
|
3127
|
+
highlight: function (id) { highlightTaskId = id; if (leftMode() === 'cloud') renderTasks(); },
|
|
3128
|
+
isOpen: function () { return leftMode() === 'cloud'; }
|
|
3129
|
+
};
|
|
3130
|
+
|
|
3131
|
+
// ─── Sidebar status line (under Settings) — a subtle always-on indicator of
|
|
3132
|
+
// cloud work: "N tasks running…" with a spinner, or "All tasks done" with a
|
|
3133
|
+
// static cloud icon. Polls /me/tasks independently of the drawer (cookie-authed,
|
|
3134
|
+
// so it works before the chat boot loads); backs off when nothing is running.
|
|
3135
|
+
var CLOUD_ICON_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.5 19a4.5 4.5 0 0 0 .5-8.98A6 6 0 0 0 6.34 9.5 4 4 0 0 0 7 19h10.5z"/></svg>';
|
|
3136
|
+
function renderSidebarCloud() {
|
|
3137
|
+
if (!sidebarCloud) return;
|
|
3138
|
+
var running = (taskCounts && taskCounts.running) || 0;
|
|
3139
|
+
sidebarCloud.hidden = false;
|
|
3140
|
+
if (running > 0) {
|
|
3141
|
+
sidebarCloud.classList.add('is-running');
|
|
3142
|
+
sidebarCloud.innerHTML = '<span class="rk-sidebar-cloud-spin" aria-hidden="true"></span><span class="rk-sidebar-cloud-label">' + running + ' task' + (running === 1 ? '' : 's') + ' running…</span>';
|
|
3143
|
+
} else {
|
|
3144
|
+
sidebarCloud.classList.remove('is-running');
|
|
3145
|
+
sidebarCloud.innerHTML = CLOUD_ICON_SVG + '<span class="rk-sidebar-cloud-label">All tasks done</span>';
|
|
3146
|
+
}
|
|
3147
|
+
}
|
|
3148
|
+
function scheduleSidebarPoll() {
|
|
3149
|
+
if (sidebarTimer) { clearTimeout(sidebarTimer); sidebarTimer = null; }
|
|
3150
|
+
var running = (taskCounts && taskCounts.running) || 0;
|
|
3151
|
+
sidebarTimer = setTimeout(pollSidebar, running > 0 ? 6000 : 30000);
|
|
3152
|
+
}
|
|
3153
|
+
function pollSidebar() {
|
|
3154
|
+
if (!sidebarCloud) return;
|
|
3155
|
+
fetch(TASKS_URL + '?limit=1', { headers: authHeaders(), credentials: 'same-origin' })
|
|
3156
|
+
.then(function (r) {
|
|
3157
|
+
if (r.status === 401 || r.status === 403) { sidebarCloud.hidden = true; return null; } // signed out — hide the line
|
|
3158
|
+
if (!r.ok) throw new Error('http ' + r.status);
|
|
3159
|
+
return r.json();
|
|
3160
|
+
})
|
|
3161
|
+
.then(function (j) {
|
|
3162
|
+
if (!j) return; // auth-hidden; stop polling
|
|
3163
|
+
taskCounts = j.counts || taskCounts;
|
|
3164
|
+
renderSidebarCloud(); updateCloudDot(); scheduleSidebarPoll();
|
|
3165
|
+
})
|
|
3166
|
+
.catch(function () { scheduleSidebarPoll(); }); // transient error — try again on the normal cadence
|
|
3167
|
+
}
|
|
3168
|
+
if (sidebarCloud) {
|
|
3169
|
+
sidebarCloud.addEventListener('click', function () {
|
|
3170
|
+
if (window.__vidfarmCloudStatus) window.__vidfarmCloudStatus.open({ filter: 'all' });
|
|
3171
|
+
});
|
|
3172
|
+
sidebarStarted = true;
|
|
3173
|
+
pollSidebar();
|
|
3174
|
+
}
|
|
3175
|
+
|
|
3176
|
+
if (filesToggle) {
|
|
3177
|
+
filesToggle.addEventListener('click', function () { setLeftMode(leftMode() === 'files' ? '' : 'files'); });
|
|
3178
|
+
}
|
|
3179
|
+
// Composer paperclip — opens the folder directory nav (Files drawer) so the
|
|
3180
|
+
// user can browse + attach a file, mirroring the header Files toggle. Works
|
|
3181
|
+
// in both the editor dock and the floating pop-panel.
|
|
3182
|
+
var composerAttach = document.getElementById('rkAichatAttach');
|
|
3183
|
+
if (composerAttach) {
|
|
3184
|
+
composerAttach.addEventListener('click', function () { setLeftMode(leftMode() === 'files' ? '' : 'files'); });
|
|
3185
|
+
}
|
|
3186
|
+
|
|
3187
|
+
// ─── paste-to-attach: drop a copied image/file straight into the composer ───
|
|
3188
|
+
// Clipboard files (screenshot, copied image, "Copy image") get auto-uploaded
|
|
3189
|
+
// to the user's /temp folder, then attached as a chip just like a picked file.
|
|
3190
|
+
// We show a spinner chip immediately and swap it for the real file on success.
|
|
3191
|
+
function extNameFor(blob, idx) {
|
|
3192
|
+
var ct = (blob && blob.type) || '';
|
|
3193
|
+
var base = ct.indexOf('image/') === 0 ? 'pasted-image' : ct.indexOf('video/') === 0 ? 'pasted-video' : ct.indexOf('audio/') === 0 ? 'pasted-audio' : 'pasted-file';
|
|
3194
|
+
var ext = ct && ct.indexOf('/') > -1 ? ct.split('/')[1].split('+')[0].split(';')[0] : 'bin';
|
|
3195
|
+
if (ext === 'jpeg') ext = 'jpg';
|
|
3196
|
+
var stamp = Date.now().toString(36) + (idx ? '-' + idx : '');
|
|
3197
|
+
return base + '-' + stamp + '.' + ext;
|
|
3198
|
+
}
|
|
3199
|
+
function uploadPastedBlob(blob, fileName, pendingId) {
|
|
3200
|
+
var fd = new FormData();
|
|
3201
|
+
fd.append('file', blob, fileName);
|
|
3202
|
+
var headers = {}; if (API_KEY) headers['vidfarm-api-key'] = API_KEY;
|
|
3203
|
+
fetch(window.location.origin + '/api/v1/user/me/temporary-files/upload', {
|
|
3204
|
+
method: 'POST', credentials: 'same-origin', headers: headers, body: fd
|
|
3205
|
+
}).then(function (r) { return r.json().catch(function () { return {}; }).then(function (j) { if (!r.ok) throw new Error((j && j.error) || ('upload failed (' + r.status + ')')); return j; }); })
|
|
3206
|
+
.then(function (j) {
|
|
3207
|
+
var f = j && j.file;
|
|
3208
|
+
if (!f || !f.viewUrl) throw new Error('upload returned no file');
|
|
3209
|
+
var idx = selected.map(function (s) { return s.id; }).indexOf(pendingId);
|
|
3210
|
+
var item = { id: String(f.id), name: f.fileName || fileName, contentType: f.contentType || (blob && blob.type) || 'application/octet-stream', viewUrl: f.viewUrl };
|
|
3211
|
+
if (idx > -1) selected[idx] = item; else selected.push(item);
|
|
3212
|
+
renderChips();
|
|
3213
|
+
})
|
|
3214
|
+
.catch(function () {
|
|
3215
|
+
// A failed paste-upload just drops its chip — keep the chat log clean.
|
|
3216
|
+
selected = selected.filter(function (s) { return s.id !== pendingId; });
|
|
3217
|
+
renderChips();
|
|
3218
|
+
});
|
|
3219
|
+
}
|
|
3220
|
+
function handlePasteFiles(e) {
|
|
3221
|
+
// Files-only drawer (on /chat) has no composer of its own — let that page's
|
|
3222
|
+
// composer own paste; here we only handle the dock's real chat composer.
|
|
3223
|
+
if (panel.classList.contains('is-files-only')) return;
|
|
3224
|
+
var dt = e.clipboardData || (window.clipboardData);
|
|
3225
|
+
if (!dt) return;
|
|
3226
|
+
var blobs = [];
|
|
3227
|
+
var items = dt.items;
|
|
3228
|
+
if (items && items.length) {
|
|
3229
|
+
for (var i = 0; i < items.length; i++) {
|
|
3230
|
+
if (items[i] && items[i].kind === 'file') { var b = items[i].getAsFile(); if (b) blobs.push(b); }
|
|
3231
|
+
}
|
|
3232
|
+
}
|
|
3233
|
+
if (!blobs.length && dt.files && dt.files.length) { for (var k = 0; k < dt.files.length; k++) blobs.push(dt.files[k]); }
|
|
3234
|
+
if (!blobs.length) return; // plain-text paste → let the textarea handle it
|
|
3235
|
+
e.preventDefault();
|
|
3236
|
+
blobs.forEach(function (blob, idx) {
|
|
3237
|
+
var name = (blob && blob.name) || extNameFor(blob, idx);
|
|
3238
|
+
var pendingId = 'paste-' + Date.now().toString(36) + '-' + idx + '-' + Math.random().toString(36).slice(2, 6);
|
|
3239
|
+
selected.push({ id: pendingId, name: name, contentType: (blob && blob.type) || 'application/octet-stream', pending: true });
|
|
3240
|
+
renderChips();
|
|
3241
|
+
uploadPastedBlob(blob, name, pendingId);
|
|
3242
|
+
});
|
|
3243
|
+
if (input) input.focus();
|
|
3244
|
+
}
|
|
3245
|
+
if (input) input.addEventListener('paste', handlePasteFiles);
|
|
3246
|
+
if (historyToggle) {
|
|
3247
|
+
historyToggle.addEventListener('click', function () { setLeftMode(leftMode() === 'history' ? '' : 'history'); });
|
|
3248
|
+
}
|
|
3249
|
+
// /chat composer's attach button ⇄ files-only drawer (open ↔ close toggle).
|
|
3250
|
+
var chatAttachBtn = document.getElementById('rk-chat-attach');
|
|
3251
|
+
if (chatAttachBtn) {
|
|
3252
|
+
chatAttachBtn.addEventListener('click', function () {
|
|
3253
|
+
if (!panel.hidden && panel.classList.contains('is-files-only')) closePanel();
|
|
3254
|
+
else openPanel(true);
|
|
3255
|
+
});
|
|
3256
|
+
}
|
|
3257
|
+
var filesCloseBtn = document.getElementById('rkFilesClose');
|
|
3258
|
+
if (filesCloseBtn) filesCloseBtn.addEventListener('click', function () {
|
|
3259
|
+
// In the /chat files-only drawer this is the only close affordance → shut the
|
|
3260
|
+
// panel. In the full pop-panel it just collapses the Files drawer back to chat.
|
|
3261
|
+
if (panel.classList.contains('is-files-only')) closePanel();
|
|
3262
|
+
else setLeftMode('');
|
|
3263
|
+
});
|
|
3264
|
+
// History / Cloud drawers get the same "back to chat" affordance as Files — on
|
|
3265
|
+
// narrow panels the drawer takes the whole panel (chat steps aside), so the
|
|
3266
|
+
// header toggles that would normally close it are hidden; this in-drawer button
|
|
3267
|
+
// is the reliable way back to the conversation.
|
|
3268
|
+
var historyCloseBtn = document.getElementById('rkHistoryClose');
|
|
3269
|
+
if (historyCloseBtn) historyCloseBtn.addEventListener('click', function () { setLeftMode(''); });
|
|
3270
|
+
var cloudCloseBtn = document.getElementById('rkCloudClose');
|
|
3271
|
+
if (cloudCloseBtn) cloudCloseBtn.addEventListener('click', function () { setLeftMode(''); });
|
|
3272
|
+
// Honor the saved drawer mode (default: files open).
|
|
3273
|
+
try {
|
|
3274
|
+
var savedMode = localStorage.getItem('rk-left-mode');
|
|
3275
|
+
setLeftMode(savedMode === null ? 'files' : savedMode);
|
|
3276
|
+
} catch (e) { setLeftMode('files'); }
|
|
3277
|
+
renderHistory();
|
|
3278
|
+
|
|
3279
|
+
try {
|
|
3280
|
+
var reopen = sessionStorage.getItem('rk-chat-open');
|
|
3281
|
+
if (isChatPage) { if (reopen === 'files') openPanel(true); }
|
|
3282
|
+
else if (reopen === '1') openPanel();
|
|
3283
|
+
} catch (e) {}
|
|
3284
|
+
|
|
3285
|
+
// A handed-off thread (?rk_chat=…) always opens the dock so the conversation
|
|
3286
|
+
// reappears immediately (openPanel → loadBoot → consumeHandoff replays it).
|
|
3287
|
+
if (handoffThread && !isChatPage) openPanel();
|
|
3288
|
+
})();
|
|
3289
|
+
|
|
3290
|
+
// ── subtle per-video loading indicators ──────────────────────────────────────
|
|
3291
|
+
// A small spinner appears over ANY <video> while it is actively fetching data
|
|
3292
|
+
// (initial buffer OR a mid-playback rebuffer) and fades out the moment the video
|
|
3293
|
+
// has enough data to paint/play. Self-contained so it works on every reskin page
|
|
3294
|
+
// regardless of the chat dock. It only shows while the browser is genuinely
|
|
3295
|
+
// LOADING (networkState === 2), so idle preload="none" videos never spin.
|
|
3296
|
+
(function () {
|
|
3297
|
+
function host(v) { return v.parentElement; }
|
|
3298
|
+
function spinner(v, make) {
|
|
3299
|
+
var p = host(v);
|
|
3300
|
+
if (!p) return null;
|
|
3301
|
+
var s = p.querySelector(':scope > .rk-vspin');
|
|
3302
|
+
if (!s && make) {
|
|
3303
|
+
s = document.createElement('span');
|
|
3304
|
+
s.className = 'rk-vspin';
|
|
3305
|
+
s.setAttribute('aria-hidden', 'true');
|
|
3306
|
+
p.appendChild(s);
|
|
3307
|
+
}
|
|
3308
|
+
return s || null;
|
|
3309
|
+
}
|
|
3310
|
+
// NETWORK_LOADING === 2 && readyState < HAVE_FUTURE_DATA (3)
|
|
3311
|
+
function loading(v) { return v.networkState === 2 && v.readyState < 3; }
|
|
3312
|
+
function show(v) { var s = spinner(v, true); if (s) s.classList.add('is-on'); }
|
|
3313
|
+
function hide(v) { var s = spinner(v, false); if (s) s.classList.remove('is-on'); }
|
|
3314
|
+
function sync(v) { if (loading(v)) show(v); else hide(v); }
|
|
3315
|
+
function wire(v) {
|
|
3316
|
+
if (v.__rkVload) return;
|
|
3317
|
+
v.__rkVload = true;
|
|
3318
|
+
// ready / has-data events → definitely stop spinning
|
|
3319
|
+
['loadeddata', 'canplay', 'canplaythrough', 'playing', 'error', 'abort', 'suspend', 'emptied']
|
|
3320
|
+
.forEach(function (ev) { v.addEventListener(ev, function () { hide(v); }); });
|
|
3321
|
+
// fetch / rebuffer events → spin only if actually loading
|
|
3322
|
+
['loadstart', 'progress', 'waiting', 'stalled', 'seeking']
|
|
3323
|
+
.forEach(function (ev) { v.addEventListener(ev, function () { sync(v); }); });
|
|
3324
|
+
sync(v);
|
|
3325
|
+
}
|
|
3326
|
+
function scan(root) { (root || document).querySelectorAll('video').forEach(wire); }
|
|
3327
|
+
if (document.readyState === 'loading') {
|
|
3328
|
+
document.addEventListener('DOMContentLoaded', function () { scan(); });
|
|
3329
|
+
} else { scan(); }
|
|
3330
|
+
// catch lazily-inserted (TikTok viewer) and lazily-hydrated (data-vsrc → src) videos
|
|
3331
|
+
if ('MutationObserver' in window) {
|
|
3332
|
+
new MutationObserver(function (muts) {
|
|
3333
|
+
for (var i = 0; i < muts.length; i++) {
|
|
3334
|
+
var m = muts[i];
|
|
3335
|
+
if (m.type === 'attributes') {
|
|
3336
|
+
if (m.target && m.target.tagName === 'VIDEO') { wire(m.target); sync(m.target); }
|
|
3337
|
+
continue;
|
|
3338
|
+
}
|
|
3339
|
+
if (!m.addedNodes) continue;
|
|
3340
|
+
for (var j = 0; j < m.addedNodes.length; j++) {
|
|
3341
|
+
var n = m.addedNodes[j];
|
|
3342
|
+
if (!n || n.nodeType !== 1) continue;
|
|
3343
|
+
if (n.tagName === 'VIDEO') wire(n);
|
|
3344
|
+
else if (n.querySelectorAll) scan(n);
|
|
3345
|
+
}
|
|
3346
|
+
}
|
|
3347
|
+
}).observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ['src'] });
|
|
3348
|
+
}
|
|
3349
|
+
})();</script>
|
|
3350
|
+
<script>(() => {
|
|
3351
|
+
const copiedTimers = new WeakMap();
|
|
3352
|
+
const copyText = async (value) => {
|
|
3353
|
+
if (!value) return false;
|
|
3354
|
+
try {
|
|
3355
|
+
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
3356
|
+
await navigator.clipboard.writeText(value);
|
|
3357
|
+
return true;
|
|
3358
|
+
}
|
|
3359
|
+
} catch {}
|
|
3360
|
+
try {
|
|
3361
|
+
const area = document.createElement("textarea");
|
|
3362
|
+
area.value = value;
|
|
3363
|
+
area.setAttribute("readonly", "readonly");
|
|
3364
|
+
area.style.position = "fixed";
|
|
3365
|
+
area.style.opacity = "0";
|
|
3366
|
+
document.body.appendChild(area);
|
|
3367
|
+
area.select();
|
|
3368
|
+
const ok = document.execCommand("copy");
|
|
3369
|
+
document.body.removeChild(area);
|
|
3370
|
+
return ok;
|
|
3371
|
+
} catch {
|
|
3372
|
+
return false;
|
|
3373
|
+
}
|
|
3374
|
+
};
|
|
3375
|
+
const flashButtonLabel = (button, labelNode, nextLabel, resetDelay = 1400) => {
|
|
3376
|
+
if (!button || !labelNode) return;
|
|
3377
|
+
const defaultLabel = button.getAttribute("data-default-label") || labelNode.textContent || "";
|
|
3378
|
+
labelNode.textContent = nextLabel;
|
|
3379
|
+
if (copiedTimers.has(button)) {
|
|
3380
|
+
clearTimeout(copiedTimers.get(button));
|
|
3381
|
+
}
|
|
3382
|
+
const timer = window.setTimeout(() => {
|
|
3383
|
+
labelNode.textContent = defaultLabel;
|
|
3384
|
+
copiedTimers.delete(button);
|
|
3385
|
+
}, resetDelay);
|
|
3386
|
+
copiedTimers.set(button, timer);
|
|
3387
|
+
};
|
|
3388
|
+
const closeOthers = (current) => {
|
|
3389
|
+
document.querySelectorAll("[data-skill-install]").forEach((node) => {
|
|
3390
|
+
if (node === current) return;
|
|
3391
|
+
const panel = node.querySelector("[data-skill-menu]");
|
|
3392
|
+
const toggle = node.querySelector("[data-skill-menu-toggle]");
|
|
3393
|
+
if (panel) panel.hidden = true;
|
|
3394
|
+
if (toggle) toggle.setAttribute("aria-expanded", "false");
|
|
3395
|
+
});
|
|
3396
|
+
};
|
|
3397
|
+
document.querySelectorAll("[data-skill-install]").forEach((control) => {
|
|
3398
|
+
const mainButton = control.querySelector("[data-skill-copy]");
|
|
3399
|
+
const mainLabel = control.querySelector(".vf-skill-install-main-label");
|
|
3400
|
+
const menuToggle = control.querySelector("[data-skill-menu-toggle]");
|
|
3401
|
+
const menu = control.querySelector("[data-skill-menu]");
|
|
3402
|
+
const commandInput = control.querySelector("[data-skill-command-input]");
|
|
3403
|
+
const commandCopy = control.querySelector("[data-skill-command-copy]");
|
|
3404
|
+
if (mainButton && mainLabel) {
|
|
3405
|
+
mainButton.addEventListener("click", async () => {
|
|
3406
|
+
const ok = await copyText(mainButton.getAttribute("data-skill-content") || "");
|
|
3407
|
+
flashButtonLabel(mainButton, mainLabel, ok ? "Copied" : "Copy failed");
|
|
3408
|
+
});
|
|
3409
|
+
}
|
|
3410
|
+
if (menuToggle && menu) {
|
|
3411
|
+
menuToggle.addEventListener("click", (event) => {
|
|
3412
|
+
event.stopPropagation();
|
|
3413
|
+
const willOpen = menu.hidden;
|
|
3414
|
+
closeOthers(control);
|
|
3415
|
+
menu.hidden = !willOpen;
|
|
3416
|
+
menuToggle.setAttribute("aria-expanded", willOpen ? "true" : "false");
|
|
3417
|
+
});
|
|
3418
|
+
}
|
|
3419
|
+
if (commandCopy && commandInput) {
|
|
3420
|
+
commandCopy.addEventListener("click", async () => {
|
|
3421
|
+
const ok = await copyText(commandInput.value || "");
|
|
3422
|
+
commandCopy.setAttribute("data-copied", ok ? "true" : "false");
|
|
3423
|
+
commandCopy.setAttribute("aria-label", ok ? "Install command copied" : "Unable to copy install command");
|
|
3424
|
+
window.setTimeout(() => {
|
|
3425
|
+
commandCopy.removeAttribute("data-copied");
|
|
3426
|
+
commandCopy.setAttribute("aria-label", "Copy install command");
|
|
3427
|
+
}, 1400);
|
|
3428
|
+
});
|
|
3429
|
+
}
|
|
3430
|
+
});
|
|
3431
|
+
document.addEventListener("click", (event) => {
|
|
3432
|
+
const target = event.target;
|
|
3433
|
+
if (!(target instanceof Node)) return;
|
|
3434
|
+
document.querySelectorAll("[data-skill-install]").forEach((control) => {
|
|
3435
|
+
if (control.contains(target)) return;
|
|
3436
|
+
const panel = control.querySelector("[data-skill-menu]");
|
|
3437
|
+
const toggle = control.querySelector("[data-skill-menu-toggle]");
|
|
3438
|
+
if (panel) panel.hidden = true;
|
|
3439
|
+
if (toggle) toggle.setAttribute("aria-expanded", "false");
|
|
3440
|
+
});
|
|
3441
|
+
});
|
|
3442
|
+
document.addEventListener("keydown", (event) => {
|
|
3443
|
+
if (event.key !== "Escape") return;
|
|
3444
|
+
document.querySelectorAll("[data-skill-menu-toggle]").forEach((toggle) => toggle.setAttribute("aria-expanded", "false"));
|
|
3445
|
+
document.querySelectorAll("[data-skill-menu]").forEach((panel) => { panel.hidden = true; });
|
|
3446
|
+
});
|
|
3447
|
+
})();</script>
|
|
3448
|
+
<script type="module" src="/assets/file-directory-app.js"></script>
|
|
3449
|
+
</body>
|
|
3450
|
+
</html>
|