Put powershell line separator when system is detected to be Windows (#…

…287)

On windows (powershell), the line break character is the backtick instead of the backslash.

packages/web/src/components/configure-dialog.tsx

@@ -43,6 +43,7 @@ interface ConfigureDialogProps extends DialogProps {
   sessionName: string;
   sessionUrl: string;
   userName: string;
+  OS: string;
   onAccept?: (targets: string[]) => void;
 }
 
@@ -51,6 +52,7 @@ export function ConfigureDialog({
   sessionName,
   sessionUrl,
   userName,
+  OS,
   onAccept,
   ...props
 }: ConfigureDialogProps) {
@@ -110,6 +112,7 @@ export function ConfigureDialog({
               sessionName={sessionName}
               sessionUrl={sessionUrl}
               userName={userName}
+              OS={OS}
             />
           )}
           <DialogFooter>

packages/web/src/components/repls-dialog.tsx

@@ -12,13 +12,15 @@ interface ReplsDialogProps extends DialogProps {
   sessionUrl: string;
   sessionName: string;
   userName: string;
+  OS: string;
 }
 
 export function ReplsDialog({
   targets,
   sessionUrl,
   sessionName,
   userName,
+  OS,
   ...props
 }: ReplsDialogProps) {
   return (
@@ -31,6 +33,7 @@ export function ReplsDialog({
             sessionName={sessionName}
             sessionUrl={sessionUrl}
             userName={userName}
+            OS={OS}
           />
         </DialogHeader>
       </DialogContent>

packages/web/src/components/repls-info.tsx

@@ -9,25 +9,30 @@ interface ReplsInfoProps {
   sessionUrl: string;
   sessionName: string;
   userName: string;
+  OS: string;
 }
 
 export function ReplsInfo({
   targets,
   sessionUrl,
   sessionName,
   userName,
+  OS,
 }: ReplsInfoProps) {
   const [copied, setCopied] = useState(false);
 
   const replTargets = targets.filter((t) => !webTargets.includes(t));
   if (replTargets.length === 0) return null;
 
+  const terminalSpec = (OS === "windows" ? 'PowerShell ' : '');
+  const lineSeparator = (OS === 'windows' ? `\`` : `\\`);
+
   const replCommand =
-    `npx flok-repl@latest -H ${sessionUrl} \\\n` +
-    `  -s ${sessionName} \\\n` +
-    `  -t ${replTargets.join(" ")} \\\n` +
+    `npx flok-repl@latest -H ${sessionUrl} ${lineSeparator}\n` +
+    `  -s ${sessionName} ${lineSeparator}\n` +
+    `  -t ${replTargets.join(" ")} ${lineSeparator}\n` +
     `  -T user:${userName}`;
-
+    
   const copyToClipboard = () => {
     setCopied(true);
     setTimeout(() => setCopied(false), 1000);
@@ -39,7 +44,7 @@ export function ReplsInfo({
       <p className="text-sm text-slate-500 dark:text-slate-400">
         This session has one or more targets that need an external REPL process
         to run on your computer. To run code executed on these targets, you will
-        need to run <code>flok-repl</code> on a terminal, like this:
+        need to run <code>flok-repl</code> on a {terminalSpec}terminal, like this:
       </p>
       <div className="mt-4 mb-4 relative">
         <pre className="rounded bg-slate-800 mr-3 p-3 whitespace-pre-wrap w-full">

packages/web/src/routes/session.tsx

@@ -439,6 +439,8 @@ export function Component() {
     [documents]
   );
 
+  const OS = (navigator.userAgent.indexOf("Windows") != -1) ? "windows" : "unix";
+
   const handleViewLayoutAdd = useCallback(() => {
     if (!session) return;
     const newDocs = [
@@ -539,6 +541,7 @@ export function Component() {
           sessionUrl={session.wsUrl}
           sessionName={session.name}
           userName={username}
+          OS={OS}
           open={configureDialogOpen}
           onOpenChange={(isOpen) => setConfigureDialogOpen(isOpen)}
           onAccept={handleConfigureAccept}
@@ -550,6 +553,7 @@ export function Component() {
           sessionUrl={session.wsUrl}
           sessionName={session.name}
           userName={username}
+          OS={OS}
           open={replsDialogOpen}
           onOpenChange={(isOpen) => setReplsDialogOpen(isOpen)}
         />